Skip to content

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

@cseas

Description

@cseas

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions