From c8d7b382115c80b759beded0e982606a9e23d0a3 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 10 Jul 2024 20:35:40 +0300
Subject: [PATCH] fix: [Obs Synthetics > Test Run Detail][SCREEN READER] Icons
 and repeated controls need unique accessible labels: 0014 (#187998)

Closes: https://github.com/elastic/observability-dev/issues/3652

## Description:

Observability has a lot of icons that are used for controls and table
row actions. These icons often have the same aria-label repeated across
rows. While this meets the letter of SC 1.3.1: Info and Relationships,
the repeated generic labels do not usually answer question what users
are editing, or what users are deleting. We want to provide clear labels
for each row to make the implicit relationships sighted users depend on,
explicit for screen reader users.

## Steps to recreate:

1. Open the Inventory view
2. Turn on a screen reader
3. Traverse through the first module. Verify you hear "Previous" and
"Next" but not previous or next what?

## What was changed?:

1. `aria-label` attribute was added for mentioned buttons

## Screen

<img width="1287" alt="image"
src="https://github.com/elastic/kibana/assets/20072247/b3e97da3-6e60-43eb-ba79-5b00196f4293">
---
 .../components/step_number_nav.tsx            | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_run_details/components/step_number_nav.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_run_details/components/step_number_nav.tsx
index 6a4b4ef710e798..8fb3a71f9c5f18 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_run_details/components/step_number_nav.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_run_details/components/step_number_nav.tsx
@@ -36,6 +36,7 @@ export const StepNumberNav = ({
               onClick={handlePreviousStep}
               disabled={!hasPreviousStep}
               iconType="arrowLeft"
+              aria-label={PREVIOUS_STEP_BUTTON_ARIA_LABEL}
             >
               {PREVIOUS_STEP_BUTTON_TEXT}
             </EuiButtonEmpty>
@@ -59,6 +60,7 @@ export const StepNumberNav = ({
               disabled={!hasNextStep}
               iconType="arrowRight"
               iconSide="right"
+              aria-label={NEXT_STEP_BUTTON_ARIA_LABEL}
             >
               {NEXT_STEP_BUTTON_TEXT}
             </EuiButtonEmpty>
@@ -69,16 +71,30 @@ export const StepNumberNav = ({
   );
 };
 
-export const PREVIOUS_STEP_BUTTON_TEXT = i18n.translate(
+const PREVIOUS_STEP_BUTTON_TEXT = i18n.translate(
   'xpack.synthetics.synthetics.stepDetail.previousStepButtonText',
   {
     defaultMessage: 'Previous',
   }
 );
 
-export const NEXT_STEP_BUTTON_TEXT = i18n.translate(
+const PREVIOUS_STEP_BUTTON_ARIA_LABEL = i18n.translate(
+  'xpack.synthetics.synthetics.stepDetail.previousStepButtonAriaLabel',
+  {
+    defaultMessage: 'Previous step',
+  }
+);
+
+const NEXT_STEP_BUTTON_TEXT = i18n.translate(
   'xpack.synthetics.synthetics.stepDetail.nextStepButtonText',
   {
     defaultMessage: 'Next',
   }
 );
+
+const NEXT_STEP_BUTTON_ARIA_LABEL = i18n.translate(
+  'xpack.synthetics.synthetics.stepDetail.nextStepButtonAriaLabel',
+  {
+    defaultMessage: 'Next step',
+  }
+);