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

Bug: "ARIA roles used must conform to valid values" in button #1561

Open
cseas opened this issue Apr 19, 2022 · 0 comments
Open

Bug: "ARIA roles used must conform to valid values" in button #1561

cseas opened this issue Apr 19, 2022 · 0 comments

Comments

@cseas
Copy link
Contributor

cseas commented Apr 19, 2022

Use Case

The below error shows up in the browser (Microsoft Edge) when we check the Elements tab in developer tools.

Screenshot 2022-04-19 at 10 10 56 AM

It's clear that role is being used as a custom Input to the <ht-button> component.

This is wrong, because role is a valid HTML attribute and should never be used as a custom Input:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

The possible values for the role Input don't conform to valid values of the role HTML attribute and that's why the browser is showing the error.

https://github.com/hypertrace/hypertrace-ui/blob/main/projects/components/src/button/button.ts#L3-L8

Proposal

The role Input should be refactored to something else, e.g, variant. The role HTML attribute is only used for accessibility purposes and shouldn't affect the appearance of the component.

Questions to address (if any)

N/A

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant