[go: up one dir, main page]

Skip to content

Use aria-label for links only

What does this MR do and why?

Use aria-label for links only

Add aria-label only when the CI icon is a link. When it is a span and has no text, use aria-label content to render text visible only to screen users.

Changelog: fixed

References

Screenshots or screen recordings

Before After
Screenshot_2025-09-08_at_14.05.44 Screenshot_2025-09-08_at_14.05.01
Screenshot_2025-10-13_at_13.23.40 Screenshot_2025-10-13_at_13.16.14
Storybook test results after changes
Screenshot_2025-10-13_at_13.20.49

How to set up and validate locally

  1. Checkout the branch
  2. Run yarn storybook:start
  3. When the storybook is build, check out http://localhost:6006/?path=/story/vue-shared-ci-icon-ci-icon--no-link
  4. Open Accessibility panel. There should be no violation found.
  5. Visit any pipeline view on your GDK and verify the icons are spans without an aria-label and include a non-visible span with alternative text.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #562329 (closed)

Edited by Paulina Sedlak-Jakubowska

Merge request reports

Loading