[a11y]: Tab component reporting violation of 2.5.8 Minimum Target Size

[nkn2022]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.57.0

React version

17.0.2

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No

Description

https://react.carbondesignsystem.com/?path=/story/components-tabs--playground
Run the tool with 7.3 requirement.
See the violation on

<button title="Remove Dashboard tab" class="cds--visually-hidden cds--tabs__nav-item--close-icon--selected" aria-hidden="true" tabindex="-1" type="button">

IBM 2.5.8 Target Size (Minimum)
Undersized target "button" does not have sufficient spacing of 12 CSS pixels from another target "button"

WCAG 2.1 Violation

BM 2.5.8 Target Size (Minimum)

Reproduction/example

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

Steps to reproduce

Run the tool with IBM Equal Access Accessibility Checker (7.3)

Suggested Severity

None

Code of Conduct

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

[philljenkins]

See Slack thread at
https://ibm-studios.slack.com/archives/C036P1CTN/p1729783744858049?thread_ts=1729618524.885879&cid=C036P1CTN

[tay1orjones]

There's some more context around this in #16033 when the html for dismissable tabs was refactored.

@alisonjoseph in that issue, @mbgower pointed out that this button is always in the DOM. Do you recall why we left it that way? What would be the repercussions of fully removing the button from the DOM when the tab is not dismissable?

1. you've implemented this not just on the dismissible tabs, but on ALL the version of Tabs in storybook (default, contained, etc). That shouldn't be happening; it should only exist on the dismissible ones. In the screenshot, you can see that the Jaws red focus indicator is on a small region to the upper right of the Monitoring tab which has nothing there visually. It is announcing this as "close tab button"

Beyond this, @philljenkins based on your testing the button isn't announced, clickable, or able to be invoked via touch/tap. It's fully hidden from the users view and interaction. In many ways this feels like a false positive to me. What do you think?

[philljenkins]

@tay1orjones We confirmed that clipped it is 0, 0, 0, 0. Now the Checker rule will ignore it as "valid" as part of #2070. The next release of the Checker rule set will have this fix. But Carbon could do "better" use display:"none" if you really don't want those tiny unused close buttons to be ignored.

We also reviewed the "dismissable tab" example and the Checker correctly flags a "Needs review" to confirm that the sizes of the overlapped touch target of both the close button on top of the tab button are sufficient. They are because the tab size button is large enough even with the close button on top of it..

[tay1orjones]

Nice, thanks for the clarity! Related #17149

[nkn2022]

Thanks for the clarifications.