search

ismail9k / vue3-carousel

A highly customizable, lightweight Vue 3 carousel component for your next awesome project.
https://vue3-carousel.ismail9k.com/
MIT License
741 stars 174 forks source link

Wrong use of aria-hidden #346

Closed mp-horm closed 1 day ago

mp-horm commented 1 year ago

Describe the bug Carousel items are marked as aria-hidden=true when not visible. Aria-hidden should only be applied to non-interactive elements. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden The attribute causes WCAG errors when using focusable elements (buttons, inputs, links) in carousel items.

To Reproduce Steps to reproduce the behavior:

  1. Render a carousel with two items, one of them using a focusable element (ie a button)
  2. Click on the non-button item
  3. Copy page html to https://validator.w3.org/#validate_by_input
  4. See error related to https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/

Expected behavior No accessibility errors

kwilfert commented 1 year ago

I second this. During my migration to vue 3, its compatibility mode keeps logging the aria-hidden property's false-value.

Tofandel commented 4 days ago

I'm also noting that the carousel has a tabindex="0" so it's focusable, but then it does nothing with the focus (like using arrow keys to slide prev and next)