Fix bug which prevented EuiSwitch with generated ID from having its l…

…abel read by VoiceOver (#1519)
elastic · Feb 4, 2019 · a88892f · a88892f
1 parent 29fa728
commit a88892f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 
 - Updated `EuiPage` background color to match body background color ([#1513](https://github.com/elastic/eui/pull/1513))
 - Fixed React key usage in `EuiPagination` ([#1514](https://github.com/elastic/eui/pull/1514))
+- Fixed bug which prevented `EuiSwitch` with generated ID from having its label announced by VoiceOver ([#1519](https://github.com/elastic/eui/pull/1519))
 
 ## [`6.8.0`](https://github.com/elastic/eui/tree/v6.8.0)
 

diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.js.snap
@@ -1,5 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
+<div
+  class="euiSwitch"
+>
+  <input
+    class="euiSwitch__input"
+    id="generated-id"
+    type="checkbox"
+  />
+  <span
+    class="euiSwitch__body"
+  >
+    <span
+      class="euiSwitch__thumb"
+    />
+    <span
+      class="euiSwitch__track"
+    >
+      <svg
+        class="euiIcon euiIcon--medium euiSwitch__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+        />
+      </svg>
+      <svg
+        class="euiIcon euiIcon--medium euiSwitch__icon euiSwitch__icon--checked"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
 exports[`EuiSwitch is rendered 1`] = `
 <div
   class="euiSwitch testClass1 testClass2"

diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
@@ -20,7 +20,7 @@ export class EuiSwitch extends Component {
   render() {
     const {
       label,
-      id,
+      id, // eslint-disable-line no-unused-vars
       name,
       checked,
       disabled,
@@ -73,7 +73,7 @@ export class EuiSwitch extends Component {
         { label &&
           <label
             className="euiSwitch__label"
-            htmlFor={id}
+            htmlFor={switchId}
           >
             {label}
           </label>

diff --git a/src/components/form/switch/switch.test.js b/src/components/form/switch/switch.test.js
@@ -4,6 +4,8 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiSwitch } from './switch';
 
+jest.mock(`../form_row/make_id`, () => () => `generated-id`);
+
 describe('EuiSwitch', () => {
   test('is rendered', () => {
     const component = render(
@@ -13,4 +15,13 @@ describe('EuiSwitch', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('assigns automatically generated ID to label', () => {
+    const component = render(
+      <EuiSwitch />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });