feat(switch): add aria-labelledby to input

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
patternfly · Jul 30, 2019 · 009b968 · 009b968
1 parent 35e1b4c
commit 009b968
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 20 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Switch/Switch.md b/packages/patternfly-4/react-core/src/components/Switch/Switch.md
@@ -28,10 +28,10 @@ class SimpleSwitch extends React.Component {
     return (
       <Switch
         id="simple-switch"
-        label={isChecked ? 'Message when on' : 'Message when off'}
+        label="Message when on"
+        labelOff="Message when off"
         isChecked={isChecked}
         onChange={this.handleChange}
-        aria-label="Message when on"
       />
     );
   }
@@ -70,12 +70,13 @@ import { Switch } from '@patternfly/react-core';
 
 DisabledSwitch = () => (
   <React.Fragment>
-    <Switch id="disabled-switch-on" aria-label="Message when on" label="Message when on" isChecked isDisabled />
+    <Switch id="disabled-switch-on" aria-label="Message when on" label="Message when on" labelOff="Message when off" isChecked isDisabled />
     <br />
     <Switch
       id="disabled-switch-off"
       aria-label="Message when on"
-      label="Message when off"
+      label="Message when on"
+      labelOff="Message when off"
       isChecked={false}
       isDisabled
     />
@@ -94,9 +95,9 @@ import { Switch } from '@patternfly/react-core';
 
 UncontrolledSwitch = () => (
   <React.Fragment>
-    <Switch id="uncontrolled-switch-on" aria-label="Message when on" label="Message when on" isChecked />
+    <Switch id="uncontrolled-switch-on" aria-label="Message when on" label="Message when on" labelOff="Message when off" isChecked />
     <br />
-    <Switch id="uncontrolled-switch-off" aria-label="Message when on" label="Message when off" isChecked={false} />
+    <Switch id="uncontrolled-switch-off" aria-label="Message when on" label="Message when on" labelOff="Message when off" isChecked={false} />
     <br />
     <Switch id="uncontrolled-no-label-switch-on" aria-label="Message when on" isChecked />
     <br />

diff --git a/packages/patternfly-4/react-core/src/components/Switch/Switch.test.js b/packages/patternfly-4/react-core/src/components/Switch/Switch.test.js
@@ -19,12 +19,12 @@ test('switch label id is auto generated', () => {
 });
 
 test('switch is checked', () => {
-  const view = mount(<Switch id="switch-is-checked" label="On" isChecked />);
+  const view = mount(<Switch id="switch-is-checked" label="On" labelOff="Off" isChecked />);
   expect(view).toMatchSnapshot();
 });
 
 test('switch is not checked', () => {
-  const view = mount(<Switch id="switch-is-not-checked" label="Off" isChecked={false} />);
+  const view = mount(<Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} />);
   expect(view).toMatchSnapshot();
 });
 

diff --git a/packages/patternfly-4/react-core/src/components/Switch/Switch.tsx b/packages/patternfly-4/react-core/src/components/Switch/Switch.tsx
@@ -11,8 +11,10 @@ export interface SwitchProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ty
   id?: string,
   /** Additional classes added to the Switch */
   className?: string,
-  /** Text value for the label */
+  /** Text value for the label when on */
   label?: string,
+  /** Text value for the label when off */
+  labelOff?: string,
   /** Flag to show if the Switch is checked. */
   isChecked?: boolean,
   /** Flag to show if the Switch is disabled. */
@@ -30,6 +32,7 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
     id: '',
     className: '',
     label: '',
+    labelOff: '',
     isChecked: true,
     isDisabled: false,
     'aria-label': '',
@@ -46,7 +49,8 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
   }
 
   render() {
-    const { className, label, isChecked, isDisabled, onChange, ouiaContext, ouiaId, ...props } = this.props;
+    const { className, label, labelOff, isChecked, isDisabled, onChange, ouiaContext, ouiaId, ...props } = this.props;
+    const isAriaLabelledBy = props['aria-label'] === '';
     return (
       <label
         className={css(styles.switch, className)}
@@ -64,15 +68,24 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
           onChange={event => onChange(event.currentTarget.checked, event)}
           checked={isChecked}
           disabled={isDisabled}
+          aria-labelledby={isAriaLabelledBy ? `${this.id}-on`: null}
         />
-        {label !== '' ? (
+        {label !== '' || labelOff !== '' ? (
           <React.Fragment>
             <span className={css(styles.switchToggle)} />
-            <span className={css(styles.switchLabel, styles.modifiers.on)} aria-hidden="true">
+            <span
+              className={css(styles.switchLabel, styles.modifiers.on)}
+              id={isAriaLabelledBy ? `${this.id}-on` : null}
+              aria-hidden="true"
+            >
               {label}
             </span>
-            <span className={css(styles.switchLabel, styles.modifiers.off)} aria-hidden="true">
-              {label}
+            <span
+              className={css(styles.switchLabel, styles.modifiers.off)}
+              id={isAriaLabelledBy ? `${this.id}-off` : null}
+              aria-hidden="true"
+            >
+              {labelOff}
             </span>
           </React.Fragment>
         ) : (
@@ -89,4 +102,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
@@ -22,6 +22,7 @@ exports[`no label switch is checked 1`] = `
       isChecked={true}
       isDisabled={false}
       label=""
+      labelOff=""
       onChange={[Function]}
       ouiaContext={
         Object {
@@ -36,6 +37,7 @@ exports[`no label switch is checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="no-label-switch-is-checked-on"
           checked={true}
           className="pf-c-switch__input"
           disabled={false}
@@ -102,6 +104,7 @@ exports[`no label switch is not checked 1`] = `
       isChecked={false}
       isDisabled={false}
       label=""
+      labelOff=""
       onChange={[Function]}
       ouiaContext={
         Object {
@@ -116,6 +119,7 @@ exports[`no label switch is not checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="no-label-switch-is-not-checked-on"
           checked={false}
           className="pf-c-switch__input"
           disabled={false}
@@ -165,6 +169,7 @@ exports[`switch is checked 1`] = `
   id="switch-is-checked"
   isChecked={true}
   label="On"
+  labelOff="Off"
 >
   <ComponentWithOuia
     component={[Function]}
@@ -173,6 +178,7 @@ exports[`switch is checked 1`] = `
         "id": "switch-is-checked",
         "isChecked": true,
         "label": "On",
+        "labelOff": "Off",
       }
     }
     consumerContext={null}
@@ -184,6 +190,7 @@ exports[`switch is checked 1`] = `
       isChecked={true}
       isDisabled={false}
       label="On"
+      labelOff="Off"
       onChange={[Function]}
       ouiaContext={
         Object {
@@ -198,6 +205,7 @@ exports[`switch is checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-checked-on"
           checked={true}
           className="pf-c-switch__input"
           disabled={false}
@@ -211,14 +219,16 @@ exports[`switch is checked 1`] = `
         <span
           aria-hidden="true"
           className="pf-c-switch__label pf-m-on"
+          id="switch-is-checked-on"
         >
           On
         </span>
         <span
           aria-hidden="true"
           className="pf-c-switch__label pf-m-off"
+          id="switch-is-checked-off"
         >
-          On
+          Off
         </span>
       </label>
     </Switch>
@@ -250,6 +260,7 @@ exports[`switch is checked and disabled 1`] = `
       isChecked={true}
       isDisabled={true}
       label=""
+      labelOff=""
       onChange={[Function]}
       ouiaContext={
         Object {
@@ -264,6 +275,7 @@ exports[`switch is checked and disabled 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-checked-and-disabled-on"
           checked={true}
           className="pf-c-switch__input"
           disabled={true}
@@ -312,15 +324,17 @@ exports[`switch is not checked 1`] = `
 <Component
   id="switch-is-not-checked"
   isChecked={false}
-  label="Off"
+  label="On"
+  labelOff="Off"
 >
   <ComponentWithOuia
     component={[Function]}
     componentProps={
       Object {
         "id": "switch-is-not-checked",
         "isChecked": false,
-        "label": "Off",
+        "label": "On",
+        "labelOff": "Off",
       }
     }
     consumerContext={null}
@@ -331,7 +345,8 @@ exports[`switch is not checked 1`] = `
       id="switch-is-not-checked"
       isChecked={false}
       isDisabled={false}
-      label="Off"
+      label="On"
+      labelOff="Off"
       onChange={[Function]}
       ouiaContext={
         Object {
@@ -346,6 +361,7 @@ exports[`switch is not checked 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-not-checked-on"
           checked={false}
           className="pf-c-switch__input"
           disabled={false}
@@ -359,12 +375,14 @@ exports[`switch is not checked 1`] = `
         <span
           aria-hidden="true"
           className="pf-c-switch__label pf-m-on"
+          id="switch-is-not-checked-on"
         >
-          Off
+          On
         </span>
         <span
           aria-hidden="true"
           className="pf-c-switch__label pf-m-off"
+          id="switch-is-not-checked-off"
         >
           Off
         </span>
@@ -398,6 +416,7 @@ exports[`switch is not checked and disabled 1`] = `
       isChecked={false}
       isDisabled={true}
       label=""
+      labelOff=""
       onChange={[Function]}
       ouiaContext={
         Object {
@@ -412,6 +431,7 @@ exports[`switch is not checked and disabled 1`] = `
       >
         <input
           aria-label=""
+          aria-labelledby="switch-is-not-checked-and-disabled-on"
           checked={false}
           className="pf-c-switch__input"
           disabled={true}