瀏覽代碼

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
j8
Marco Zehe 5 年之前
父節點
當前提交
e32f367b0c
沒有連結到貢獻者的電子郵件帳戶。

+ 2
- 0
react/features/base/dialog/components/native/BottomSheet.js 查看文件

@@ -84,6 +84,8 @@ class BottomSheet extends PureComponent<Props> {
84 84
 
85 85
         return (
86 86
             <SlidingView
87
+                accessibilityRole = 'menu'
88
+                accessibilityViewIsModal = { true }
87 89
                 onHide = { this.props.onCancel }
88 90
                 position = 'bottom'
89 91
                 show = { true }>

+ 4
- 1
react/features/base/toolbox/components/ToolboxItem.native.js 查看文件

@@ -41,7 +41,8 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
41 41
             elementAfter,
42 42
             onClick,
43 43
             showLabel,
44
-            styles
44
+            styles,
45
+            toggled
45 46
         } = this.props;
46 47
 
47 48
         let children = this._renderIcon();
@@ -72,6 +73,8 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
72 73
         return (
73 74
             <TouchableHighlight
74 75
                 accessibilityLabel = { this.accessibilityLabel }
76
+                accessibilityRole = 'button'
77
+                accessibilityState = {{ 'selected': toggled }}
75 78
                 disabled = { disabled }
76 79
                 onPress = { onClick }
77 80
                 style = { style }

+ 1
- 0
react/features/toolbox/components/native/Toolbox.js 查看文件

@@ -110,6 +110,7 @@ class Toolbox extends PureComponent<Props> {
110 110
 
111 111
         return (
112 112
             <View
113
+                accessibilityRole = 'toolbar'
113 114
                 pointerEvents = 'box-none'
114 115
                 style = { styles.toolbar }>
115 116
                 {

Loading…
取消
儲存