Skip to content

[Carousel] Accessibility improvments #2930

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

renow-luxembourg
Copy link
Contributor

@renow-luxembourg renow-luxembourg commented Mar 31, 2025

Feature Request

Is your feature request related to a problem? Please describe.
In a recent accessibility audit, several issues were found in the carousel component :

  • For people using vocalization tool (NVDA, JAWS, VoiceOver, etc.), each slide content is vocalized twice due to the 2 aria-live attributes.
  • Controls and Indicators should come before the slides content in the tabulation order
  • Indicator are not initially focusable, we have to add the tabindex attribute before starting the carousel (mostly in carousel without autoplay)
  • On each slide there are 2 attributes that give the accessible name : aria-label and aria-labelledby, some vocalization tool read both and it's a bit annoying
  • When the carousel controls buttons only contain an icon, it's a nice-to-have to allow the user to display to know what this button is about using a title attribute
  • Carousel indicator item should be actionable using the spacebar. The easy way to do it is to use the native button element.
Q                       A
Fixed Issues?
Patch: Bug Fix?
Minor: New Feature? Yes
Major: Breaking Change?
Tests Added + Pass? Yes
Documentation Provided Yes (code comments and or markdown)
Any Dependency Changes?
License Apache License, Version 2.0

Environment
AEM 6.5
Core Components version 2.28.0

Documentation
We have to implement the properties specified in the design pattern of carousel and tab :

Copy link

codecov bot commented Mar 31, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.17%. Comparing base (4bcb288) to head (61bbcc2).

Additional details and impacted files
@@            Coverage Diff            @@
##               main    #2930   +/-   ##
=========================================
  Coverage     87.17%   87.17%           
  Complexity     2703     2703           
=========================================
  Files           235      235           
  Lines          7210     7210           
  Branches       1103     1103           
=========================================
  Hits           6285     6285           
  Misses          366      366           
  Partials        559      559           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link

Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant