keyboard: 'focused' option and aria-label

[Egpereira]

Hi there!

I want to enable keyboard navigation only when the user is interacting with the slider, so I passes down 'keyboard: focused' option to my slider, which adds a tabindex="0" to the slider root element.
First, is there a way for me to provide an aria-label for the root element, since it will be focusable by keyboard and consequently announce the slider contents to screen reader users?
Second, could there be a way to do the same behaviour without adding a tabindex, similar to the css selector :focus-within?

[NaotoshiFujita]

First, is there a way for me to provide an aria-label for the root element, since it will be focusable by keyboard and consequently announce the slider contents to screen reader users?

The splide instance has the root element and you can assign any attributes to it.
https://splidejs.com/guides/apis/#root

Second, could there be a way to do the same behaviour without adding a tabindex, similar to the css selector :focus-within?

No. Only focusable nodes can receive the keydown event.

[Egpereira]

Thanks!

Sorry if it's a dumb question, but how can I access the root element on the react-splide to add the aria-label to it?

[NaotoshiFujita]

Use a ref object like this:
https://splidejs.com/integration/react-splide/#accessing-splide-instance

[Egpereira]

Thanks once again