Pause on focus and Tab navigation
- Dominant language
- JavaScript
- Stars
- 11.9k
- Forks
- 2.1k
- PR merge metrics
- No merged PRs in 30d
Description
### 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](https://codesandbox.io/p/sandbox/react-slick-playground-forked-wc76th?file=%2Findex.js%3A38%2C1&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%253A38%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A38%252C%2522endColumn%2522%253A1%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%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls8vuaet0004356ogxlouymn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cls8vuaet0004356ogxlouymn%2522%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)
Contributor guide
Assessment
This issue has not been assessed yet.