From ce33c80b6dfe8bff7cff7613278f0011b4506c50 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 24 Sep 2019 00:29:12 -0700
Subject: [PATCH] fix: ignore modifiers in left/right focus keys (#1524)

fixes #1522
---
 .../observers/leftRightFocusObservers.js      | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/routes/_store/observers/leftRightFocusObservers.js b/src/routes/_store/observers/leftRightFocusObservers.js
index b5afe0ca..6bd8d485 100644
--- a/src/routes/_store/observers/leftRightFocusObservers.js
+++ b/src/routes/_store/observers/leftRightFocusObservers.js
@@ -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
+      }
     }
   }