Feature request: ARIA attributes on individual slides

[thany]

Please add the following attributes to each individual slide:

• role="group"
• aria-label="slide X of X"

Source: https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp See Key elements of an accessible carousel, point 5.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Adding the role should be easy enough. The label could be achieved by expecting a function that returns a proper label, so:

<SwipeableView slideAriaLabel={index => `Slide ${index} of ${totalSlides}`}>

Or something like that.

Current Behavior

An example of how a slide currently appears in the DOM:

<div aria-hidden="false">

Which is good 💪🏻, but could be better. With these additions, it could become, for example:

<div role="group" aria-hidden="false" aria-label="slide 2 of 5">

Isn't that much better? 🙏🏻

Context

We're building a new website taking a11y into account whereever we can. As sparingly as we use carousels, where we do need them, we want them as accessible as possible. They're difficult enough as they are for folks who need assistive tech.

Your Environment

Tech	Version
react-swipeable-views	0.14.0
React	18.2.0
Next.js	13.2.4
Vite	4.2.1