add accessibility text

elastic · Oct 21, 2024 · 0677ba2 · 0677ba2
1 parent 4b54564
commit 0677ba2
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/packages/eui/src/components/filter_group/filter_button.tsx b/packages/eui/src/components/filter_group/filter_button.tsx
@@ -21,6 +21,7 @@ import {
   euiFilterButtonStyles,
   euiFilterButtonChildStyles,
 } from './filter_button.styles';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 export type EuiFilterButtonProps = {
   /**
@@ -152,6 +153,12 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   const dataText =
     children && typeof children === 'string' ? children : innerText;
 
+  const accessibleText = (
+    <EuiScreenReaderOnly>
+      <span>{useEuiI18n('euiFilterButton.accessibleText', 'select')}</span>
+    </EuiScreenReaderOnly>
+  );
+
   const textContent = (
     <span
       ref={ref}
@@ -162,6 +169,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       css={textCssStyles}
     >
       {children}
+      {accessibleText}
     </span>
   );