Carousel accessibility improvements

[ffoodd]

Carousels might be improved, or at least it worths the try:

• WAI ARIA carousel best practices
• WAI Carousel Tutorial

Required

• [ ] Add a play/pause button
• [ ] Focus the selected item
• [ ] Disable prev/next controls when data-bs-wrap="false" and stopped at one end

Nice to have

• [ ] Progressive enhancement: adding prev/next buttons and indicators through JS
  • maybe at least drop them when JS is disabled?
• [ ] Announce the current item using live region: that seems a bit too much IMHO, but hey, suggesting
• [x] Pause on hover/focus
• [ ] Hide transitioning elements from ATs: not quite sure of the current behaviour though, might already be the case.

Docs:

• [ ] Add link to WAI Tutorial, maybe? https://www.w3.org/WAI/tutorials/carousels/

Relates to #22549

[patrickhlauke]

note that autoplaying carousels already pause/stop on hover (and, to an extent, when tapped on a touchscreen, though i seem to remember there they restart again after a long period of inactivity)

hide transitioning elements from ATs

non-visible slides are display:none, so hidden. do you mean hiding them in the few microseconds where they're transitioning?

i'd also add better/more visible focus indication on prev/next (ideally just for keyboard users - that'd require something like whatinput, which we decided against ages ago - or using the :focus-visible stuff at least for future compatibility, and/or with polyfill)

[patrickhlauke]

xref https://github.com/twbs/bootstrap/issues/29494 https://github.com/twbs/bootstrap/issues/22549

[patrickhlauke]

see also https://github.com/twbs/bootstrap/pull/32661