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