Skip to content

Commit

Permalink
fix: [Obs Synthetics > Test Run Detail][SCREEN READER] Icons and repe…
Browse files Browse the repository at this point in the history
…ated controls need unique accessible labels: 0014 (elastic#187998)

Closes: elastic/observability-dev#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">
  • Loading branch information
alexwizp authored Jul 10, 2024
1 parent 9fc0192 commit c8d7b38
Showing 1 changed file with 18 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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',
}
);

0 comments on commit c8d7b38

Please sign in to comment.