[EuiSelectable][A11y] Search input is not read out by screen readers

packages/eui/changelogs/upcoming/9223.md

@@ -0,0 +1,2 @@
+**Accessibility**
+- Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers

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

@@ -251,7 +251,7 @@ describe('EuiFilterGroup multiselect example', () => {
       cy.realPress('Enter');
       cy.get('div[data-test-subj="euiSelectableList"]').should('exist');
       cy.realPress('Tab');
-      cy.repeatRealPress('ArrowDown', 3);
+      cy.repeatRealPress('ArrowDown', 4);
       cy.realPress('Enter');
       cy.get('li[aria-selected="true"]')
         .find('span.euiSelectableListItem__text')

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

@@ -370,7 +370,6 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
         </span>
       </div>
       <input
-        aria-activedescendant=""
         aria-describedby="generated-id_instructions"
         aria-haspopup="listbox"
         aria-label="Filter options"

packages/eui/src/components/selectable/selectable.spec.tsx

@@ -163,6 +163,7 @@ describe('EuiSelectable', () => {
       const onChange = cy.stub();
       cy.realMount(<EuiSelectableWithSearchInput onChange={onChange} />);
       cy.realPress('Tab');
+      cy.realPress('ArrowDown');
       cy.realPress('Enter').then(() => {
         expect(onChange).to.have.been.calledWith([
           { ...options[0], checked: 'on' },

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

@@ -118,6 +118,7 @@ export const WithSearch: Story = {
     // setting up for easier testing/QA
     searchProps: {
       'data-test-subj': 'selectableSearchHere',
+      'aria-label': 'Filter options',
     },
   },
   render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,

packages/eui/src/components/selectable/selectable.tsx

@@ -351,6 +351,11 @@ export class EuiSelectable<T = {}> extends Component<
       return;
     }
 
+    if (event && this.props.searchable && event.target === this.inputRef) {
+      this.setState({ isFocused: true });
+      return;
+    }
+
     if (
       !this.state.visibleOptions.length ||
       this.state.activeOptionIndex != null
@@ -750,7 +755,11 @@ export class EuiSelectable<T = {}> extends Component<
               value={searchValue}
               onChange={this.onSearchChange}
               listId={this.optionsListRef.current ? this.listId : undefined} // Only pass the listId if it exists on the page
-              aria-activedescendant={this.makeOptionId(activeOptionIndex)} // the current faux-focused option
+              aria-activedescendant={
+                activeOptionIndex != null
+                  ? this.makeOptionId(activeOptionIndex)
+                  : undefined
+              }
               placeholder={placeholderName}
               isPreFiltered={!!isPreFiltered}
               optionMatcher={optionMatcher!}

packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap

@@ -32,7 +32,6 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
             </span>
           </div>
           <input
-            aria-activedescendant=""
             aria-describedby="generated-id_instructions"
             aria-haspopup="listbox"
             aria-label="aria-label"
@@ -107,7 +106,6 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
             </span>
           </div>
           <input
-            aria-activedescendant=""
             aria-describedby="generated-id_instructions"
             aria-haspopup="listbox"
             aria-label="Filter options"
@@ -162,7 +160,6 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
             </span>
           </div>
           <input
-            aria-activedescendant=""
             aria-describedby="generated-id_instructions"
             aria-haspopup="listbox"
             aria-label="Filter options"
@@ -217,7 +214,6 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
             </span>
           </div>
           <input
-            aria-activedescendant=""
             aria-describedby="generated-id_instructions"
             aria-haspopup="listbox"
             aria-label="Filter options"

packages/website/docs/components/forms/selection/selectable.mdx

@@ -139,6 +139,7 @@ export default () => {
       searchable
       searchProps={{
         'data-test-subj': 'selectableSearchHere',
+        'aria-label': 'Filter options',
       }}
       options={options}
       onChange={(newOptions) => setOptions(newOptions)}