Merge pull request #10 from snide/ss/accessibility

Super select screen readers
elastic · Aug 9, 2018 · 6c72117 · 6c72117
2 parents 7c32783 + 691d1da
commit 6c72117
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 7 deletions.
diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
@@ -45,7 +45,6 @@ export default class extends Component {
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -55,7 +54,6 @@ export default class extends Component {
           valueOfSelected={this.state.value}
           onChange={this.onChange}
           disabled
-          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -65,7 +63,6 @@ export default class extends Component {
           valueOfSelected={this.state.value}
           onChange={this.onChange}
           isLoading
-          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -76,7 +73,6 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
-          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />

diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js
@@ -55,7 +55,6 @@ export default class extends Component {
         options={this.options}
         valueOfSelected={this.state.value}
         onChange={this.onChange}
-        aria-label="Health levels"
       />
     );
   }

diff --git a/src-docs/src/views/super_select/super_select_complex.js b/src-docs/src/views/super_select/super_select_complex.js
@@ -57,12 +57,14 @@ export default class extends Component {
 
     this.state = {
       value: this.options[1].value,
+      inputDisplay: this.options[1].inputDisplay,
     };
   }
 
   onChange = (value) => {
     this.setState({
       value: value,
+      inputDisplay: this.options.inputDisplay,
     });
   };
 
@@ -74,7 +76,6 @@ export default class extends Component {
         onChange={this.onChange}
         itemLayoutAlign="top"
         hasDividers
-        aria-label="Use aria labels when no actual label is in use"
       />
     );
   }

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -19,8 +19,16 @@ exports[`EuiSuperSelect is rendered 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
+        <span
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          Select an option: , is selected
+        </span>
         <button
+          aria-haspopup="true"
           aria-label="aria-label"
+          aria-labelledby="generated-id"
           class="euiSuperSelectControl testClass1 testClass2"
           data-test-subj="test subject string"
           role="option"
@@ -85,7 +93,15 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
+        <span
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          Select an option: , is selected
+        </span>
         <button
+          aria-haspopup="true"
+          aria-labelledby="generated-id"
           class="euiSuperSelectControl"
           role="option"
           type="button"
@@ -149,7 +165,15 @@ exports[`EuiSuperSelect props options are rendered 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
+        <span
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          Select an option: , is selected
+        </span>
         <button
+          aria-haspopup="true"
+          aria-labelledby="generated-id"
           class="euiSuperSelectControl"
           role="option"
           type="button"
@@ -214,7 +238,15 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
+        <span
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          Select an option: Option #1, is selected
+        </span>
         <button
+          aria-haspopup="true"
+          aria-labelledby="generated-id"
           class="euiSuperSelectControl"
           role="option"
           type="button"

diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
@@ -14,8 +14,16 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
       <button
+        aria-haspopup="true"
         aria-label="aria-label"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl testClass1 testClass2"
         data-test-subj="test subject string"
         role="option"
@@ -67,7 +75,15 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
       <button
+        aria-haspopup="true"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--compressed"
         role="option"
         type="button"
@@ -125,7 +141,15 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
       <button
+        aria-haspopup="true"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         role="option"
         type="button"
@@ -176,7 +200,15 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
       <button
+        aria-haspopup="true"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
         role="option"
         type="button"
@@ -227,7 +259,15 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
       <button
+        aria-haspopup="true"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isLoading"
         role="option"
         type="button"
@@ -288,7 +328,15 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
       <button
+        aria-haspopup="true"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         role="option"
         type="button"
@@ -347,7 +395,15 @@ Array [
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: Option #1, is selected
+      </span>
       <button
+        aria-haspopup="true"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         role="option"
         type="button"

diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
@@ -4,6 +4,7 @@ import React, {
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiSuperSelectControl } from './super_select_control';
 import { EuiPopover } from '../../popover';
 import { EuiContextMenuItem } from '../../context_menu';
@@ -182,6 +183,8 @@ export class EuiSuperSelect extends Component {
           layoutAlign={itemLayoutAlign}
           buttonRef={node => this.setItemNode(node, index)}
           style={{ width: this.state.menuWidth }}
+          role="option"
+          id={option.value}
         >
           {option.dropdownDisplay || option.inputDisplay}
         </EuiContextMenuItem>
@@ -201,7 +204,15 @@ export class EuiSuperSelect extends Component {
         popoverRef={this.setPopoverRef}
         hasArrow={false}
       >
-        {items}
+        <EuiScreenReaderOnly>
+          <p role="alert">
+            You are in a form selector of {options.length} items and must select a single option.
+            Use the up and down keys to navigate or escape to close.
+          </p>
+        </EuiScreenReaderOnly>
+        <div role="listbox" aria-activedescendant={valueOfSelected}>
+          {items}
+        </div>
       </EuiPopover>
     );
   }

diff --git a/src/components/form/super_select/super_select.test.js b/src/components/form/super_select/super_select.test.js
@@ -4,6 +4,8 @@ import { requiredProps } from '../../../test';
 
 import { EuiSuperSelect } from './super_select';
 
+jest.mock(`../form_row/make_id`, () => () => `generated-id`);
+
 describe('EuiSuperSelect', () => {
   test('is rendered', () => {
     const component = render(

diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js
@@ -2,6 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiScreenReaderOnly } from '../../accessibility';
+import makeId from '../form_row/make_id';
 import {
   EuiFormControlLayout,
 } from '../form_control_layout';
@@ -55,6 +57,8 @@ export const EuiSuperSelectControl = ({
     side: 'right',
   };
 
+  const screenReaderId = makeId();
+
   return (
     <Fragment>
       <select
@@ -84,10 +88,22 @@ export const EuiSuperSelectControl = ({
         compressed={compressed}
       >
 
+        {/*
+          This is read when the user tabs in. The comma is important,
+          otherwise the screen reader often combines the text.
+        */}
+        <EuiScreenReaderOnly>
+          <span id={screenReaderId}>
+            Select an option: {selectedValue}, is selected
+          </span>
+        </EuiScreenReaderOnly>
+
         <button
           role="option"
           type="button"
           className={classes}
+          aria-haspopup="true"
+          aria-labelledby={screenReaderId}
           {...rest}
         >
           {selectedValue}

diff --git a/src/components/form/super_select/super_select_control.test.js b/src/components/form/super_select/super_select_control.test.js
@@ -4,6 +4,8 @@ import { requiredProps } from '../../../test';
 
 import { EuiSuperSelectControl } from './super_select_control';
 
+jest.mock(`../form_row/make_id`, () => () => `generated-id`);
+
 describe('EuiSuperSelectControl', () => {
   test('is rendered', () => {
     const component = render(