bugfix/role-update Remove unnecessary role from Slides.jsx

[bluSCALE4]

Fix for #112

[mrbinky3000]

Thanks! I was actually making a PR to do this and a few other things. You beat me to it!

[mrbinky3000]

Wait... removing role="listbox" breaks aria rules requiring that interactive elements have a role. Our carousel responds to keyboard events, so it requires a role.

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md

This might be fine for bootstrap, but we need a role. It might be better to add the aria-option tag to the Slide component? Not sure about that. Further research is needed.

[mrbinky3000]

Removing this breaks the following Aria rule:
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md

This element catches keyboard events so people can use the keyboard to the previous or next slide.

[bluSCALE4]

As mentioned on the bootstrap thread, listbox/option is more akin to a select box so informing a screen reader that this widget is a select box does more harm than good. Unfortunately, role="widget" isn't valid here so my thought is could we just squelch the error entirely? The example also referenced in the Bootstrap thread, https://www.w3.org/WAI/tutorials/carousels/working-example/, doesn't assign any roles in the element with listeners.

[mrbinky3000]

Thanks for the added info.

I'm still discussing this update with our accessibility consultants. It's a busy time for online retail right now ;-) 🎄 🎁. I will definitely get to this as soon as possible.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mrbinky3000]

Re-opening. Still working on this.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tim-steele]

@bluSCALE4 we have read a lot of information, and talked to some internal accessibility resources.

There does not seem to be a "best" option for Carousel behavior using Aria. People have made an argument that you should use listbox, and that is what is being used in other accessibility components. People have made an argument that tablist is a better option. Others have made the argument that you can use marquee. There are reasons for and against each.

What is important is the use of the aria role attribute. This lets screen readers know that it is an interactive element. So we do want to keep the attribute. We would be open to discussing whether there is a better role other than listbox, but we definitely don't want to remove the aria role completely.