React Native accessibility fixes (#5825)

* Accessibility: Make the native toolbox item communicate that it is a button.

* Accessibility: If an item is toggled, mark it as selected for accessibility

* Accessibility: Make the toolbox a toolbar for accessibility

* Accessibility: Mark the bottom sheet as a menu for accessibility

* Fix typo, AccessibilityRole, not AccessibleRole

* Statement fix

* Appease the linter

* Fix linting errors for real this time
This commit is contained in:
Marco Zehe
2020-04-10 08:07:48 -05:00
committed by GitHub
parent 2b181673b5
commit e32f367b0c
3 changed files with 7 additions and 1 deletions
@@ -84,6 +84,8 @@ class BottomSheet extends PureComponent<Props> {
return (
<SlidingView
accessibilityRole = 'menu'
accessibilityViewIsModal = { true }
onHide = { this.props.onCancel }
position = 'bottom'
show = { true }>
@@ -41,7 +41,8 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
elementAfter,
onClick,
showLabel,
styles
styles,
toggled
} = this.props;
let children = this._renderIcon();
@@ -72,6 +73,8 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
return (
<TouchableHighlight
accessibilityLabel = { this.accessibilityLabel }
accessibilityRole = 'button'
accessibilityState = {{ 'selected': toggled }}
disabled = { disabled }
onPress = { onClick }
style = { style }
@@ -110,6 +110,7 @@ class Toolbox extends PureComponent<Props> {
return (
<View
accessibilityRole = 'toolbar'
pointerEvents = 'box-none'
style = { styles.toolbar }>
{