search

nerdyman / react-compare-slider

A slider component to compare any two React components in landscape or portrait orientation. It supports custom images, videos... and everything else.
https://react-compare-slider.vercel.app
MIT License
239 stars 17 forks source link

Is it possible to use another html tag for slider role? #147

Closed spiletski closed 4 months ago

spiletski commented 4 months ago

Hello, Using the library in storybook an accessibility issue is appeared. On accessibility tab: https://dequeuniversity.com/rules/axe/4.8/aria-allowed-role?application=axeAPI

image image

The issue is related to using

nerdyman commented 4 months ago

Thanks for raising this @spiletski. This might be a red herring, I'm fairly sure the slider role is allowed on button elements. It passed the accessibility checks when the feature was implemented a year or so ago at least.

There's a recent release in the axe-core library (which Storybook uses) to correct this https://github.com/dequelabs/axe-core/releases/tag/v4.9.1 https://github.com/dequelabs/axe-core/pull/4398

The a11y tools in Lighthouse are also flagging this however and I'm not sure of the crossover between axe-core and Lighthouse or other tools. I'll leave this open until I find out.

FWIW slider is announced correctly to screen readers so this issue isn't maybe as critical as it looks.

nerdyman commented 4 months ago

Lighthouse also uses axe-core so this issue should resolve when the dependencies are upgraded.

Feel free to reopen it if it's still an issue after upgrading.