Fixed a11y issue with narration of checkboxes.

microsoft · Nov 25, 2019 · 105720d · 105720d
1 parent 87af526
commit 105720d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1999](https://github.com/microsoft/BotFramework-Emulator/pull/1999)
   - [2000](https://github.com/microsoft/BotFramework-Emulator/pull/2000)
   - [2009](https://github.com/microsoft/BotFramework-Emulator/pull/2009)
+  - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010)
 
 - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998)
 

diff --git a/packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx b/packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx
@@ -74,7 +74,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
 
   public render(): React.ReactNode {
     // Trim off what we don't want to send to the input tag
-    const { className, label = '', ...inputProps } = this.props;
+    const { className, label = '', id, ...inputProps } = this.props;
     const { checked = false, indeterminate = false, focused } = this.state;
     const { disabled } = inputProps;
     const disabledClass = disabled ? styles.disabled : '';
@@ -88,19 +88,19 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       checkMarkStyles += ` ${styles.focused}`;
     }
     return (
-      <label id={this.checkboxId} className={`${styles.label} ${disabledClass} ${className}`} data-checked={checked}>
+      <div className={`${styles.label} ${disabledClass} ${className}`} data-checked={checked} role="presentation">
         <span className={`${styles.checkMark} ${checkMarkStyles}`} />
         <input
-          aria-label={label}
-          type="checkbox"
-          {...inputProps}
           className={styles.checkbox}
+          id={id || this.checkboxId}
           ref={this.checkboxRef}
           readOnly={true}
+          type="checkbox"
+          {...inputProps}
         />
-        {label}
+        <label htmlFor={id || this.checkboxId}>{label}</label>
         {this.props.children}
-      </label>
+      </div>
     );
   }