[A11y] [SearchBar] [Filters] Improve accessibility of the Filters tog…

…gle button (#8091) Co-authored-by: Lene Gadewoll <[email protected]>
elastic · Nov 26, 2024 · c6cf094 · c6cf094
1 parent 90f7d5c
commit c6cf094
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 11 deletions.
diff --git a/packages/eui/changelogs/upcoming/8091.md b/packages/eui/changelogs/upcoming/8091.md
@@ -0,0 +1,7 @@
+**Accessibility**
+
+- Ensures `autoFocus` on `EuiSelectableList` triggers initial focus
+- Improved the accessibility of `EuiSearchBarFilters` by: 
+  - adding a more descriptive `aria-label` to selection filter buttons
+  - ensuring the selection listbox is initially focused when opening a selection popover
+
diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx
@@ -375,7 +375,7 @@ export class EuiPopover extends Component<Props, State> {
       // it will be on the panel instead on mount when isOpen=true
       if (
         document.activeElement === document.body ||
-        document.activeElement === this.panel
+        this.panel?.contains(document.activeElement) // if focus is on OR within this.panel
       ) {
         if (!this.button) return;
 

diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -160,6 +160,7 @@ exports[`SearchBar render - provided query, filters 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <button
+          aria-label="Tag Selection"
           class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
           type="button"
         >

diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`EuiSearchBarFilters render - with filters 1`] = `
     class="euiPopover emotion-euiPopover-inline-block"
   >
     <button
+      aria-label="Tag Selection"
       class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
       type="button"
     >

diff --git a/packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx b/packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx
@@ -16,6 +16,7 @@ import { EuiFilterButton } from '../../filter_group';
 import { euiFilterGroupStyles } from '../../filter_group/filter_group.styles';
 import { EuiSelectable, EuiSelectableProps } from '../../selectable';
 import { EuiSelectableOptionCheckedType } from '../../../components/selectable/selectable_option';
+import { EuiI18n } from '../../i18n';
 import { Query } from '../query';
 import { Clause, Operator, OperatorType, Value } from '../query/ast';
 
@@ -298,16 +299,27 @@ export class FieldValueSelectionFilter extends Component<
     const active = (activeTop || activeItem) && activeItemsCount > 0;
 
     const button = (
-      <EuiFilterButton
-        iconType="arrowDown"
-        iconSide="right"
-        onClick={this.onButtonClick.bind(this)}
-        hasActiveFilters={active}
-        numActiveFilters={active ? activeItemsCount : undefined}
-        grow
+      <EuiI18n
+        token="euiFieldValueSelectionFilter.buttonLabelHint"
+        default="Selection"
       >
-        {config.name}
-      </EuiFilterButton>
+        {(buttonLabelHint: string) => {
+          const ariaLabel = `${config.name} ${buttonLabelHint}`;
+          return (
+            <EuiFilterButton
+              iconType="arrowDown"
+              iconSide="right"
+              hasActiveFilters={active}
+              numActiveFilters={active ? activeItemsCount : undefined}
+              grow
+              aria-label={ariaLabel}
+              onClick={this.onButtonClick.bind(this)}
+            >
+              {config.name}
+            </EuiFilterButton>
+          );
+        }}
+      </EuiI18n>
     );
 
     const items = options
@@ -390,6 +402,7 @@ export class FieldValueSelectionFilter extends Component<
               noMatchesMessage={config.noOptionsMessage}
               listProps={{
                 isVirtualized: isOverSearchThreshold || false,
+                autoFocus: true,
               }}
               onChange={(options, event, changedOption) => {
                 if (changedOption.data) {

diff --git a/packages/eui/src/components/search_bar/search_bar.a11y.tsx b/packages/eui/src/components/search_bar/search_bar.a11y.tsx
@@ -216,7 +216,6 @@ describe('EuiSearchBar', () => {
     it('has zero violations after filtering by Tags', () => {
       cy.get('button.euiButtonEmpty').last().focus();
       cy.realPress('Enter');
-      cy.realPress('Tab');
       cy.realPress('ArrowDown');
       cy.realPress('Enter');
       cy.realPress('Escape');

diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
@@ -233,6 +233,7 @@ export class EuiSelectableList<T> extends Component<
       listId,
       searchable,
       singleSelection,
+      autoFocus,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
       'aria-describedby': ariaDescribedby,
@@ -259,6 +260,12 @@ export class EuiSelectableList<T> extends Component<
       if (typeof ariaDescribedby === 'string') {
         ref.setAttribute('aria-describedby', ariaDescribedby);
       }
+
+      if (autoFocus === true) {
+        // manually focus listbox once available
+        // use last stack execution to prevent potential focus order issues
+        setTimeout(() => ref.focus());
+      }
     }
   };
 
@@ -714,6 +721,7 @@ export class EuiSelectableList<T> extends Component<
       isVirtualized,
       textWrap,
       truncationProps,
+      autoFocus,
       ...rest
     } = this.props;