Implement ADA / keyboard navigation features

[weotch]

• Add live region
• Keep tab focus within the visible slides
  • Should we handle Consider Adding "Active" Class Identifier to Current Card #57 via this? Like since that also has to do with answering "what is currently visible?"
  • This should be done via math on existing props rather than IntersectionObserver
• Disable autoplay when using keyboard
• Add aria-hidden to cloned slides #59
• Add aria-hidden to any slides that aren't currently visible

Notes:

• https://www.w3.org/WAI/tutorials/carousels/working-example/
• https://www.w3.org/WAI/tutorials/carousels/full-code/
• https://lsnrae.medium.com/if-you-must-use-a-carousel-make-it-accessible-977afd0173f4
  • This advocates for ditching a lot of the carousel stuff for keyboard usage, which makes sense to me. Like just tab to advance through the slides.
• https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp
• https://dubbot.com/dubblog/2021/accessible-carousel.html

[sjstark]

Should also pause autoplay features as mentioned in #28 (comment)

[weotch]

Running into an issue with the tabindex order since I'm using css order. I tried actually re-ordering the DOM elements during dragging to fix, but I saw some very weird behavior, like the contents of slides getting showing up in siblings. I think this would wreak havoc on slides that played videos too ...

I think I need to intercept the tab keypress, which feels gross ...

[weotch]

Ok, can I just disable looping when using the keyboard, that's the root of the issue.... can this be toggled at runtime ...

[weotch]

Yeah, I think disabling looping is gonna pan out for this.