react-swipeable-views Attribute aria-hidden="true" on unfocused tabs is lowering Lighthouse accessibility score

Attribute aria-hidden="true" on unfocused tabs is lowering Lighthouse accessibility score

Open jason-dark opened this issue 3 years ago • 6 comments

When running Lighthouse accessibility tests, points are being deducted for the non-focused tabs within the React Swipeable Views component as they have the aria-hidden="true" attribute set.' Within my tabs I do have some anchor links which are focusable, hence the error.

Lighthouse report:

The offending div elements:

Here is the link to the Google article explaining why the test pulls this up as an issue. In my humble opinion just how much of an issue this actually is is debatable, but nonetheless it's being flagged.

[x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Ideally this could be changed so that points are not deducted from the Lighthouse accessibility score.

Current Behavior

Points are being deducted from the Lighthouse accessibility score.

Steps to Reproduce (for bugs)

Run a Lighthouse test on any site that is running a React Swipeable Views component that has focusable elements within the tabs and this comes up as an issue in the accessibility section.

Context

A Gatsby website I am building is nearing launch so I am doing final optimisations. Part of this is checking that accessibility is as good as possible for visually impaired users.

Your Environment

Tech	Version
react-swipeable-views	0.13.9
React	16.13.1
platform	Window 10 (tested Lightouse in Brave Browser and Chrome)

Feb 13 '21 10:02 jason-dark

You can get around this by setting overscanSlideAfter={0} but that can cause slower loading. Alternatively, you can get around this if you keep track of the index you are using, and use that index in the slideRenderer function to conditionally set the style of the slide based on whether the index is the active one. For example,

 const slideRenderer = ({index, key}: SlideRenderProps) => (
    <div key={key} style={index !== activeStep ? {display: 'none'} : {width: '100%'}}>
...```

This removed the lighthouse error for me.

May 17 '21 16:05 kmsarsam

I know this library doesnt officially support multiple slides per view, but it is doable when using overscanSlideAfter and allowing overflow visible on the slide container.

But doing so, i have this same issue "Ensures aria-hidden elements do not contain focusable elements"

Is there a way to allow overscanSlideAfter/overscanSlideBefore have aria-hidden="false" for those renders? @oliviertassinari