Base: Accessible Carousel

[JulesKhong]

Description

Similar to the Card Grid component, we need a carousel component that we can pass different cards to, and have them display in an accessible carousel.

Figma design

Any block should be able to extend the Carousel component, and pass in a different card style so this is reusable throughout the site, and not tied to one specific block.

Here's one approach of this we used on CSIS. It's not optimized for accessibility.
https://github.com/thinkshout/csis/blob/main/web/themes/custom/ts_csis/templates/_includes/list--flow.html.twig

Here's an example of a template passing in the data to leverage the template:
https://github.com/thinkshout/csis/blob/main/web/themes/custom/ts_csis/templates/block/person-list-block.html.twig

[jordankaiser]

@JulesKhong @jamacon36

First, I wanted to check what the timeline was for this?

Second, I think we'll want to use a library for this (right?). While I don't have time to dive too into this right now I did want to get that conversation rolling.

Things I'm looking for in a carousel lib.

• Accessibility
• Active maintenance
• Functionality (beyond bare bones would be nice).

James asked if I had a recommendation and it was going to be Splide because of the thought they put into accessibility. However it hasn't had a release in over a year which makes me hesitant.

There is also slick and its accessible fork which I think we're all familiar with.

Another one is swiperjs. I've used this before and it does work pretty well. Lots of options. I saw this GH issue on accessibility. It seems like they've done some work there. Might be worth testing and seeing what issues it has and if we can fix them ourselves. I like this one because it's actively maintained, very popular (meaning well tested), and has a lot of functionality.

Let me know if you'd like me to dig around some more or explore any of these options more, thanks!

[jordankaiser]

Another option, haven't looked into this too much yet.

https://www.embla-carousel.com/

[jordankaiser]

Another one.

https://github.com/metafizzy/flickity

License is something to look at for this one.