浏览代码

Improve accessibility of Buttons in Webapp

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
master
Michael Telatynski 5 年前
父节点
当前提交
335b43036d

+ 4
- 3
react/features/base/toolbox/components/AbstractButton.js 查看文件

230
 
230
 
231
     /**
231
     /**
232
      * Helper function to be implemented by subclasses, which must return a
232
      * Helper function to be implemented by subclasses, which must return a
233
-     * {@code boolean} value indicating if this button is toggled or not.
233
+     * {@code boolean} value indicating if this button is toggled or not or
234
+     * undefined if the button is not toggleable.
234
      *
235
      *
235
      * @protected
236
      * @protected
236
-     * @returns {boolean}
237
+     * @returns {?boolean}
237
      */
238
      */
238
     _isToggled() {
239
     _isToggled() {
239
-        return false;
240
+        return undefined;
240
     }
241
     }
241
 
242
 
242
     _onClick: (*) => void;
243
     _onClick: (*) => void;

+ 44
- 2
react/features/base/toolbox/components/ToolboxItem.web.js 查看文件

12
  * Web implementation of {@code AbstractToolboxItem}.
12
  * Web implementation of {@code AbstractToolboxItem}.
13
  */
13
  */
14
 export default class ToolboxItem extends AbstractToolboxItem<Props> {
14
 export default class ToolboxItem extends AbstractToolboxItem<Props> {
15
+    /**
16
+     * Initializes a new {@code ToolboxItem} instance.
17
+     *
18
+     * @inheritdoc
19
+     */
20
+    constructor(props: Props) {
21
+        super(props);
22
+
23
+        this._onKeyDown = this._onKeyDown.bind(this);
24
+    }
25
+
26
+    _onKeyDown: (Object) => void;
27
+
28
+    /**
29
+     * Handles 'Enter' key on the button to trigger onClick for accessibility.
30
+     * We should be handling Space onKeyUp but it conflicts with PTT.
31
+     *
32
+     * @param {Object} event - The key event.
33
+     * @private
34
+     * @returns {void}
35
+     */
36
+    _onKeyDown(event) {
37
+        // If the event coming to the dialog has been subject to preventDefault
38
+        // we don't handle it here.
39
+        if (event.defaultPrevented) {
40
+            return;
41
+        }
42
+
43
+        if (event.key === 'Enter') {
44
+            event.preventDefault();
45
+            event.stopPropagation();
46
+            this.props.onClick();
47
+        }
48
+    }
49
+
15
     /**
50
     /**
16
      * Handles rendering of the actual item. If the label is being shown, which
51
      * Handles rendering of the actual item. If the label is being shown, which
17
      * is controlled with the `showLabel` prop, the item is rendered for its
52
      * is controlled with the `showLabel` prop, the item is rendered for its
27
             elementAfter,
62
             elementAfter,
28
             onClick,
63
             onClick,
29
             showLabel,
64
             showLabel,
30
-            tooltipPosition
65
+            tooltipPosition,
66
+            toggled
31
         } = this.props;
67
         } = this.props;
32
         const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
68
         const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
33
         const props = {
69
         const props = {
70
+            'aria-pressed': toggled,
71
+            'aria-disabled': disabled,
34
             'aria-label': this.accessibilityLabel,
72
             'aria-label': this.accessibilityLabel,
35
             className: className + (disabled ? ' disabled' : ''),
73
             className: className + (disabled ? ' disabled' : ''),
36
-            onClick: disabled ? undefined : onClick
74
+            onClick: disabled ? undefined : onClick,
75
+            onKeyDown: this._onKeyDown,
76
+            tabIndex: 0,
77
+            role: 'button'
37
         };
78
         };
79
+
38
         const elementType = showLabel ? 'li' : 'div';
80
         const elementType = showLabel ? 'li' : 'div';
39
         const useTooltip = this.tooltip && this.tooltip.length > 0;
81
         const useTooltip = this.tooltip && this.tooltip.length > 0;
40
         let children = (
82
         let children = (

+ 40
- 1
react/features/toolbox/components/web/ToolbarButton.js 查看文件

40
         tooltipPosition: 'top'
40
         tooltipPosition: 'top'
41
     };
41
     };
42
 
42
 
43
+    /**
44
+     * Initializes a new {@code ToolbarButton} instance.
45
+     *
46
+     * @inheritdoc
47
+     */
48
+    constructor(props: Props) {
49
+        super(props);
50
+
51
+        this._onKeyDown = this._onKeyDown.bind(this);
52
+    }
53
+
54
+    _onKeyDown: (Object) => void;
55
+
56
+    /**
57
+     * Handles 'Enter' key on the button to trigger onClick for accessibility.
58
+     * We should be handling Space onKeyUp but it conflicts with PTT.
59
+     *
60
+     * @param {Object} event - The key event.
61
+     * @private
62
+     * @returns {void}
63
+     */
64
+    _onKeyDown(event) {
65
+        // If the event coming to the dialog has been subject to preventDefault
66
+        // we don't handle it here.
67
+        if (event.defaultPrevented) {
68
+            return;
69
+        }
70
+
71
+        if (event.key === 'Enter') {
72
+            event.preventDefault();
73
+            event.stopPropagation();
74
+            this.props.onClick();
75
+        }
76
+    }
77
+
43
     /**
78
     /**
44
      * Renders the button of this {@code ToolbarButton}.
79
      * Renders the button of this {@code ToolbarButton}.
45
      *
80
      *
52
         return (
87
         return (
53
             <div
88
             <div
54
                 aria-label = { this.props.accessibilityLabel }
89
                 aria-label = { this.props.accessibilityLabel }
90
+                aria-pressed = { this.props.toggled }
55
                 className = 'toolbox-button'
91
                 className = 'toolbox-button'
56
-                onClick = { this.props.onClick }>
92
+                onClick = { this.props.onClick }
93
+                onKeyDown = { this._onKeyDown }
94
+                role = 'button'
95
+                tabIndex = { 0 }>
57
                 { this.props.tooltip
96
                 { this.props.tooltip
58
                     ? <Tooltip
97
                     ? <Tooltip
59
                         content = { this.props.tooltip }
98
                         content = { this.props.tooltip }

正在加载...
取消
保存