From cdb7a2a5f06bc91c27ffdc29b21f91448a0ea262 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 8 Apr 2026 12:11:09 +0200
Subject: [PATCH 1/5] refactor: use aria-label instead of title attribute on
 EuiStepHorizontal

- this prevents reading out duplicate text content
---
 packages/eui/src/components/steps/step_horizontal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eui/src/components/steps/step_horizontal.tsx b/packages/eui/src/components/steps/step_horizontal.tsx
index 5bc3ab13e6eb..04f49e14f348 100644
--- a/packages/eui/src/components/steps/step_horizontal.tsx
+++ b/packages/eui/src/components/steps/step_horizontal.tsx
@@ -118,7 +118,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
     <button
       aria-disabled={status === 'disabled' ? true : undefined}
       className={classes}
-      title={titleAttr}
+      aria-label={titleAttr}
       onClick={onStepClick}
       disabled={disabled}
       css={cssStyles}

From 5edcf0bca1cb5ca7ba3f112815b51b8270d23eba Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 8 Apr 2026 12:11:20 +0200
Subject: [PATCH 2/5] test: update snapshots

---
 .../step_horizontal.test.tsx.snap             | 27 +++++++++----------
 .../steps_horizontal.test.tsx.snap            |  8 +++---
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 9f6c54b50434..1fa7f8c83843 100644
--- a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`EuiStepHorizontal is rendered 1`] = `
   class="euiStepHorizontal testClass1 testClass2 emotion-euiStepHorizontal-enabled-euiTestCss"
   data-step-status="incomplete"
   data-test-subj="test subject string"
-  title="Step 1 is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-incomplete-euiStepHorizontal__number"
@@ -31,9 +30,9 @@ exports[`EuiStepHorizontal is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size m is rendered 1`] = `
 <button
+  aria-label="Step 1 is incomplete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
-  title="Step 1 is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-incomplete-euiStepHorizontal__number"
@@ -58,9 +57,9 @@ exports[`EuiStepHorizontal props size m is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size s is rendered 1`] = `
 <button
+  aria-label="Step 1 is incomplete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
-  title="Step 1 is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-xs-incomplete-euiStepHorizontal__number"
@@ -85,9 +84,9 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size xs is rendered 1`] = `
 <button
+  aria-label="Step 1 is incomplete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
-  title="Step 1 is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-none-incomplete-euiStepHorizontal__number"
@@ -106,9 +105,9 @@ exports[`EuiStepHorizontal props size xs is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
+  aria-label="Step 1 is complete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="complete"
-  title="Step 1 is complete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-complete-euiStepHorizontal__number"
@@ -128,9 +127,9 @@ exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status current is rendered 1`] = `
 <button
+  aria-label="Current step is 1"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="current"
-  title="Current step is 1"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-current-euiStepHorizontal__number"
@@ -155,9 +154,9 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 <button
+  aria-label="Step 1 has errors"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="danger"
-  title="Step 1 has errors"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-danger-euiStepHorizontal__number"
@@ -178,9 +177,9 @@ exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
 <button
   aria-disabled="true"
+  aria-label="Step 1 is disabled"
   class="euiStepHorizontal emotion-euiStepHorizontal-disabled"
   data-step-status="disabled"
-  title="Step 1 is disabled"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-disabled-euiStepHorizontal__number"
@@ -206,10 +205,10 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
 exports[`EuiStepHorizontal props status disabled overrides the passed status 1`] = `
 <button
   aria-disabled="true"
+  aria-label="Step 1 is disabled"
   class="euiStepHorizontal emotion-euiStepHorizontal-disabled"
   data-step-status="disabled"
   disabled=""
-  title="Step 1 is disabled"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-disabled-euiStepHorizontal__number"
@@ -234,9 +233,9 @@ exports[`EuiStepHorizontal props status disabled overrides the passed status 1`]
 
 exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 <button
+  aria-label="Step 1 is incomplete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
-  title="Step 1 is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-incomplete-euiStepHorizontal__number"
@@ -261,9 +260,9 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 <button
+  aria-label="Step 1 is loading"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="loading"
-  title="Step 1 is loading"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-loading-euiStepHorizontal__number"
@@ -287,9 +286,9 @@ exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 <button
+  aria-label="Step 1 has warnings"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="warning"
-  title="Step 1 has warnings"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-warning-euiStepHorizontal__number"
@@ -309,9 +308,9 @@ exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 
 exports[`EuiStepHorizontal props step 1`] = `
 <button
+  aria-label="Step 5 is incomplete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
-  title="Step 5 is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-incomplete-euiStepHorizontal__number"
@@ -336,9 +335,9 @@ exports[`EuiStepHorizontal props step 1`] = `
 
 exports[`EuiStepHorizontal props title 1`] = `
 <button
+  aria-label="Step 1: First step is incomplete"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
-  title="Step 1: First step is incomplete"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-incomplete-euiStepHorizontal__number"
diff --git a/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index d5521d197fb9..c7783aab3183 100644
--- a/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -10,9 +10,9 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-label="Step 1: Completed Step 1 is complete"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="complete"
-      title="Step 1: Completed Step 1 is complete"
     >
       <span
         class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-complete-euiStepHorizontal__number"
@@ -36,9 +36,9 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-label="Current step 2: Selected Step 2"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="current"
-      title="Current step 2: Selected Step 2"
     >
       <span
         class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-current-euiStepHorizontal__number"
@@ -66,9 +66,9 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-label="Step 3: Incomplete Step 3 is incomplete"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="incomplete"
-      title="Step 3: Incomplete Step 3 is incomplete"
     >
       <span
         class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-incomplete-euiStepHorizontal__number"
@@ -97,9 +97,9 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
   >
     <button
       aria-disabled="true"
+      aria-label="Step 4: Disabled Step 4 is disabled"
       class="euiStepHorizontal emotion-euiStepHorizontal-disabled"
       data-step-status="disabled"
-      title="Step 4: Disabled Step 4 is disabled"
     >
       <span
         class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-disabled-euiStepHorizontal__number"

From 018c215779eaac2415b3c0837f6f2b2727a029fb Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 8 Apr 2026 12:29:15 +0200
Subject: [PATCH 3/5] chore: add changelog

---
 packages/eui/changelogs/upcoming/9574.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/9574.md

diff --git a/packages/eui/changelogs/upcoming/9574.md b/packages/eui/changelogs/upcoming/9574.md
new file mode 100644
index 000000000000..ffa1ec5dd871
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9574.md
@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Fixed duplicate screen reader output for `EuiStepsHorizontal`
\ No newline at end of file

From 38fb290a1c2a7f0eb4523841b612652209f626d6 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 8 Apr 2026 14:25:46 +0200
Subject: [PATCH 4/5] refactor: ensure custom aria-label and aria-labelledby
 can be applied

- additionally renames the map to fit aria-label usage better
---
 packages/eui/src/components/steps/step_horizontal.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/eui/src/components/steps/step_horizontal.tsx b/packages/eui/src/components/steps/step_horizontal.tsx
index 04f49e14f348..34cc30183c4e 100644
--- a/packages/eui/src/components/steps/step_horizontal.tsx
+++ b/packages/eui/src/components/steps/step_horizontal.tsx
@@ -74,6 +74,8 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
   disabled,
   status = 'incomplete',
   size = 'm',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   ...rest
 }) => {
   if (disabled) status = 'disabled';
@@ -96,7 +98,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
     status === 'disabled' && titleStyles.disabled,
   ];
 
-  const titleAttrsMap: Record<EuiStepStatus | 'step', string> = {
+  const labelMap: Record<EuiStepStatus | 'step', string> = {
     step: useI18nStep({ number: step, title }),
     current: useI18nCurrentStep({ number: step, title }),
     disabled: useI18nDisabledStep({ number: step, title }),
@@ -106,7 +108,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
     danger: useI18nErrorsStep({ number: step, title }),
     loading: useI18nLoadingStep({ number: step, title }),
   };
-  const titleAttr = titleAttrsMap[status || 'step'];
+  const ariaLabelAttr = labelMap[status || 'step'];
 
   const onStepClick = (
     event: ReactMouseEvent<HTMLButtonElement, MouseEvent>
@@ -118,7 +120,8 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
     <button
       aria-disabled={status === 'disabled' ? true : undefined}
       className={classes}
-      aria-label={titleAttr}
+      aria-label={ariaLabel ?? (ariaLabelledby ? undefined : ariaLabelAttr)}
+      aria-labelledby={ariaLabelledby}
       onClick={onStepClick}
       disabled={disabled}
       css={cssStyles}

From 0fa990ae05da787d6fb217b46e25019804f8a503 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 8 Apr 2026 14:26:07 +0200
Subject: [PATCH 5/5] refactor: guard onClick based on disabled state and
 variant

---
 packages/eui/src/components/steps/step_horizontal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eui/src/components/steps/step_horizontal.tsx b/packages/eui/src/components/steps/step_horizontal.tsx
index 34cc30183c4e..b507a09b8773 100644
--- a/packages/eui/src/components/steps/step_horizontal.tsx
+++ b/packages/eui/src/components/steps/step_horizontal.tsx
@@ -113,7 +113,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
   const onStepClick = (
     event: ReactMouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
-    if (!disabled) onClick(event);
+    if (!disabled && status !== 'disabled') onClick(event);
   };
 
   return (