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
pull/5871/head jitsi-meet_4427
Marco Zehe 5 years ago committed by GitHub
parent 2b181673b5
commit e32f367b0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      react/features/base/dialog/components/native/BottomSheet.js
  2. 5
      react/features/base/toolbox/components/ToolboxItem.native.js
  3. 1
      react/features/toolbox/components/native/Toolbox.js

@ -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 }>
{

Loading…
Cancel
Save