Make switch use a random id if none is provided (#779)

Switch will now generate an id if none is provided so that accessibility works properly.
elastic · Jul 19, 2018 · e91d433 · e91d433
1 parent 6fec751
commit e91d433
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@
 
 - Fixed `EuiContextMenuPanel` calling `ref` after being unmounted ([#1038](https://github.com/elastic/eui/pull/1038))
 
+**Bug Fixes**
+
+- To make it more accessible, added a random id to `EuiSwitch`'s id prop if none is passed.  ([#779](https://github.com/elastic/eui/pull/779))
+
+
 ## [`3.1.0`](https://github.com/elastic/eui/tree/v3.1.0)
 
 - Added `EuiMutationObserver` to expose Mutation Observer API to React components ([#966](https://github.com/elastic/eui/pull/966))

diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js
@@ -8,8 +8,6 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
-
 export default class extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +27,6 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiSwitch
-          id={makeId()}
           label="I am a switch"
           checked={this.state.checked}
           onChange={this.onChange}
@@ -38,7 +35,6 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSwitch
-          id={makeId()}
           label="I am a disabled switch"
           checked={this.state.checked}
           onChange={this.onChange}

diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
@@ -1,70 +1,87 @@
-import React from 'react';
+import React, {
+  Component,
+} from 'react';
+
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import makeId from '../../form/form_row/make_id';
 import { EuiIcon } from '../../icon';
 
-export const EuiSwitch = ({
-  label,
-  id,
-  name,
-  checked,
-  disabled,
-  compressed,
-  onChange,
-  className,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiSwitch',
-    {
-      'euiSwitch--compressed': compressed,
-    },
-    className
-  );
+export class EuiSwitch extends Component {
+  constructor(props) {
+    super(props);
 
-  return (
-    <div className={classes}>
-      <input
-        className="euiSwitch__input"
-        name={name}
-        id={id}
-        type="checkbox"
-        checked={checked}
-        disabled={disabled}
-        onChange={onChange}
-        {...rest}
-      />
+    this.state = {
+      id: props.id || makeId(),
+    };
+  }
 
-      <span className="euiSwitch__body">
-        <span className="euiSwitch__thumb" />
-        <span className="euiSwitch__track">
-          <EuiIcon
-            type="cross"
-            size="m"
-            className="euiSwitch__icon"
-          />
+  render() {
+    const {
+      label,
+      id,
+      name,
+      checked,
+      disabled,
+      compressed,
+      onChange,
+      className,
+      ...rest
+    } = this.props;
 
-          <EuiIcon
-            type="check"
-            size="m"
-            className="euiSwitch__icon euiSwitch__icon--checked"
-          />
-        </span>
-      </span>
+    const { switchId } = this.state;
 
-      { label &&
-        <label
-          className="euiSwitch__label"
-          htmlFor={id}
-        >
-          {label}
-        </label>
-      }
+    const classes = classNames(
+      'euiSwitch',
+      {
+        'euiSwitch--compressed': compressed,
+      },
+      className
+    );
 
-    </div>
-  );
-};
+    return (
+      <div className={classes}>
+        <input
+          className="euiSwitch__input"
+          name={name}
+          id={switchId}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={onChange}
+          {...rest}
+        />
+
+        <span className="euiSwitch__body">
+          <span className="euiSwitch__thumb" />
+          <span className="euiSwitch__track">
+            <EuiIcon
+              type="cross"
+              size="m"
+              className="euiSwitch__icon"
+            />
+
+            <EuiIcon
+              type="check"
+              size="m"
+              className="euiSwitch__icon euiSwitch__icon--checked"
+            />
+          </span>
+        </span>
+
+        { label &&
+          <label
+            className="euiSwitch__label"
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        }
+      </div>
+    );
+  }
+}
 
 EuiSwitch.propTypes = {
   name: PropTypes.string,

diff --git a/src/components/form/switch/switch.test.js b/src/components/form/switch/switch.test.js
@@ -7,7 +7,7 @@ import { EuiSwitch } from './switch';
 describe('EuiSwitch', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiSwitch {...requiredProps} />
+      <EuiSwitch id="test" {...requiredProps} />
     );
 
     expect(component)