[a11y]: Dismissible tabs component issues

[guidari]

Package

@carbon/react

Browser

No response

Package version

v1.35.0

React version

No response

Description

One minor accessibility issues with dismissible tabs.

• labelling

Labeling on dismissible tabs needs to be revamped.
For a mouse user, there are multiple targets inside each tab and they have separate names.

For keyboard, there is only one focus point, so the two labels are concatenated into one message that doesn't make a lot of sense to a screen reader (e.g., "[tab name] close tab")

A better description would be added with aria-describedby, so that the user heard "tab label, press Esc to dismiss'
BTW, we've previously talked about giving these examples 'real' names instead of "tab label".

WCAG 2.1 Violation

Name, Role, Value

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable

Steps to reproduce

Labelling

1. Open https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable
2. With mouse, hover over the x of the dismissible tabs to confirm they are called "Close tab"
3. With keyboard, tab into tablist and confirm that there is only one tabstop (i.e., the x is not not separately reachable by keyboard)
4. With Inspect, confirm that the name of the tabitem is a concatenation of the name of the tabitem and the name of the x

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

BTW, we've previously talked about giving these examples 'real' names instead of "tab label".

I agree, lets do it. There's some examples of what we could use on the usage page, "IP Firewall", "User agent blocking", etc.