[EuiStepsHorizontal] Added aria-disabled attribute when status is "…

…disabled" (elastic#7699)
mgadewoll · May 3, 2024 · c8f4f36 · c8f4f36
1 parent 44931b0
commit c8f4f36
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/changelogs/upcoming/7699.md 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__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -156,6 +156,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 +184,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=""

diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -96,6 +96,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
@@ -106,6 +106,7 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
 
   return (
     <button
+      aria-disabled={status === 'disabled' ? true : undefined}
       className={classes}
       title={titleAttr}
       onClick={onStepClick}