-
Notifications
You must be signed in to change notification settings - Fork 0
Description
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.