Accessibility (#381)

* Set aria-role "switch" on toggleable buttons * Add missing aria labels
sstur · Sep 16, 2020 · 8c81622 · 8c81622
1 parent f32e2a4
commit 8c81622
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/src/RichTextEditor.js b/src/RichTextEditor.js
@@ -154,6 +154,7 @@ export default class RichTextEditor extends Component {
             onTab={this._onTab}
             onChange={this._onChange}
             placeholder={placeholder}
+            ariaLabel={placeholder || 'Edit text'}
             ref={(el) => {
               this.editor = el;
             }}

diff --git a/src/lib/EditorToolbar.js b/src/lib/EditorToolbar.js
@@ -152,6 +152,7 @@ export default class EditorToolbar extends Component {
           choices={choices}
           selectedKey={blockType}
           onChange={this._selectBlockType}
+          aria-label={'Block type'}
         />
       </ButtonGroup>
     );

diff --git a/src/lib/StyleButton.js b/src/lib/StyleButton.js
@@ -27,6 +27,7 @@ export default class StyleButton extends Component {
         iconName={iconName}
         onClick={this._onClick}
         focusOnClick={false}
+        isSwitch={true}
       />
     );
   }

diff --git a/src/ui/IconButton.js b/src/ui/IconButton.js
@@ -13,21 +13,22 @@ type Props = {
   children?: ReactNode;
   className?: string;
   label?: string;
+  isSwitch?: boolean;
 };
 
 export default class IconButton extends Component {
   props: Props;
 
   render() {
     let {props} = this;
-    let {className, iconName, label, children, isActive, ...otherProps} = props;
+    let {className, iconName, label, children, isActive, isSwitch, ...otherProps} = props;
     className = cx(className, {
       [styles.root]: true,
       [styles.isActive]: isActive,
     });
     return (
       <ButtonWrap>
-        <Button {...otherProps} title={label} className={className}>
+        <Button {...otherProps} title={label} className={className} role={isSwitch && 'switch'} aria-checked={isActive}>
           <span className={styles['icon-' + iconName]} />
           {/* TODO: add text label here with aria-hidden */}
         </Button>