compose-focus-navigation

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

908|42|Updated May 12, 2026
One-click install
npx skills add https://github.com/chrisbanes/skills --skill compose-focus-navigation-chrisbanes
Or copy as Structured Prompt for Agent
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.