Skip to content

[aria-*] attributes do not match their roles #1

@thiervoj

Description

@thiervoj

Hey, thanks for this lib !

I tried using it on a project and launched a Lighthouse report with the following results in the Accessibility section :

[aria-] attributes do not match their roles
Each ARIA role supports a specific subset of aria-
attributes. Mismatching these invalidates the aria-* attributes. Learn how to match ARIA attributes to their roles.

After looking up online, I found out that the aria-setsize and aria-posinset are not allowed on elements with a role="group" (as you can see here)
I ended up making my own modified version of your library to comply to accessibility standards by removing the lines related to these attributes.

Another thing worth mentioning (it is another issue IMO) is the following message from the Lighthouse report as well :

[aria-hidden="true"] elements contain focusable descendents

The elements in my Carousel have a button inside of them, and this attributes creates a conflict because the button is focusable and the card is visible (my carousel shows 3 elements at the same time). But even with the card being visible the aria-hidden attribute is set to true.
An easy way to fix this would be either to remove this attribute totally (I don't think there is any real benefits of having it on carousel items), or to use Embla's slidesInView method to apply the attribute correctly based on visibility in the viewport.

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