[EuiSelectable] Adding more keyboard shortcuts and screen reader inst…

…ructions (#3620)
elastic · Jun 18, 2020 · a6ba2b5 · a6ba2b5
1 parent 0e168f2
commit a6ba2b5
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 6 deletions.
diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
@@ -220,6 +220,8 @@ export class EuiSelectable extends Component<
         break;
 
       case keys.ENTER:
+      case keys.SPACE:
+        event.preventDefault();
         event.stopPropagation();
         if (this.state.activeOptionIndex != null && optionsList) {
           optionsList.onAddOrRemoveOption(
@@ -228,6 +230,20 @@ export class EuiSelectable extends Component<
         }
         break;
 
+      case keys.HOME:
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({ activeOptionIndex: 0 });
+        break;
+
+      case keys.END:
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({
+          activeOptionIndex: this.state.visibleOptions.length - 1,
+        });
+        break;
+
       default:
         if (this.props.onKeyDown) {
           this.props.onKeyDown(event);

diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiSelectableListItem is rendered 1`] = `
 <li
+  aria-disabled="false"
   aria-label="aria-label"
   aria-selected="false"
   class="euiSelectableListItem testClass1 testClass2"
@@ -24,6 +25,7 @@ exports[`EuiSelectableListItem is rendered 1`] = `
 
 exports[`EuiSelectableListItem props append 1`] = `
 <li
+  aria-disabled="false"
   aria-selected="false"
   class="euiSelectableListItem"
   role="option"
@@ -49,7 +51,8 @@ exports[`EuiSelectableListItem props append 1`] = `
 
 exports[`EuiSelectableListItem props checked is off 1`] = `
 <li
-  aria-selected="false"
+  aria-disabled="false"
+  aria-selected="true"
   class="euiSelectableListItem"
   role="option"
 >
@@ -70,6 +73,7 @@ exports[`EuiSelectableListItem props checked is off 1`] = `
 
 exports[`EuiSelectableListItem props checked is on 1`] = `
 <li
+  aria-disabled="false"
   aria-selected="true"
   class="euiSelectableListItem"
   role="option"
@@ -112,6 +116,7 @@ exports[`EuiSelectableListItem props disabled 1`] = `
 
 exports[`EuiSelectableListItem props isFocused 1`] = `
 <li
+  aria-disabled="false"
   aria-selected="false"
   class="euiSelectableListItem euiSelectableListItem-isFocused"
   role="option"
@@ -132,6 +137,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
 
 exports[`EuiSelectableListItem props prepend 1`] = `
 <li
+  aria-disabled="false"
   aria-selected="false"
   class="euiSelectableListItem"
   role="option"
@@ -157,6 +163,7 @@ exports[`EuiSelectableListItem props prepend 1`] = `
 
 exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
 <li
+  aria-disabled="false"
   aria-selected="false"
   class="euiSelectableListItem"
   role="option"

diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx
@@ -234,6 +234,7 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
         append={append}
         aria-posinset={index + 1 - labelCount}
         aria-setsize={data.length - labelCount}
+        allowExclusions={this.props.allowExclusions}
         {...optionRest as EuiSelectableListItemProps}>
         {this.props.renderOption ? (
           this.props.renderOption(option, this.props.searchValue)

diff --git a/src/components/selectable/selectable_list/selectable_list_item.tsx b/src/components/selectable/selectable_list/selectable_list_item.tsx
@@ -17,11 +17,13 @@
  * under the License.
  */
 
-import React, { Component, LiHTMLAttributes } from 'react';
 import classNames from 'classnames';
+import React, { Component, LiHTMLAttributes } from 'react';
 import { CommonProps } from '../../common';
-import { EuiIcon, IconType, IconColor } from '../../icon';
+import { EuiI18n } from '../../i18n';
+import { EuiIcon, IconColor, IconType } from '../../icon';
 import { EuiSelectableOptionCheckedType } from '../selectable_option';
+import { EuiScreenReaderOnly } from '../../accessibility';
 
 function resolveIconAndColor(
   checked: EuiSelectableOptionCheckedType
@@ -52,6 +54,7 @@ export type EuiSelectableListItemProps = LiHTMLAttributes<HTMLLIElement> &
     disabled?: boolean;
     prepend?: React.ReactNode;
     append?: React.ReactNode;
+    allowExclusions?: boolean;
   };
 
 // eslint-disable-next-line react/prefer-stateless-function
@@ -70,12 +73,13 @@ export class EuiSelectableListItem extends Component<
     const {
       children,
       className,
-      disabled,
+      disabled = false,
       checked,
       isFocused,
       showIcons,
       prepend,
       append,
+      allowExclusions,
       ...rest
     } = this.props;
 
@@ -113,18 +117,72 @@ export class EuiSelectableListItem extends Component<
       );
     }
 
+    let state: React.ReactNode;
+    let instruction: React.ReactNode;
+    if (allowExclusions && checked === 'on') {
+      state = (
+        <EuiScreenReaderOnly>
+          <span>
+            <EuiI18n
+              token="euiSelectableListItem.includedOption"
+              default="Included option."
+            />
+          </span>
+        </EuiScreenReaderOnly>
+      );
+      instruction = (
+        <EuiScreenReaderOnly>
+          <span>
+            <EuiI18n
+              token="euiSelectableListItem.includedOptionInstructions"
+              default="To exclude this option, press enter or space."
+            />
+          </span>
+        </EuiScreenReaderOnly>
+      );
+    } else if (allowExclusions && checked === 'off') {
+      state = (
+        <EuiScreenReaderOnly>
+          <span>
+            <EuiI18n
+              token="euiSelectableListItem.excludedOption"
+              default="Excluded option."
+            />
+          </span>
+        </EuiScreenReaderOnly>
+      );
+      instruction = (
+        <EuiScreenReaderOnly>
+          <span>
+            <EuiI18n
+              token="euiSelectableListItem.excludedOptionInstructions"
+              default="To deselect this option, press enter or space."
+            />
+          </span>
+        </EuiScreenReaderOnly>
+      );
+    }
+
+    if (allowExclusions) {
+      console.log({ state, instruction });
+    }
+
     return (
       <li
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
         role="option"
-        aria-selected={checked === 'on'}
+        aria-selected={!disabled && typeof checked === 'string'}
         className={classes}
         aria-disabled={disabled}
         {...rest}>
         <span className="euiSelectableListItem__content">
           {optionIcon}
           {prependNode}
-          <span className="euiSelectableListItem__text">{children}</span>
+          <span className="euiSelectableListItem__text">
+            {state}
+            {children}
+            {instruction}
+          </span>
           {appendNode}
         </span>
       </li>