scrollable-region-focusable not seeing focusable content

[Brynman]

Product

axe-core

Product Version

4.106.1

Latest Version

• [x] I have tested the issue with the latest version of the product

Issue Description

Expectation

Not to flag this as an issue as I can navigate the scrollable area with cursor keys

Actual

To solve this problem, you need to fix at least (1) of the following: Element should have focusable content Element should be focusable

How to Reproduce

Run axe DevTools plugin on this page https://smartshop.sainsburys.co.uk/

Additional context

Nope

[straker]

Thanks for the issue. After looking into I believe this is related to https://github.com/dequelabs/axe-core/issues/4752 where Chrome and Firefox are adding the carousel container to the tab order automatically. Because axe-core can't determine that the buttons move the scroll position, it will flag the element as not focusable. To solve the issue you can add tabindex=1 to the ol.ds-c-carousel__slides element as it appears left/right arrows allow the element to scroll once focused.

[Brynman]

I think I get your point, but am I right in concluding that this is a non-issue? Its very challenging to justify the change request if I can't demonstrate the issue.

[WilcoFiers]

You're right this is not a valid issue. Axe can't detect that there are controls that scroll this element. Most carrousels don't let users scroll them. This one works by using scrollsnap to avoid having scroll stop half-way. Perhaps what we should do to avoid this is report needs review on scrollable regions with scrollsnap.

[Brynman]

Thanks for taking a look @WilcoFiers and @straker.