Pause on focus and Tab navigation

[dmitryRomankov]

Hello guys, I'm using react slick on my current project and faced with focus and accessibility issues.

• pauseOnFocus prop doesn't work. Content continue sliding despite focus on slider.

• Tab navigation works a bit weird. Instead of jumping from current slide's last active element to the right button, it goes to all elements inside slider and also focusing starts from the hidden element not from active.

• Markup inside Slider during Tab navigation looks shifted.

Link to sandbox where all issues are reproducible CodeSandBox

[Lala-kumar]

can you provide more info on this issue.

[dmitryRomankov]

@Lala-kumar I've updated link to the sandbox, please check. Each issue described in summary above.

[DAnselC]

Also ran into both of these issues. pauseOnFocus is not working at all, would be really nice if it did!

Additionally, my implementation has a link and a button in each slide. This breaks tab navigation entirely and the slides get super wonky. Was able to hackily fix this by setting tabindex of -1 on the link and button in every slide that does not have the classname of .slick-active.

[ARUSHI-2004]

Hello guys, I'm using react slick on my current project and faced with focus and accessibility issues.

• pauseOnFocus prop doesn't work. Content continue sliding despite focus on slider.
• Tab navigation works a bit weird. Instead of jumping from current slide's last active element to the right button, it goes to all elements inside slider and also focusing starts from the hidden element not from active.
• Markup inside Slider during Tab navigation looks shifted.

Link to sandbox where all issues are reproducible CodeSandBox

Hi @dmitryRomankov I have done some changes and pauseonfocus is working fine now please check and also I have tried to solve the other two issues please check.. https://codesandbox.io/p/sandbox/react-slick-playground-forked-h52cq7?file=%2Findex.js&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls8vuaet0006356of3yrx01q%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls8vuaet0002356otkgn8v8m%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls8vuaet0003356orfm4a817%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls8vuaet0005356oe9wmhgfh%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B51.9927189116689%252C48.0072810883311%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls8vuaet0002356otkgn8v8m%2522%253A%257B%2522id%2522%253A%2522cls8vuaet0002356otkgn8v8m%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsa9p2nt005n356oxjep3ogh%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A9%252C%2522startColumn%2522%253A11%252C%2522endLineNumber%2522%253A9%252C%2522endColumn%2522%253A11%257D%255D%252C%2522filepath%2522%253A%2522%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clsaal1rt0002356o7d25s0do%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A64%252C%2522startColumn%2522%253A24%252C%2522endLineNumber%2522%253A64%252C%2522endColumn%2522%253A24%257D%255D%252C%2522filepath%2522%253A%2522%252FHello.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clsadhroq0002356odbq96bk1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A7%252C%2522startColumn%2522%253A16%252C%2522endLineNumber%2522%253A7%252C%2522endColumn%2522%253A16%257D%255D%252C%2522filepath%2522%253A%2522%252Findex.css%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clsa9p2nt005n356oxjep3ogh%2522%257D%252C%2522cls8vuaet0005356oe9wmhgfh%2522%253A%257B%2522id%2522%253A%2522cls8vuaet0005356oe9wmhgfh%2522%252C%2522activeTabId%2522%253A%2522clx69ecfe001m356ixavfawvd%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clx69ecfe001m356ixavfawvd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522cls8vuaet0003356orfm4a817%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cls8vuaet0003356orfm4a817%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[ARUSHI-2004]

just to breif you i have added: 1).The problem arises when you try to focus on an element inside the slider, as it will pause the autoplay, but then immediately resume it because of the autoplay: true setting. This can cause unexpected behavior.

To fix this issue, you can try setting autoplay: isPlaying and then toggle the isPlaying state when the slider gains or loses focus.

[ARUSHI-2004]

2.)for second problem @DAnselC was right i have just worked on it updated the code 3)it was also corrected by solving problem 2(i.e by setting tabindex of -1 on the link and button in every slide)