Improve accessibility for the carousel plugin

[bassettsj]

I do like that the carousel is discouraged entirely if you care at all about accessibility, which you should, but if bootstrap is going to still support the thing, can we look at including the changes from Paypal's a11y bootstrap plugin?

Carousel

1.Prevent automatic cycling of the carousel.
2. Prevent wrapping to first item on next button navigation or wrapping to last item on previous button navigation.
3. Add role of listbox for carousel div.
4. Add ARIA role of option, aria-selected, and tabIndex for individual carousel items.
5. Add role of button for previous and next anchor links and a hidden screen reader text of "Previous" and "Next".
6. Add keydown event listener for the carousel to work with keyboard.
7. Dynamically change tabIndex and aria-selected property of active and inactive tabs.
8. Remove display:none and hide (offscreen) of the inactive carousel items, so that screen readers can count the total number of carousel items.

[cvrebert]

The interval option can already be used to achieve (1) and we're probably unlikely to change the default to non-cycling.

[cvrebert]

(6) is covered by #13185.

[dgibson666]

Seconded - I got dinged for lacking 508 compliance for bootstrap's carousel as well and would rather see these fixed here than use Paypal's plugin and get off the upgrade path.

[cvrebert]

I think setting wrap: false in the Carousel options covers (2)?

[kymar]

For (8) you could try visibility:hidden as well, this will hide the content but still allows screen readers to read it, this only problem with this is that the element is laid out as though it were visible

[StommePoes]

@kymar no, visibility: hidden acts the same as display: none: not rendered in the DOM, not read out.

But pulling something offscreen (if RTL styles are never an issue) or using the clip property could work, among other methods.

I've not used listbox/option roles in carousels because it's pretty much a list of boxes that hide/show based on a control being hit, rather than a sort of dropdown where you choose an option to make a selection(my company's clients' carousels are mostly just promotional images, not selections like a photo gallery of thumbnails might be). So to that end I've been using tabpanel/tab roles, aria-controls for the controls, and aria-selected on the control pressed or the one referencing the content showing.

[hnrch02]

The remaining (4), (7) and (8) are all covered by #14097.

[mdo]

What's the status of this?

/cc @patrickhlauke

[juthilo]

Is there anything in here not covered by #14097 or can we close this/punt to v4 as well?

[jongund]

Please review the latest version of the PayPal Accessibility Plugin Carousel Accessibility features:

See example that also outlines the feautres:
http://jongund.github.io/aria-examples/bootstrap-carousel/carousel-3.html

Some of the main features:

1. Use ARIA tabpanel patterns
2. Keyboard support ('space bar') for previous next buttons
3. Pause control for screen readers in virtual mode at beginning of page
4. High contrast overlays to improve text readability when carousel has hover or focus
5. Auto stopping of carousel by default
6. Keyboard focus styling

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team