From a43bdb1734a0bb068e8099ce337db5d00d65ed9c Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Sun, 10 May 2026 11:48:22 -0500
Subject: [PATCH] [ML] Add aria-label to Anomaly score button for screen reader
 accessibility (#266469)

The Anomaly score button in the Anomaly Explorer only announces its
selection value ("Multiple") to screen readers, missing the "Anomaly
score" title context. This violates WCAG SC 4.1.2 (Name, Role, Value).

Fixes https://github.com/elastic/kibana/issues/264988

### Changes

- Added optional `aria-label` prop to `MultiSuperSelect` component,
forwarded to the inner `EuiButtonEmpty`
- Passed the "Anomaly score" label as `aria-label` in `SelectSeverityUI`
so assistive technology announces the full context

Screen readers will now announce: *"Anomaly score, Multiple, collapsed,
button"* instead of just *"Multiple, collapsed, button"*.

> [!WARNING]
>
> <details>
> <summary>Firewall rules blocked me from connecting to one or more
addresses (expand for details)</summary>
>
> #### I tried to connect to the following addresses, but was blocked by
firewall rules:
>
> - `ci-stats.kibana.dev`
> - Triggering command:
`/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node
/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node
scripts/yarn_install_scripts.js run x86-64.so.2 0.8.2 if (a[i] &lt;`
(dns block)
> - Triggering command:
`/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node
/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node scripts/kbn
bootstrap` (dns block)
> - Triggering command:
`/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node node
scripts/check_changes.ts dd ldd s/li` (dns block)
> - `clients3.google.com`
> - Triggering command:
`/home/REDACTED/work/kibana/kibana/node_modules/@moonrepo/core-linux-x64-gnu/moon
/home/REDACTED/work/kibana/kibana/node_modules/@moonrepo/core-linux-x64-gnu/moon
run :build-webpack ldd 0.8.2` (dns block)
> - `detectportal.firefox.com`
> - Triggering command:
`/home/REDACTED/work/kibana/kibana/node_modules/@moonrepo/core-linux-x64-gnu/moon
/home/REDACTED/work/kibana/kibana/node_modules/@moonrepo/core-linux-x64-gnu/moon
run :build-webpack ldd 0.8.2` (dns block)
> - `google.com`
> - Triggering command:
`/home/REDACTED/work/kibana/kibana/node_modules/@moonrepo/core-linux-x64-gnu/moon
/home/REDACTED/work/kibana/kibana/node_modules/@moonrepo/core-linux-x64-gnu/moon
run :build-webpack ldd 0.8.2` (dns block)
> - `googlechromelabs.github.io`
> - Triggering command:
`/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node
/home/REDACTED/.nvm/versions/node/v24.14.1/bin/node install.js
_TOKEN&#34;; }; f ldd b/li
nibrowser-gtk/sys/lib/libbrotlienc.so.1.0.7` (dns block)
> - `iojs.org`
> - Triggering command: `/usr/bin/curl curl -q --fail --compressed -L -s
REDACTED -o -` (dns block)
>
> If you need me to access, download, or install something from one of
these locations, you can either:
>
> - Configure [Actions setup
steps](https://gh.io/copilot/actions-setup-steps) to set up my
environment, which run before the firewall is enabled
> - Add the appropriate URLs or hosts to the custom allowlist in this
repository's [Copilot coding agent
settings](https://github.com/elastic/kibana/settings/copilot/coding_agent)
(admins only)
>
> </details>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: L1nBra <178042654+L1nBra@users.noreply.github.com>
Co-authored-by: Bhavya RM <bhavya@elastic.co>
Co-authored-by: L1nBra <lina.braziulyte@gmail.com>
Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
(cherry picked from commit 8ef3b44932d2b984f44d3569cc86b47242a08245)
---
 .../controls/select_severity/select_severity.tsx         | 9 ++++++---
 .../components/multi_super_select/multi_super_select.tsx | 4 +++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/controls/select_severity/select_severity.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/controls/select_severity/select_severity.tsx
index 3f03b46bf5c5e..f8c89e72e7db7 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/controls/select_severity/select_severity.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/controls/select_severity/select_severity.tsx
@@ -237,12 +237,15 @@ export const SelectSeverityUI: FC<
     [onChange, allSeverityOptions]
   );
 
+  const anomalyScoreLabel = i18n.translate('xpack.ml.explorer.severityThresholdLabel', {
+    defaultMessage: 'Anomaly score',
+  });
+
   return (
     <div data-test-subj={'mlAnomalySeverityThresholdControls'} className={classNames}>
       <MultiSuperSelect
-        prepend={i18n.translate('xpack.ml.explorer.severityThresholdLabel', {
-          defaultMessage: 'Anomaly score',
-        })}
+        prepend={anomalyScoreLabel}
+        aria-label={anomalyScoreLabel}
         inputDisplay={inputDisplay}
         options={multiSelectOptions}
         onOptionsChange={handleOptionsChange}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/multi_super_select/multi_super_select.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/multi_super_select/multi_super_select.tsx
index e55a4a2bf1318..acf868e19218d 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/multi_super_select/multi_super_select.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/multi_super_select/multi_super_select.tsx
@@ -15,6 +15,7 @@ interface MultiSuperSelect<T> {
   inputDisplay: React.JSX.Element | string;
   options: Array<EuiSelectableOption<T>>;
   onOptionsChange?: (options: Array<EuiSelectableOption<T>>) => void;
+  'aria-label'?: string;
 }
 
 export const MultiSuperSelect = <T = string,>({
@@ -22,6 +23,7 @@ export const MultiSuperSelect = <T = string,>({
   inputDisplay,
   options,
   onOptionsChange,
+  'aria-label': ariaLabel,
 }: MultiSuperSelect<T>) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -33,7 +35,7 @@ export const MultiSuperSelect = <T = string,>({
 
   const popoverButton = (
     <EuiFormControlLayout isDropdown prepend={prepend} compressed fullWidth>
-      <EuiButtonEmpty onClick={onPopoverButtonClick} css={styles.control}>
+      <EuiButtonEmpty onClick={onPopoverButtonClick} css={styles.control} aria-label={ariaLabel}>
         {inputDisplay}
       </EuiButtonEmpty>
     </EuiFormControlLayout>