Skip to content

Appbar actions are not accessible #4499

@hannahct

Description

@hannahct

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions