Carousel Accessibility - Expecting ARIA child role to be added: option

[smykes]

• components: Carousel
• reactstrap version ^7.1.0
• import method es
• bootstrap version ^4.2.1

What is happening?

When creating a new carousel instance a role of listbox is added to the div.carousel-inner element. This role requires at least one child role of 'option'. See MDN documentation

What should be happening?

Instead of creating a child of
<div class="carousel-item">
the correct structure should be:
<div class="carousel-item" role="option">

Steps to reproduce issue

1. Create a carousel
2. Make sure it has at least one slide

Error message in console

Lighthouse Audit message: Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions

Code

Example Code (Examine Source)

[gergely-nagy]

We should remove role="listbox" from carousels (like Bootstrap did in v4.0.0-beta).
I will open a PR to fix the issue!

[Mikeks81]

I know this is following suit with what Bootstrap has done but could we allow attributes to blindly pass through to the elements if the user still would like to add things including aria options, roles, id's and classes ?