From b7da3f0c3c2c5e64ff1ab087d0551b5f768d3adc Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 18 Apr 2024 16:05:58 -0500
Subject: [PATCH 1/3] Added aria-hidden attr for status disabled.

---
 .../__snapshots__/step_horizontal.test.tsx.snap     | 13 +++++++++++++
 .../__snapshots__/steps_horizontal.test.tsx.snap    |  4 ++++
 src/components/steps/step_horizontal.tsx            |  2 ++
 3 files changed, 19 insertions(+)

diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 2b64ab7b09f..cbd612bc919 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiStepHorizontal is rendered 1`] = `
 <button
+  aria-disabled="false"
   aria-label="aria-label"
   class="euiStepHorizontal testClass1 testClass2 emotion-euiStepHorizontal-enabled-euiTestCss"
   data-step-status="incomplete"
@@ -31,6 +32,7 @@ exports[`EuiStepHorizontal is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size m is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1 is incomplete"
@@ -58,6 +60,7 @@ exports[`EuiStepHorizontal props size m is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size s is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1 is incomplete"
@@ -85,6 +88,7 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="complete"
   title="Step 1 is complete"
@@ -107,6 +111,7 @@ exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status current is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="current"
   title="Current step is 1"
@@ -134,6 +139,7 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="danger"
   title="Step 1 has errors"
@@ -156,6 +162,7 @@ exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
 <button
+  aria-disabled="true"
   class="euiStepHorizontal emotion-euiStepHorizontal-disabled"
   data-step-status="disabled"
   title="Step 1 is disabled"
@@ -183,6 +190,7 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status disabled overrides the passed status 1`] = `
 <button
+  aria-disabled="true"
   class="euiStepHorizontal emotion-euiStepHorizontal-disabled"
   data-step-status="disabled"
   disabled=""
@@ -211,6 +219,7 @@ exports[`EuiStepHorizontal props status disabled overrides the passed status 1`]
 
 exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1 is incomplete"
@@ -238,6 +247,7 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="loading"
   title="Step 1 is loading"
@@ -264,6 +274,7 @@ exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="warning"
   title="Step 1 has warnings"
@@ -286,6 +297,7 @@ exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 
 exports[`EuiStepHorizontal props step 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 5 is incomplete"
@@ -313,6 +325,7 @@ exports[`EuiStepHorizontal props step 1`] = `
 
 exports[`EuiStepHorizontal props title 1`] = `
 <button
+  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1: First step is incomplete"
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index 91130afcca5..bbcce6be219 100644
--- a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-disabled="false"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="complete"
       title="Step 1: Completed Step 1 is complete"
@@ -36,6 +37,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-disabled="false"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="current"
       title="Current step 2: Selected Step 2"
@@ -66,6 +68,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-disabled="false"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="incomplete"
       title="Step 3: Incomplete Step 3 is incomplete"
@@ -96,6 +99,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
+      aria-disabled="true"
       class="euiStepHorizontal emotion-euiStepHorizontal-disabled"
       data-step-status="disabled"
       title="Step 4: Disabled Step 4 is disabled"
diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx
index 22df29307fd..c78cfd659ab 100644
--- a/src/components/steps/step_horizontal.tsx
+++ b/src/components/steps/step_horizontal.tsx
@@ -97,6 +97,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
     loading: useI18nLoadingStep({ number: step, title }),
   };
   const titleAttr = titleAttrsMap[status || 'step'];
+  const buttonAriaDisabled = status === 'disabled';
 
   const onStepClick = (
     event: ReactMouseEvent<HTMLButtonElement, MouseEvent>
@@ -106,6 +107,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
 
   return (
     <button
+      aria-disabled={buttonAriaDisabled}
       className={classes}
       title={titleAttr}
       onClick={onStepClick}

From 8cdee7fb8f971db0b74101a50364e7c8246dd2a0 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 18 Apr 2024 16:17:50 -0500
Subject: [PATCH 2/3] Added changelog and inlined aria-disabled logic.

---
 changelogs/upcoming/7699.md                                    | 3 +++
 .../steps/__snapshots__/steps_horizontal.test.tsx.snap         | 3 ---
 src/components/steps/step_horizontal.tsx                       | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)
 create mode 100644 changelogs/upcoming/7699.md

diff --git a/changelogs/upcoming/7699.md b/changelogs/upcoming/7699.md
new file mode 100644
index 00000000000..a7409f235e1
--- /dev/null
+++ b/changelogs/upcoming/7699.md
@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Added `aria-disabled` attribute to `EuiHorizontalSteps` when status is "disabled"
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index bbcce6be219..346c7965a05 100644
--- a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -10,7 +10,6 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
-      aria-disabled="false"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="complete"
       title="Step 1: Completed Step 1 is complete"
@@ -37,7 +36,6 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
-      aria-disabled="false"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="current"
       title="Current step 2: Selected Step 2"
@@ -68,7 +66,6 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     class="euiStepsHorizontal__item emotion-euiStepsHorizontal__item"
   >
     <button
-      aria-disabled="false"
       class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
       data-step-status="incomplete"
       title="Step 3: Incomplete Step 3 is incomplete"
diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx
index c78cfd659ab..e420d7bcd64 100644
--- a/src/components/steps/step_horizontal.tsx
+++ b/src/components/steps/step_horizontal.tsx
@@ -97,7 +97,6 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
     loading: useI18nLoadingStep({ number: step, title }),
   };
   const titleAttr = titleAttrsMap[status || 'step'];
-  const buttonAriaDisabled = status === 'disabled';
 
   const onStepClick = (
     event: ReactMouseEvent<HTMLButtonElement, MouseEvent>
@@ -107,7 +106,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
 
   return (
     <button
-      aria-disabled={buttonAriaDisabled}
+      aria-disabled={status === 'disabled' ? true : undefined}
       className={classes}
       title={titleAttr}
       onClick={onStepClick}

From fe5cdfde70653aae04ed00c64863dd9f27beb727 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 18 Apr 2024 16:19:34 -0500
Subject: [PATCH 3/3] Updated individual step snapshots.

---
 .../steps/__snapshots__/step_horizontal.test.tsx.snap | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index cbd612bc919..d2ae8c45654 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`EuiStepHorizontal is rendered 1`] = `
 <button
-  aria-disabled="false"
   aria-label="aria-label"
   class="euiStepHorizontal testClass1 testClass2 emotion-euiStepHorizontal-enabled-euiTestCss"
   data-step-status="incomplete"
@@ -32,7 +31,6 @@ exports[`EuiStepHorizontal is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size m is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1 is incomplete"
@@ -60,7 +58,6 @@ exports[`EuiStepHorizontal props size m is rendered 1`] = `
 
 exports[`EuiStepHorizontal props size s is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1 is incomplete"
@@ -88,7 +85,6 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="complete"
   title="Step 1 is complete"
@@ -111,7 +107,6 @@ exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status current is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="current"
   title="Current step is 1"
@@ -139,7 +134,6 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="danger"
   title="Step 1 has errors"
@@ -219,7 +213,6 @@ exports[`EuiStepHorizontal props status disabled overrides the passed status 1`]
 
 exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1 is incomplete"
@@ -247,7 +240,6 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="loading"
   title="Step 1 is loading"
@@ -274,7 +266,6 @@ exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="warning"
   title="Step 1 has warnings"
@@ -297,7 +288,6 @@ exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 
 exports[`EuiStepHorizontal props step 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 5 is incomplete"
@@ -325,7 +315,6 @@ exports[`EuiStepHorizontal props step 1`] = `
 
 exports[`EuiStepHorizontal props title 1`] = `
 <button
-  aria-disabled="false"
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
   data-step-status="incomplete"
   title="Step 1: First step is incomplete"