[a11y]: Disabled icon button doesn't show the tooltip - Githubissues

carbon-design-system / carbon

A design system built by IBM

https://www.carbondesignsystem.com

Apache License 2.0

7.52k stars 1.75k forks source link

[a11y]: Disabled icon button doesn't show the tooltip #16475

Closed kromakollision closed 2 weeks ago

kromakollision commented 2 weeks ago

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.55.0

React version

18.2.0

Automated testing tool and ruleset

none

Assistive technology

No response

Description

An icon-only button has a mandatory tooltip, for accessiblity. However, this tooltip doesn't show up when the button is disabled.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-9lactv?file=src%2FApp.jsx

Steps to reproduce

Add disabled to <Button />

Code of Conduct

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

alisonjoseph commented 2 weeks ago

This is working as intended as you can't focus on a disabled button so there would be no way to activate a tooltip.

Disabled buttons are intentionally removed from the focus order, according to the spec. Therefore, any information revealed on hover cannot be surfaced on focus, resulting in an accessibility failure.

Related issue with more details https://github.com/carbon-design-system/carbon-website/issues/3758