data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: ignore modifiers in left/right focus keys (#1524)

Browse source 
fixes #1522
This commit is contained in:
Nolan Lawson 2019-09-24 00:29:12 -07:00 committed by GitHub
parent 488e87bda1
commit ce33c80b6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/routes/_store/observers/leftRightFocusObservers.js
View file

@ -65,7 +65,7 @@ export function leftRightFocusObservers (store) {
return true
}
function focusNextOrPrevious (e, key) {
function focusNextOrPrevious (event, key) {
const { activeElement } = document
if (shouldIgnoreEvent(activeElement, key)) {
return
@ -81,26 +81,35 @@ export function leftRightFocusObservers (store) {
element = focusable[index + 1] || focusable[focusable.length - 1]
}
element.focus()
e.preventDefault()
e.stopPropagation()
event.preventDefault()
event.stopPropagation()
}
function handleEnter (e) {
function handleEnter (event) {
const { activeElement } = document
if (activeElement.tagName === 'INPUT' && ['checkbox', 'radio'].includes(activeElement.getAttribute('type'))) {
// Explicitly override "enter" on an input and make it fire the checkbox/radio
activeElement.click()
e.preventDefault()
e.stopPropagation()
event.preventDefault()
event.stopPropagation()
}
}
function keyListener (e) {
const { key } = e
if (key === 'ArrowRight' || key === 'ArrowLeft') {
focusNextOrPrevious(e, key)
} else if (key === 'Enter') {
handleEnter(e)
function keyListener (event) {
if (event.altKey || event.metaKey || event.ctrlKey) {
return // ignore e.g. Alt-Left and Ctrl-Right, which are used to switch browser tabs or navigate back/forward
}
const { key } = event
switch (key) {
case 'ArrowLeft':
case 'ArrowRight': {
focusNextOrPrevious(event, key)
break
}
case 'Enter': {
handleEnter(event)
break
}
}
}