Remove `aria-hidden` from carousel item

[Sicria]

In a carousel, four list items are shown at the desktop breakpoint, and four are hidden offscreen. Screen readers incorrectly tell their users that this is a list of four items because offscreen items are incorrectly hidden with aria-hidden="true".

It is possible to overwrite this prop to allow not hiding the items if required.

[PhongVu07]

+1 for this, I'm having so much problem with the audit accessibility score

[phiberber]

Having the same problem here. It can be solved easily by just adding a tabindex="-1".

[robertveloso]

Hi, can you show me an example of this tabIndex workarround?

[phiberber]

I wasn't talking about a workaround. I was saying that someone could create a pull request just by adding this parameter. If you want a trick to solve this, I thought of something:

const carouselItems = Array.from(document.getElementsByClassName("react-multi-carousel-item")) carouselItems.forEach((element) => element.setAttribute("tab-index", -1))

It is an ugly hack but might work. But you need to make sure that it runs before Lighthouse checks for the carousel-item element.

[LanguageXange]

any updates on this? I'm getting low accessibility scores due to this as well. ( Other than setting tab index to -1, is there any other solutions?)

[oluSammy]

Any solution to this pls