Added aria-label to checkboxes to prevent doubling of text

* #1823 Add aria-label to checkboxes to prevent doubling of text * Update CHANGELOG.md
microsoft · Sep 13, 2019 · 2743410 · 2743410
1 parent b979700
commit 2743410
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1861](https://github.com/microsoft/BotFramework-Emulator/pull/1861)
   - [1862](https://github.com/microsoft/BotFramework-Emulator/pull/1862)
   - [1864](https://github.com/microsoft/BotFramework-Emulator/pull/1864)
+  - [1865](https://github.com/microsoft/BotFramework-Emulator/pull/1865)
   - [1867](https://github.com/microsoft/BotFramework-Emulator/pull/1867)
 
  - [client] Fixed an issue with the transcripts path input inside of the resource settings dialog in PR [1836](https://github.com/microsoft/BotFramework-Emulator/pull/1836)

diff --git a/packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx b/packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx
@@ -90,7 +90,14 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     return (
       <label id={this.checkboxId} className={`${styles.label} ${disabledClass} ${className}`} data-checked={checked}>
         <span className={`${styles.checkMark} ${checkMarkStyles}`} />
-        <input type="checkbox" {...inputProps} className={styles.checkbox} ref={this.checkboxRef} readOnly={true} />
+        <input
+          aria-label={label}
+          type="checkbox"
+          {...inputProps}
+          className={styles.checkbox}
+          ref={this.checkboxRef}
+          readOnly={true}
+        />
         {label}
         {this.props.children}
       </label>