[a11y]: ClickableTile component tabIndex value is hardcoded

[anish-mm-05]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.40.0

React version

v18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

tabIndex value for the ClickableTile component is always set to 0, Since this value is hardcoded it creates an accessibility issue like this "The tabbable element's role 'none' is not a widget role"

WCAG 2.1 Violation

No response

Reproduction/example

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

Steps to reproduce

1. Open the example link (https://jvmipoxlxygithub-wngm--5173--34c588ed.local-credentialless.webcontainer.io/)
2. Run IBM Equal Access Accessibility Checker

Suggested Severity

None

Code of Conduct

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

[tay1orjones]

This has been part of tile since the component's inception 7 years ago https://github.com/carbon-design-system/carbon/commit/d2d64a2c005e00ef924db36462f90c04d57b00dd

My understanding is the tabindex is set to zero to ensure the tile gets focus. When an anchor tag doesn't have an href, focus does not move to the anchor tag, it's skipped. This effectively means the tile is a placeholder link

@mbgower Would adding role='button' be a reasonable course of action here? Or is this pointing to needing to reconsider the markup of the tiles that have this?

[tay1orjones]

@anish-mm-05 is there a reason why you're using ClickableTile instead of SelectableTile? If you provide href to ClickableTile as intended there are no violations. Based on your screenshot it seems like your usecase would call for SelectableTile over ClickableTile.

It is odd that ClickableTile's href isn't a required prop. Maybe that's the real solution here @mbgower?