compose-focus-navigation

Implement and test focus navigation in Jetpack Compose for keyboard-first platforms.

908|42|Updated May 12, 2026

Search Tags:#accessibility #focus #jetpack-compose #keyboard-navigation #tv-ui #dpad

Ready to run

npx skills add https://github.com/chrisbanes/skills --skill compose-focus-navigation-chrisbanes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: compose-focus-navigation
Source: https://github.com/chrisbanes/skills/tree/main/skills/compose-focus-navigation
Command: npx skills add https://github.com/chrisbanes/skills --skill compose-focus-navigation-chrisbanes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Focus navigation in Jetpack Compose for TV, desktop, and keyboard-first devices is often implicit and brittle. This skill provides a structured approach to declare, manage, and test focus targets, initial focus, and directional navigation to improve accessibility and usability.

Core Features & Use Cases

Explicit focus targets: Use FocusRequester, focusProperties, and onFocusChanged to declare and observe focus behavior.
Initial and restored focus: Ensure the right item has focus after composition or data loading.
Directional navigation and key events: Handle D-pad and keyboard navigation with controlled focus paths and safe fallbacks for non-focusable regions.

For example, a carousel can define up/down focus movement between items and restore focus to the last active item after a refresh.

Quick Start

Run a test screen with focusable items and verify initial, directional, and restored focus using a D-pad or arrow keys.

Frequently Asked Questions about compose-focus-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage focus navigation in Jetpack Compose for TV and desktop?▼

Focus navigation in Jetpack Compose is managed using FocusRequester, focusProperties, and onFocusChanged to declare and observe focus behavior across TV, desktop, and keyboard-first platforms, ensuring accessibility and predictable directional navigation for components like carousels and grids.

How do I set initial focus and restore focus in Compose after data loads?▼

You can set initial and restored focus in Compose by attaching a FocusRequester to your target UI element and requesting focus during composition or after data loading, ensuring the correct item regains focus after a refresh or screen transition.

How do I handle D-pad and keyboard directional navigation in Compose UIs?▼

D-pad and keyboard directional navigation in Compose is handled using the focusProperties modifier to define explicit directional focus paths, providing controlled movement between items and safe fallbacks for non-focusable regions.

Does Jetpack Compose support explicit focus targets for accessible UI components?▼

Yes, Jetpack Compose supports explicit focus targets for accessible UI components. You use FocusRequester and onFocusChanged to control and observe how users move through elements, which is essential for accessible keyboard-first and TV applications.

What is the best way to test focus behavior and D-pad navigation in Compose?▼

The best way to test focus behavior in Compose is to run a test screen with focusable items and verify initial, directional, and restored focus using a D-pad or arrow keys, relying on clear API usage and test cases to ensure predictable focus behavior.