Accessibility Improvements

[stephenhmarsh]

Hi @desandro

In this PR I'm suggesting changes to address various accessibility concerns.

• Address Not accessible when used as a content slider #776 by showing/hiding focusable elements inside a cell based on if the cell is selected.
• Set aria-live assertive to announce content as slides are changed, and handle related auto-play issues
  Accessibility bug - Screen reader crashes after clicking back or next #1041 and Carousel accessibility #1096
• Make Prev/Next buttons more explicit
• Allow arrow key navigation to continue even when focused on an element inside a slide.

You can see an example here: https://5ef272f9ab690c0022ef30ab-chkmlbhrup.chromatic.com/?path=/story/carousel-carousel--carousel

[desandro]

Thanks for submitting this PR! I am evaluating accessibility improvements now. Good timing. I'll be taking a look.

In the meantime - Can you try to adhere to code style? Run npm run lint for linting.

[stephenhmarsh]

Oops, thanks for pointing that out. Linted.

[vasanthangel4]

hi all i have updated the above code still accessibility is not working in ios devices. but it is working fine in Android . please let me know if any specific changes required to add.

[stephenhmarsh]

hi @vasanthangel4 could you tell me which things are not working as expected on iOS devices and which browser(s)? (Safari?)

[vasanthangel4]

Hi @stephenhmarsh: when we enabling the voiceover and accessibility carousel scrolling not working with Three-finger triple tap. Safari browser in ios device. android application is working fine. please let us know if you have solution. i have applied accessibility improvement PR, but it is not helping. please let me know if any vanila js fix for this issue.

[stephenhmarsh]

Hi @vasanthangel4 - I think I see what you mean. With VoiceOver on, the carousel doesn't respond to swipe gestures to change/navigate the slides, or even scroll the container. I do think that is a problem, however it appears to be an existing issue with previous releases of Flickity, and not a problem that was introduced by this branch. If that's the case, you might want to make a separate GitHub issue to address iOS VoiceOver gestures separately? It's something I will try to learn about, but in the meantime this branch only fixes the other issues.

[vasanthangel4]

Thanks. Yes I have raised as new issue. Please let me know if you find any fix for this.

[legendofmi]

@desandro Any clue when this will be merged? I use a carousel where each cell is a linked image. Currently tabbing is selecting all images in the carousel (including the ones on hidden slides). It would be great if only the active/visible slide elements would be “tabbable” when navigating with a keyboard.

[aravind-tatcha]

@stephenhmarsh @desandro Any idea when these fixes will be merged?