carbon
carbon copied to clipboard
Sage
Accessibility issue: screen readers are unable to read filter's number on Carbon badges
Description
Carbon Badges has an accessibility issue of Info and Relationships, screen readers are unable to read filter's number. When using a badge with a number this information is not relayed to screen reader users.
All information that is presented visually, should be available in the code and related to screen reader users. This is a failure of 1.3.1 Info and Relationships (A) and is a critical issue. This affects screen reader users and is found on Filter on Employees.
Reproduction
https://carbon.sage.com/v/154.3.2/index.html?path=/docs/badge--docs
Steps to reproduce
Go to the page https://carbon.sage.com/v/154.3.2/index.html?path=/docs/badge--docs. Enable a screenreader, e.g. on Windows it's a Narrator. Focus on any element that contains a badge, use tab button on a keyboard to switch focus to the badge. The screen reader reads only the name "Filter".
JIRA ticket numbers (Sage only)
SKPU-13720
Suggested solution
Add a wrapper with a specific role and aria-label that contains the name of the badge button and its counter value.
Carbon version
154.3.2
React version
v17
Design tokens version
No response
Relevant browsers
Chrome
Relevant OSs
Windows
Additional context
No response
Confidentiality
- [x] I confirm there is no confidential or commercially sensitive information included.
:tada: This issue has been resolved in version 154.12.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
