akiran / akiran/react-slick

Pause on focus and Tab navigation

Open
#2,341 6 comments 2 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.