-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Open
Labels
Description
Current behaviour
When using a screen leader like iOS VoiceOver the Appbar.Header component is passed the prop accessible={true}, which groups its children into a single selectable component. This makes it so that a user using VoiceOver is not able to focus on the individual actions in the Appbar (ex: "Back" or "Close")
Expected behaviour
The Appbar should allow for each of it's child components to be actionable via screen reader.
How to reproduce?
Try navigating to any of the actions in this example component using a screenreader:
<Appbar.Header>
<Appbar.BackAction onPress={()=>{}} />
<Appbar.Content title="Title" />
<Appbar.Action icon="magnify" onPress={()=>{}} accessibilityLabel="Search"/>
<Appbar.Action icon="dots-vertical" onPress={()=>{}} accessibilityLabel="More"/>
</Appbar.Header>
What have you tried so far?
I've tried explicitly passing the Appbar accessible={false}, making child View components accessible, and creating a patch that sets the Appbar accessibility to false
Your Environment
| software | version |
|---|---|
| ios | 18.0 |
| android | x |
| react-native | 0.73.6 |
| react-native-paper | ^5.8.0 |
| node | 20.11.1 |
| npm or yarn | 1.22.22 |
| expo sdk | ^50.0.17 |