Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y]: ClickableTile component tabIndex value is hardcoded #17867

Open
1 of 2 tasks
anish-mm-05 opened this issue Oct 24, 2024 · 2 comments
Open
1 of 2 tasks

[a11y]: ClickableTile component tabIndex value is hardcoded #17867

anish-mm-05 opened this issue Oct 24, 2024 · 2 comments

Comments

@anish-mm-05
Copy link

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"

Image
Image

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

@tay1orjones
Copy link
Member

This has been part of tile since the component's inception 7 years ago d2d64a2

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
Copy link
Member

tay1orjones commented Oct 24, 2024

@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.

Image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ⏱ Backlog
Development

No branches or pull requests

3 participants