Reintroduce EuiSwitch a11y changes (#2491)

* Convert `EuiSwitch` to TS (#2243) * convert euiswitch to ts * remove test file * euiswitchevent; store id in state * change interface to type * CL * type for button * showLabel=false example * fix misc docs proptype warnings * reintroduce compressed and mini styles * another example * CL * cleanup * use p with aria-describedby * add click hanlder to p-label
elastic · Oct 29, 2019 · cbf9c4f · cbf9c4f
1 parent d9508fd
commit cbf9c4f
Show file tree

Hide file tree

Showing 20 changed files with 339 additions and 301 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,9 @@
 - Added new `euiTreeView` component for rendering recursive objects such as folder structures. ([#2409](https://github.com/elastic/eui/pull/2409))
 - Added `euiXScrollWithShadows()` mixin and `.eui-xScrollWithShadows` utility class ([#2458](https://github.com/elastic/eui/pull/2458))
 - Fixed `EuiColorStops` where empty string values would cause range min or max to be NaN ([#2496](https://github.com/elastic/eui/pull/2496))
+- Improved `EuiSwitch` a11y by aligning to aria roles ([#2491](https://github.com/elastic/eui/pull/2491))
+- Converted `EuiSwitch` to TypeScript ([#2491](https://github.com/elastic/eui/pull/2491))
+- Added an accessible label-less `EuiSwitch` variation ([#2491](https://github.com/elastic/eui/pull/2491))
 
 **Bug fixes**
 
@@ -11,6 +14,7 @@
 - Fixed position of `EuiCodeBlock` controls and added more tests ([#2459](https://github.com/elastic/eui/pull/2459))
 - Changed `EuiCodeBlock` so that `overflowHeight` now applies a `maxHeight` instead of a `height` on the block ([#2487](https://github.com/elastic/eui/pull/2487))
 - Fixed potentially inconsistent state update ([#2481](https://github.com/elastic/eui/pull/2481))
+- Fixed `EuiSwitch` form behavior by adding a default button `type` of 'button' ([#2491](https://github.com/elastic/eui/pull/2491))
 
 ## [`14.8.0`](https://github.com/elastic/eui/tree/v14.8.0)
 

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -79,13 +79,17 @@ export default class extends Component {
                           name="switch"
                           id="asdf"
                           label="Snapshot data"
+                          checked={true}
+                          onChange={() => {}}
                         />
                       </EuiFormRow>
                       <EuiFormRow label="Include the following in the embed">
                         <EuiSwitch
                           name="switch"
                           id="asdf2"
                           label="Current time range"
+                          checked={true}
+                          onChange={() => {}}
                         />
                       </EuiFormRow>
                       <EuiSpacer />

diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js
@@ -22,7 +22,7 @@ function MyCustomQuickSelectPanel({ applyTime }) {
 export default class extends Component {
   state = {
     recentlyUsedRanges: [],
-    isDiasabled: false,
+    isDisabled: false,
     isLoading: false,
     showUpdateButton: true,
     isAutoRefreshOnly: false,

diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -91,6 +91,8 @@ export default class extends Component {
 
         <EuiFormRow display="columnCompressedSwitch" label="Swtich">
           <EuiSwitch
+            showLabel={false}
+            label="Switch"
             name="switch"
             checked={this.state.isSwitchChecked}
             onChange={this.onSwitchChange}

diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js
@@ -37,6 +37,15 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiSwitch
+          showLabel={false}
+          label="I am a switch without a visible label"
+          checked={this.state.checked}
+          onChange={this.onChange}
+        />
+
+        <EuiSpacer size="m" />
+
         <EuiSwitch
           label="I am a compressed switch"
           checked={this.state.checked}
@@ -53,6 +62,16 @@ export default class extends Component {
           compressed
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiSwitch
+          showLabel={false}
+          label="I am a compressed switch without a visible label"
+          checked={this.state.checked}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }

diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
@@ -48,11 +48,21 @@ export default class extends Component {
         closePopover={this.closePopover.bind(this)}
         initialFocus="[id=asdf2]">
         <EuiFormRow label="Generate a public snapshot?" id="asdf">
-          <EuiSwitch name="switch" label="Snapshot data" />
+          <EuiSwitch
+            name="switch"
+            label="Snapshot data"
+            checked={true}
+            onChange={() => {}}
+          />
         </EuiFormRow>
 
         <EuiFormRow label="Include the following in the embed" id="asdf2">
-          <EuiSwitch name="switch" label="Current time range" />
+          <EuiSwitch
+            name="switch"
+            label="Current time range"
+            checked={true}
+            onChange={() => {}}
+          />
         </EuiFormRow>
 
         <EuiSpacer />

diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js
@@ -154,6 +154,7 @@ export class Table extends Component {
     return (
       <div>
         <EuiSwitch
+          checked={this.state.showPerPageOptions}
           label={
             <span>
               Hide per page options with{' '}

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
@@ -311,9 +311,9 @@ function setColumnVisibility(
   const portal = popover.find('EuiPortal');
 
   const columnSwitch = portal.find(`EuiSwitch[name="${columnId}"]`);
-  const switchInput = columnSwitch.find('input');
-  (switchInput.getDOMNode() as HTMLInputElement).checked = isVisible;
-  switchInput.simulate('change');
+  const switchInput = columnSwitch.find('button');
+  switchInput.getDOMNode().setAttribute('aria-checked', `${isVisible}`);
+  switchInput.simulate('click');
 
   // close popover
   popover = datagrid.find(

diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -35,3 +35,4 @@ $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 65%, 40%) !default;
 $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 8%) !default;
+$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
@@ -8,7 +8,6 @@ import { CommonProps } from '../common';
 /// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
-/// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />
 
 import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react';

diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.js.snap
diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
+<div
+  class="euiSwitch"
+>
+  <button
+    aria-checked="false"
+    aria-describedby="generated-id"
+    class="euiSwitch__button"
+    id="generated-id"
+    role="switch"
+    type="button"
+  >
+    <span
+      class="euiSwitch__body"
+    >
+      <span
+        class="euiSwitch__thumb"
+      />
+      <span
+        class="euiSwitch__track"
+      >
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+    </span>
+  </button>
+  <p
+    class="euiSwitch__label"
+    id="generated-id"
+  >
+    Label
+  </p>
+</div>
+`;
+
+exports[`EuiSwitch is rendered 1`] = `
+<div
+  class="euiSwitch testClass1 testClass2"
+>
+  <button
+    aria-checked="false"
+    aria-describedby="generated-id"
+    aria-label="aria-label"
+    class="euiSwitch__button"
+    data-test-subj="test subject string"
+    id="test"
+    role="switch"
+    type="button"
+  >
+    <span
+      class="euiSwitch__body"
+    >
+      <span
+        class="euiSwitch__thumb"
+      />
+      <span
+        class="euiSwitch__track"
+      >
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+    </span>
+  </button>
+  <p
+    class="euiSwitch__label"
+    id="generated-id"
+  >
+    Label
+  </p>
+</div>
+`;