More aria attributes for Selectable (#3583)

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Jun 15, 2020 · 0e168f2 · 0e168f2
1 parent 3eb02e4
commit 0e168f2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
@@ -347,7 +347,7 @@ export class EuiSelectable extends Component<
       ...cleanedListProps
     } = listProps || unknownAccessibleName;
 
-    let messageContent;
+    let messageContent: JSX.Element | undefined;
 
     if (isLoading) {
       messageContent = (
@@ -391,6 +391,7 @@ export class EuiSelectable extends Component<
       className
     );
 
+    const messageContentId = messageContent && this.rootId('messageContent');
     const listId = this.rootId('listbox');
     const makeOptionId = (index: number | undefined) => {
       if (typeof index === 'undefined') {
@@ -414,15 +415,22 @@ export class EuiSelectable extends Component<
       props:
         | Partial<EuiSelectableSearchProps>
         | EuiSelectableOptionsListPropsWithDefaults
-        | undefined
+        | undefined,
+      messageContentId?: string
     ) => {
       if (props && props['aria-label']) {
         return { 'aria-label': props['aria-label'] };
       }
 
+      const messageContentIdString = messageContentId
+        ? ` ${messageContentId}`
+        : '';
+
       if (props && props['aria-describedby']) {
         return {
-          'aria-describedby': props['aria-describedby'],
+          'aria-describedby': `${
+            props['aria-describedby']
+          }${messageContentIdString}`,
         };
       }
 
@@ -431,13 +439,18 @@ export class EuiSelectable extends Component<
       }
 
       if (ariaDescribedby) {
-        return { 'aria-describedby': ariaDescribedby };
+        return {
+          'aria-describedby': `${ariaDescribedby}${messageContentIdString}`,
+        };
       }
 
       return {};
     };
 
-    const searchAccessibleName = getAccessibleName(searchProps);
+    const searchAccessibleName = getAccessibleName(
+      searchProps,
+      messageContentId
+    );
     const searchHasAccessibleName = Boolean(
       Object.keys(searchAccessibleName).length
     );
@@ -467,7 +480,7 @@ export class EuiSelectable extends Component<
       Object.keys(listAccessibleName).length
     );
     const list = messageContent ? (
-      <EuiSelectableMessage key="listMessage">
+      <EuiSelectableMessage key="listMessage" id={messageContentId}>
         {messageContent}
       </EuiSelectableMessage>
     ) : (
@@ -479,6 +492,9 @@ export class EuiSelectable extends Component<
             visibleOptions={visibleOptions}
             searchValue={searchValue}
             activeOptionIndex={activeOptionIndex}
+            setActiveOptionIndex={index =>
+              this.setState({ activeOptionIndex: index })
+            }
             onOptionClick={this.onOptionClick}
             singleSelection={singleSelection}
             ref={this.optionsListRef}

diff --git a/src/components/selectable/selectable_list/selectable_list.test.tsx b/src/components/selectable/selectable_list/selectable_list.test.tsx
@@ -56,6 +56,7 @@ const selectableListRequiredProps = {
   makeOptionId: (index: number | undefined) => `option_${index}`,
   listId: 'list',
   onOptionClick: () => {},
+  setActiveOptionIndex: () => {},
   ...requiredProps,
 };
 

diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx
@@ -30,10 +30,14 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import {
   FixedSizeList,
   ListProps,
-  ListChildComponentProps,
+  ListChildComponentProps as ReactWindowListChildComponentProps,
   areEqual,
 } from 'react-window';
 
+interface ListChildComponentProps extends ReactWindowListChildComponentProps {
+  data: EuiSelectableOption[];
+}
+
 // Consumer Configurable Props via `EuiSelectable.listProps`
 export type EuiSelectableOptionsListProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
@@ -102,6 +106,7 @@ export type EuiSelectableListProps = EuiSelectableOptionsListProps & {
   searchable?: boolean;
   makeOptionId: (index: number | undefined) => string;
   listId: string;
+  setActiveOptionIndex: (index: number) => void;
 };
 
 export class EuiSelectableList extends Component<EuiSelectableListProps> {
@@ -211,6 +216,8 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
       );
     }
 
+    const labelCount = data.filter(option => option.isGroupLabel).length;
+
     return (
       <EuiSelectableListItem
         id={this.props.makeOptionId(index)}
@@ -225,6 +232,8 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
         disabled={disabled}
         prepend={prepend}
         append={append}
+        aria-posinset={index + 1 - labelCount}
+        aria-setsize={data.length - labelCount}
         {...optionRest as EuiSelectableListItemProps}>
         {this.props.renderOption ? (
           this.props.renderOption(option, this.props.searchValue)
@@ -254,6 +263,7 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
       bordered,
       searchable,
       listId,
+      setActiveOptionIndex,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
       'aria-describedby': ariaDescribedby,
@@ -324,6 +334,10 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
 
     const { allowExclusions } = this.props;
 
+    this.props.setActiveOptionIndex(
+      this.props.options.findIndex(({ label }) => label === option.label)
+    );
+
     if (option.checked === 'on' && allowExclusions) {
       this.onExcludeOption(option);
     } else if (option.checked === 'on' || option.checked === 'off') {