Add radio/checkbox group accessibility (#2739)

* Fix radio label to be inline * Moved form label font styles to a mixin * Added ability to supply a legend (and fieldset) to EuiRadioGroup * Using the new EuiFieldset for EuiRadioGroup * Checkbox label as inline-block * Using EuiFieldset in Checkbox group * Change more examples to use `legend` prop
elastic · Jan 8, 2020 · accdb66 · accdb66
1 parent 90c1760
commit accdb66
Show file tree

Hide file tree

Showing 16 changed files with 330 additions and 173 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@
 - Converted `EuiDualRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
 - Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
 - Added `bellSlash` glyph to `EuiIcon` ([#2714](https://github.com/elastic/eui/pull/2714))
+- Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739))
+
+**Bug fixes**
+
+- Changed `EuiRadio` and `EuiCheckbox` labels to be `inline-block` ([#2739](https://github.com/elastic/eui/pull/2739))
+- Fixed `EuiCheckboxGroup`'s `options` type to fully extend the `EuiCheckbox` type ([#2739](https://github.com/elastic/eui/pull/2739))
 
 ## [`18.0.0`](https://github.com/elastic/eui/tree/v18.0.0)
 

diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.js
@@ -5,6 +5,7 @@ import {
   EuiSpacer,
   EuiRadioGroup,
   EuiTitle,
+  EuiFormFieldset,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -37,15 +38,14 @@ export default class extends Component {
 
     return (
       <Fragment>
-        <fieldset>
-          <legend>
-            <EuiTitle size="xs">
-              <span>Checkable card radio group with legend</span>
-            </EuiTitle>
-          </legend>
-
-          <EuiSpacer size="m" />
-
+        <EuiFormFieldset
+          legend={{
+            children: (
+              <EuiTitle size="xs">
+                <span>Checkable card radio group with legend</span>
+              </EuiTitle>
+            ),
+          }}>
           <EuiCheckableCard
             id={makeId()}
             label="Option one"
@@ -83,7 +83,7 @@ export default class extends Component {
             onChange={() => this.setState({ radio: 'radio3' })}
             disabled
           />
-        </fieldset>
+        </EuiFormFieldset>
 
         <EuiSpacer size="xl" />
 

diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
@@ -10,6 +10,7 @@ import {
   EuiSelect,
   EuiSwitch,
   EuiPanel,
+  EuiSpacer,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -135,14 +136,17 @@ export default class extends Component {
           />
         </EuiFormRow>
 
-        <EuiFormRow label="Checkboxes" display="rowCompressed">
-          <EuiCheckboxGroup
-            options={this.state.checkboxes}
-            idToSelectedMap={this.state.checkboxIdToSelectedMap}
-            onChange={this.onCheckboxChange}
-            compressed
-          />
-        </EuiFormRow>
+        <EuiSpacer size="m" />
+
+        <EuiCheckboxGroup
+          options={this.state.checkboxes}
+          idToSelectedMap={this.state.checkboxIdToSelectedMap}
+          onChange={this.onCheckboxChange}
+          legend={{
+            children: 'Checkboxes',
+          }}
+          compressed
+        />
       </EuiPanel>
     );
   }

diff --git a/src-docs/src/views/form_controls/checkbox_group.js b/src-docs/src/views/form_controls/checkbox_group.js
@@ -1,10 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
-import {
-  EuiCheckboxGroup,
-  EuiSpacer,
-  EuiTitle,
-} from '../../../../src/components';
+import { EuiCheckboxGroup } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
 
@@ -18,39 +15,23 @@ export default class extends Component {
       {
         id: `${idPrefix}0`,
         label: 'Option one',
+        'data-test-sub': 'dts_test',
       },
       {
         id: `${idPrefix}1`,
         label: 'Option two is checked by default',
+        className: 'classNameTest',
       },
       {
         id: `${idPrefix}2`,
-        label: 'Option three',
+        label: 'Option three is disabled',
+        disabled: true,
       },
     ];
 
-    this.checkboxesDisabled = this.checkboxes.map(checkbox => {
-      return { ...checkbox, id: `${checkbox.id}_disabled` };
-    });
-
-    this.checkboxesIndividuallyDisabled = this.checkboxes.map(checkbox => {
-      const isIndividuallyDisabled =
-        checkbox.id.charAt(checkbox.id.length - 1) === '1';
-      return {
-        ...checkbox,
-        id: `${checkbox.id}_individually_disabled`,
-        label: isIndividuallyDisabled
-          ? 'Option two is individually disabled'
-          : checkbox.label,
-        disabled: isIndividuallyDisabled,
-      };
-    });
-
     this.state = {
       checkboxIdToSelectedMap: {
         [`${idPrefix}1`]: true,
-        [`${idPrefix}1_disabled`]: true,
-        [`${idPrefix}1_individually_disabled`]: true,
       },
     };
   }
@@ -70,42 +51,18 @@ export default class extends Component {
 
   render() {
     return (
-      <Fragment>
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles
+        canLoading={false}
+        canReadOnly={false}
+        canInvalid={false}
+        canFullWidth={false}>
         <EuiCheckboxGroup
           options={this.checkboxes}
           idToSelectedMap={this.state.checkboxIdToSelectedMap}
           onChange={this.onChange}
         />
-
-        <EuiSpacer size="m" />
-
-        <EuiTitle size="xxs">
-          <h3>Disabled</h3>
-        </EuiTitle>
-
-        <EuiSpacer size="s" />
-
-        <EuiCheckboxGroup
-          options={this.checkboxesDisabled}
-          idToSelectedMap={this.state.checkboxIdToSelectedMap}
-          onChange={this.onChange}
-          disabled
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiTitle size="xxs">
-          <h3>Individually disabled checkbox</h3>
-        </EuiTitle>
-
-        <EuiSpacer size="s" />
-
-        <EuiCheckboxGroup
-          options={this.checkboxesIndividuallyDisabled}
-          idToSelectedMap={this.state.checkboxIdToSelectedMap}
-          onChange={this.onChange}
-        />
-      </Fragment>
+      </DisplayToggles>
     );
   }
 }
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
@@ -274,6 +274,20 @@ export const FormControlsExample = {
         EuiCheckboxGroup,
       },
       demo: <CheckboxGroup />,
+      snippet: `<EuiCheckboxGroup
+  options={[
+    {
+      id: id1,
+      label: 'Option one',
+    },
+    {
+      id: id2,
+      label: 'Option two',
+    }
+  ]}
+  idToSelectedMap={{ id1: true }}
+  onChange={(id) => {}}
+/>`,
     },
     {
       title: 'Radio',
@@ -308,6 +322,24 @@ export const FormControlsExample = {
         EuiRadioGroup,
       },
       demo: <RadioGroup />,
+      snippet: `<EuiRadioGroup
+  options={[
+    {
+      id: id1,
+      label: 'Option one',
+    },
+    {
+      id: id2,
+      label: 'Option two',
+    }
+  ]}
+  idSelected={id1}
+  onChange={(id) => {}}
+  name={groupName}
+  legend={{
+    children: 'A legend',
+  }}
+/>`,
     },
     {
       title: 'Switch',
@@ -360,7 +392,7 @@ export const FormControlsExample = {
           />
           <EuiSpacer />
           <p>
-            <EuiCode>EuiFieldset</EuiCode> simply wraps its children in a{' '}
+            <EuiCode>EuiFormFieldset</EuiCode> simply wraps its children in a{' '}
             <EuiCode>&lt;fieldset&gt;</EuiCode> with the option to add a{' '}
             <EuiCode>&lt;legend&gt;</EuiCode> via the <EuiCode>legend</EuiCode>{' '}
             object prop.

diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js
@@ -1,8 +1,9 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
-import { EuiRadioGroup, EuiSpacer, EuiTitle } from '../../../../src/components';
+import { EuiRadioGroup } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
+import { DisplayToggles } from './display_toggles';
 
 export default class extends Component {
   constructor(props) {
@@ -21,7 +22,7 @@ export default class extends Component {
       },
       {
         id: `${idPrefix}2`,
-        label: 'Option three',
+        label: 'Option three is disabled',
         disabled: true,
       },
     ];
@@ -39,29 +40,22 @@ export default class extends Component {
 
   render() {
     return (
-      <Fragment>
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles
+        canLoading={false}
+        canReadOnly={false}
+        canInvalid={false}
+        canFullWidth={false}>
         <EuiRadioGroup
           options={this.radios}
           idSelected={this.state.radioIdSelected}
           onChange={this.onChange}
           name="radio group"
+          legend={{
+            children: <span>This is a legend for a radio group</span>,
+          }}
         />
-
-        <EuiSpacer size="m" />
-
-        <EuiTitle size="xxs">
-          <h3>Disabled</h3>
-        </EuiTitle>
-
-        <EuiSpacer size="s" />
-
-        <EuiRadioGroup
-          options={this.radios}
-          idSelected={this.state.radioIdSelected}
-          onChange={this.onChange}
-          disabled
-        />
-      </Fragment>
+      </DisplayToggles>
     );
   }
 }
diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js
@@ -128,15 +128,17 @@ export default class extends Component {
           />
         </EuiFormRow>
 
-        <EuiFormRow
-          label="Checkbox group labels should use a `legend` label type"
-          labelType="legend">
-          <EuiCheckboxGroup
-            options={this.state.checkboxes}
-            idToSelectedMap={this.state.checkboxIdToSelectedMap}
-            onChange={this.onCheckboxChange}
-          />
-        </EuiFormRow>
+        <EuiSpacer />
+
+        <EuiCheckboxGroup
+          options={this.state.checkboxes}
+          idToSelectedMap={this.state.checkboxIdToSelectedMap}
+          onChange={this.onCheckboxChange}
+          legend={{
+            children:
+              'Checkbox groups should use the `legend` prop instead of form row',
+          }}
+        />
 
         <EuiSpacer />
 

diff --git a/src-docs/src/views/range/states.js b/src-docs/src/views/range/states.js
@@ -60,7 +60,7 @@ export default class extends Component {
 
         <EuiSpacer size="xl" />
 
-        <DisplayToggles canAppend canPrepend canLoading={false}>
+        <DisplayToggles canLoading={false}>
           <EuiDualRange
             id={makeId()}
             value={this.state.dualValue}

diff --git a/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap b/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
@@ -59,6 +59,16 @@ exports[`EuiCheckboxGroup (mocked checkbox) is rendered 1`] = `
 />
 `;
 
+exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
+<fieldset>
+  <legend
+    class="euiFormLegend"
+  >
+    A legend
+  </legend>
+</fieldset>
+`;
+
 exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
 <div>
   <eui_checkbox

diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss
@@ -5,7 +5,7 @@
     @include euiScreenReaderOnly;
 
     ~ .euiCheckbox__label {
-      display: block;
+      display: inline-block;
       padding-left: ($euiCheckBoxSize * 1.5);
       line-height: $euiSizeL;
       font-size: $euiFontSizeS;