akiran / akiran/react-slick

Pause on focus and Tab navigation

Offen
#2,341 6 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
11.9k
Forks
2.1k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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)

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.