[EuiComboBox] Improve accessibility of virtualized listbox

packages/eui/changelogs/upcoming/8333.md

@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Improved the accessibility of `EuiComboBox` by adding `aria-setsize` and `aria-posinset` to ensure correct information is provided for its virtualized listbox
+

packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`EuiComboBox renders 1`] = `
             aria-autocomplete="list"
             aria-controls=""
             aria-expanded="false"
+            aria-haspopup="listbox"
             aria-invalid="false"
             aria-label="aria-label"
             autocomplete="off"
@@ -84,6 +85,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                 aria-autocomplete="list"
                 aria-controls="generated-id_listbox"
                 aria-expanded="true"
+                aria-haspopup="listbox"
                 aria-invalid="false"
                 autocomplete="off"
                 class="euiComboBox__input emotion-euiComboBoxInput"
@@ -135,7 +137,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-live="assertive"
+        aria-live="off"
         aria-modal="true"
         class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-isAttached-bottom"
         data-popover-open="true"
@@ -168,7 +170,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                   tabindex="0"
                 >
                   <button
+                    aria-posinset="1"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     data-test-subj="titanOption"
                     id="generated-id__option-0"
@@ -196,7 +200,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="2"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-1"
                     role="option"
@@ -223,7 +229,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="3"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-2"
                     role="option"
@@ -250,7 +258,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="4"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-3"
                     role="option"
@@ -277,7 +287,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="5"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-4"
                     role="option"
@@ -304,7 +316,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="6"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-5"
                     role="option"
@@ -331,7 +345,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="7"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-6"
                     role="option"
@@ -358,7 +374,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="8"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-7"
                     role="option"
@@ -385,7 +403,9 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-posinset="9"
                     aria-selected="false"
+                    aria-setsize="10"
                     class="euiFilterSelectItem emotion-euiFilterSelectItem"
                     id="generated-id__option-8"
                     role="option"

packages/eui/src/components/combo_box/combo_box.stories.tsx

@@ -27,6 +27,11 @@ const options = [
   { label: 'Item 3' },
   { label: 'Item 4', disabled: true },
   { label: 'Item 5' },
+  { label: 'Item 6' },
+  { label: 'Item 7' },
+  { label: 'Item 8' },
+  { label: 'Item 9' },
+  { label: 'Item 10' },
 ];
 
 const meta: Meta<EuiComboBoxProps<{}>> = {

packages/eui/src/components/combo_box/combo_box.tsx

@@ -863,6 +863,10 @@ export class EuiComboBox<T> extends Component<
                 {...inputPopoverProps}
                 isOpen={isListOpen}
                 closePopover={this.closeList}
+                /* we don't want content changes to be announced via aria-live 
+                because ComboBox uses a virtualized list that updates itself
+                on scroll and would result in unexpected screen reader output */
+                aria-live="off"
                 input={
                   <EuiComboBoxInput
                     compressed={compressed}

packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx

@@ -379,6 +379,7 @@ export class EuiComboBoxInput<T> extends Component<
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledby}
                     aria-invalid={isInvalid}
+                    aria-haspopup="listbox"
                     css={styles.euiComboBoxInput}
                     className="euiComboBox__input"
                     data-test-subj="comboBoxSearchInput"

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -167,8 +167,11 @@ export class EuiComboBoxOptionsList<T> extends Component<
       renderOption,
       searchValue,
       rootId,
+      matchingOptions,
     } = this.props;
 
+    const optionIndex = matchingOptions.indexOf(option);
+
     const hasTruncationProps = this.props.truncationProps || _truncationProps;
     const truncationProps = hasTruncationProps
       ? // Individual truncation settings should override component prop
@@ -215,6 +218,8 @@ export class EuiComboBoxOptionsList<T> extends Component<
         showIcons={singleSelection ? true : false}
         id={rootId(`_option-${index}`)}
         title={label}
+        aria-setsize={matchingOptions.length}
+        aria-posinset={optionIndex + 1}
         {...rest}
       >
         <span className="euiComboBoxOption__contentWrapper">

packages/eui/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`EuiFilterSelectItem renders 1`] = `
 <button
   aria-label="aria-label"
+  aria-selected="false"
   class="euiFilterSelectItem testClass1 testClass2 emotion-euiFilterSelectItem-euiTestCss"
   data-test-subj="test subject string"
   role="option"

packages/eui/src/components/filter_group/filter_select_item.tsx

@@ -143,7 +143,7 @@ export class EuiFilterSelectItemClass extends Component<
         ref={(ref) => (this.buttonRef = ref)}
         role="option"
         type="button"
-        aria-selected={isFocused}
+        aria-selected={checked === 'on'}
         className={classes}
         css={cssStyles}
         disabled={disabled}

packages/eui/src/components/popover/popover.tsx

@@ -636,6 +636,7 @@ export class EuiPopover extends Component<Props, State> {
       buffer,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      'aria-live': ariaLiveProp,
       container,
       focusTrapProps,
       initialFocus: initialFocusProp,
@@ -678,7 +679,7 @@ export class EuiPopover extends Component<Props, State> {
           initialFocus = () => this.panel!;
         }
       } else {
-        ariaLive = 'assertive';
+        ariaLive = ariaLiveProp ?? 'assertive';
       }
 
       let focusTrapScreenReaderText;