Adding accessibility role and state to bottom bar #90
Conversation
src/views/BottomTabBar.js
Outdated
| route, | ||
| }); | ||
| const accessibilityLabel = this.props.getAccessibilityLabel({ route }); | ||
| const accessibilityRole = this.props.getAccessibilityRole({ route }) || 'button'; |
There was a problem hiding this comment.
What other accessibility roles instead of button do you have in mind?
There was a problem hiding this comment.
I think having button is a good default, but if someone only had an icon with no label, they may want to use imagebutton. Overriding getAccessibilityRole would allow that.
There was a problem hiding this comment.
The full list of available roles are here: https://facebook.github.io/react-native/docs/accessibility#accessibilityrole-ios-android
|
|
||
| let accessibilityStates = this.props.getAccessibilityStates({ route }); | ||
| if (!accessibilityStates) { | ||
| accessibilityStates = focused ? ['selected'] : []; |
There was a problem hiding this comment.
What other accessibility states instead of selected/not selected do you have in mind?
There was a problem hiding this comment.
selected and disabled are the only options allowed through the API, but this library would not really know if a tab is disabled (perhaps for an app's custom permissions?). If someone had a disabled tab, they could override getAccessibilityStates and return ['disabled'] or even ['selected', 'disabled'].
|
Any chance of this PR getting some attention? This is currently the only hold out on making my entire app accessible. I would also like it if the |
|
There has been a merge conflict since I first opened the PR, so I pushed up a fix. @satya164 Was there something else you'd like me to address? |
|
Sorry for the delay. Can you rebase against master so the CI runs? I'll merge it after the CI passes. |
|
I rebased and fixed some linting errors. I did not include the states on the MaterialTopBar because they are not exposed by the underlying lib |
Exposing `accessibilityRole` and `accessibilityStates` through props in the same way as `accessibilityLabel`. This allows screen readers to announce things like: `Selected. Banana. Button.` Reasonable defaults were provided, however, consumers can provide custom overrides in the cases where the role might be `imagebutton` or the state might be `disabled`. Select a button with VoiceOver (iOS) or Talkback (Android) enabled. The screen reader should read something like `Selected. <AccessibilityLabel>. Button.` or something slightly different depending on which platform you are on. Buttons that are not focused should not have `Selected` announced.
|
Any reason 'tab' didn't end up being the default? I tried some apple native apps, and they all say ". Tab. of " (I guess the parent need to be set with |
I remember that's what we used to do. Maybe accidentally changed it.
AFAIK RN doesn't expose this value? If you could send a PR to fix it, it'll be awesome. |
|
Ok I will see what I can do :) |
|
Ah, must be a recent addition 😅 |
Motivation
Exposing
accessibilityRoleandaccessibilityStatesthrough props in the same way asaccessibilityLabel. This allows screen readers to announce things like:Selected. Banana. Button.Reasonable defaults were provided, however, consumers can provide custom overrides in the cases where the role might be
imagebuttonor the state might bedisabled.Test plan
Select a button with VoiceOver (iOS) or Talkback (Android) enabled. The screen reader should read something like
Selected. <AccessibilityLabel>. Button.or something slightly different depending on which platform you are on. Buttons that are not focused should not haveSelectedannounced.