# Adding Navigation support to Large Content Viewer with Compose

DevFeed: [Adding Navigation support to Large Content Viewer with Compose](<https://devfeed.tech/articles/adding-navigation-support-to-large-content-viewer-with-compose-38519.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2026-02-28/adding-navigation-support-to-large-content-viewer-with-compose/>)

Author: Eevis Panula

Published: 2026-02-28T04:26:46.364000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [navigation](<https://devfeed.tech/topics/navigation.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [keyboard](<https://devfeed.tech/topics/keyboard.md>), [screen](<https://devfeed.tech/topics/screen.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [compose](<https://devfeed.tech/tags/compose.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [navigation](<https://devfeed.tech/tags/navigation.md>), [screen](<https://devfeed.tech/tags/screen.md>), [test](<https://devfeed.tech/tags/test.md>)

## AI overview

This tutorial explains how to add keyboard and assistive-technology navigation to a large content viewer built with Jetpack Compose. It presents an approach using focus handling to show item previews, covers keyboard and screen reader navigation, and discusses voice access support. The author notes that the example is a demo and should be tested with users of assistive technologies before production release.

## Source excerpt

In my previous blog post, Beyond Font Scaling: Large Content Viewer with Compose, I explained how to build a large content viewer from iOS using Jetpack Compose. The implementation did not include support for keyboard or other assistive tech navigation, so this blog post tackles those topics. A disclaimer: The way I'm presenting the support for assistive tech navigation in this blog post is one approach, and my goal is to provide examples and context, but as always, this is a demo project. In your production app, things might get a bit more complicated, and you might need to handle more variables. So always remember to test the solution, ideally with your users who use assistive technologies. And I hope it goes without saying: Before releasing to production. In this blog post, I'm presenting code for keyboard and screen reader navigation, then sharing some considerations for voice access support. The code relies heavily on the code presented in the previous blog post, so if you have questions about it, please check that post. A link for the full code is also provided at the end of the blog post. Keyboard Navigation Support The pointer input implementation presented in the previous blog post relies on long-press, but keyboard navigation doesn't support that kind of interaction, so we need another tactic to display the item preview. With a keyboard, focusing on an item is a natural choice, so we're going to use that. The idea is that when a user who navigates with a keyboard or a keyboard-emulating device focuses on a bottom bar item for the same duration as a long press, we will show the item preview. We can do this with the following code: NavigationBarItem( modifier = Modifier .onFocusChanged { if (it.isFocused) { scope.launch { delay( viewConfiguration.longPressTimeoutMillis ) previewedItem = item } } else { previewedItem = null } }, ... } We use the onFocusChanged-modifier. Its state indicates whether the current element is focused via it.isFocused. If it is, we