In this lesson, you will learn how to direct the flow of the accessibility focus indicator so that keyboard users navigate your app in a logical, predictable sequence.
When a user relies on a keyboard or switch device to navigate your app, the "focus orbit"—the blue or colored outline that jumps from element to element—follows the order in which components appear in the view hierarchy. If your layout uses absolute positioning or complex flex arrangements to visually move items around, the focus might jump erratically across the screen, confusing the user.
Defining the Focus Path
Managing the focus orbit is about ensuring that the physical sequence of navigation matches the logical flow of your UI. Even if your design uses flex-direction: row-reverse or complex offsets to achieve a specific look, the focus engine doesn't necessarily know that a "next" button should follow a "previous" button if they aren't siblings in the JSX.
To control this, we use the accessible and importantForAccessibility props, but for the focus orbit specifically, we group elements using accessible={true} on a container to treat it as a single node, or leverage tabIndex (if using web-based React Native environments) or explicit focus management.
Consider this example where a custom layout might break the logical flow:
<View style={{ flexDirection: 'column' }}>
<Button title="Login" />
<View style={{ flexDirection: 'row-reverse' }}>
<Button title="Help" />
<Button title="Terms" />
</View>
</View>
In the example above, the focus might hit "Login," then jump to "Terms," and finally "Help." To normalize this, you must ensure that your flex container order matches the visual reading order. If the visual order must differ from the DOM order, you can use accessibilityViewIsModal on a parent to constrain the focus orbit to a specific container, preventing the focus from "leaking" into secondary UI parts unexpectedly.
By aligning your component tree structure with your layout's visual progression, you ensure that the focus orbit feels like a natural path rather than a scavenger hunt.
Key Takeaway: The accessibility focus orbit follows your JSX tree structure, not just your visual layout; always structure your components in the exact order you want a keyboard user to experience them.