Merge pull request #27 from misteinb/bugfix/toggle-needs-switch-role

Bugfix/toggle needs switch role

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v3.0.4
+### Fixed
+- toggle controls need switch role for screen readers
+- prevent default and stop propagation for tooltip keyboard shortcut in form field
+
 ## v3.0.3
 ### Fixed
 - screen reader support for calendar

lib/components/Field/FormField.tsx

@@ -93,11 +93,14 @@ export class FormField extends React.PureComponent<FormFieldProps, FormFieldStat
                 tooltipVisible: true
             });
             e.preventDefault();
+            e.stopPropagation();
         // if the user pressed escape key, close the tooltip
         } else if (e.keyCode === keyCodes.Escape) {
             this.setState({
                 tooltipVisible: false
             });
+            e.preventDefault();
+            e.stopPropagation();
         }
     }
 

lib/components/Toggle/Toggle.tsx

@@ -36,7 +36,7 @@ export interface ToggleProps extends React.Props<ToggleType> {
 
 /**
  * Toggle button that is an on or off state
- * 
+ *
  * @param props Control properties (defined in `ToggleProps` interface)
  */
 export const Toggle: React.StatelessComponent<ToggleProps> = (props: ToggleProps) => {
@@ -64,6 +64,10 @@ export const Toggle: React.StatelessComponent<ToggleProps> = (props: ToggleProps
                 name={props.name}
                 autoFocus={props.autoFocus}
                 methodRef={props.autoFocus && autoFocusRef}
+                // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role
+                // the switch role represents the states "on" and "off."
+                role='switch'
+                aria-checked={props.on}
                 attr={props.attr.button}
             />
             <Attr.div className={css('toggle-switch')} attr={props.attr.switch}/>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@azure-iot/ux-fluent-controls",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",