feat(switch): add aria-labelledby to input

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
patternfly · Jul 25, 2019 · ef43b17 · ef43b17
1 parent 9363e37
commit ef43b17
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Switch/Switch.tsx b/packages/patternfly-4/react-core/src/components/Switch/Switch.tsx
@@ -47,6 +47,7 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
 
   render() {
     const { className, label, isChecked, isDisabled, onChange, ouiaContext, ouiaId, ...props } = this.props;
+    const isAriaLabelledBy = props['aria-label'] === '';
     return (
       <label
         className={css(styles.switch, className)}
@@ -64,11 +65,16 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
           onChange={event => onChange(event.currentTarget.checked, event)}
           checked={isChecked}
           disabled={isDisabled}
+          aria-labelledby={isAriaLabelledBy ? this.id : null}
         />
         {label !== '' ? (
           <React.Fragment>
-            <span className={css(styles.switchToggle)} />
-            <span className={css(styles.switchLabel, styles.modifiers.on)} aria-hidden="true">
+            <span className={css(styles.switchToggle)} id={isAriaLabelledBy ? `${this.id}-on` : null} />
+            <span
+              className={css(styles.switchLabel, styles.modifiers.on)}
+              id={isAriaLabelledBy ? `${this.id}-off` : null}
+              aria-hidden="true"
+            >
               {label}
             </span>
             <span className={css(styles.switchLabel, styles.modifiers.off)} aria-hidden="true">
@@ -89,4 +95,4 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
 
 const SwitchWithOuiaContext = withOuiaContext(Switch);
 
-export { SwitchWithOuiaContext as Switch };
+export { SwitchWithOuiaContext as Switch }; 
diff --git a/packages/patternfly-4/react-core/src/components/Switch/__snapshots__/Switch.test.js.snap b/packages/patternfly-4/react-core/src/components/Switch/__snapshots__/Switch.test.js.snap
@@ -36,6 +36,7 @@ exports[`no label switch is checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="no-label-switch-is-checked"
           checked={true}
           className="pf-c-switch__input"
           disabled={false}
@@ -116,6 +117,7 @@ exports[`no label switch is not checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="no-label-switch-is-not-checked"
           checked={false}
           className="pf-c-switch__input"
           disabled={false}
@@ -198,6 +200,7 @@ exports[`switch is checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-checked"
           checked={true}
           className="pf-c-switch__input"
           disabled={false}
@@ -207,10 +210,12 @@ exports[`switch is checked 1`] = `
         />
         <span
           className="pf-c-switch__toggle"
+          id="switch-is-checked-on"
         />
         <span
           aria-hidden="true"
           className="pf-c-switch__label pf-m-on"
+          id="switch-is-checked-off"
         >
           On
         </span>
@@ -264,6 +269,7 @@ exports[`switch is checked and disabled 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-checked-and-disabled"
           checked={true}
           className="pf-c-switch__input"
           disabled={true}
@@ -346,6 +352,7 @@ exports[`switch is not checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-not-checked"
           checked={false}
           className="pf-c-switch__input"
           disabled={false}
@@ -355,10 +362,12 @@ exports[`switch is not checked 1`] = `
         />
         <span
           className="pf-c-switch__toggle"
+          id="switch-is-not-checked-on"
         />
         <span
           aria-hidden="true"
           className="pf-c-switch__label pf-m-on"
+          id="switch-is-not-checked-off"
         >
           Off
         </span>
@@ -412,6 +421,7 @@ exports[`switch is not checked and disabled 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-not-checked-and-disabled"
           checked={false}
           className="pf-c-switch__input"
           disabled={true}