Merge pull request #49 from github/shiftTab

Fix shift tab when currentIndex is 0 or -1
github · Nov 14, 2019 · a2b9ecc · a2b9ecc
2 parents 6a07747 + 66c9d4a
commit a2b9ecc
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/index.js b/index.js
@@ -49,17 +49,22 @@ function restrictTabBehavior(event: KeyboardEvent): void {
   if (elements.length === 0) return
 
   const movement = event.shiftKey ? -1 : 1
-  const currentFocus = elements.filter(el => el.matches(':focus'))[0]
-  let targetIndex = 0
+  const currentFocus = dialog.contains(document.activeElement) ? document.activeElement : null
+  let targetIndex = movement === -1 ? -1 : 0
 
   if (currentFocus) {
     const currentIndex = elements.indexOf(currentFocus)
     if (currentIndex !== -1) {
-      const newIndex = currentIndex + movement
-      if (newIndex >= 0) targetIndex = newIndex % elements.length
+      targetIndex = currentIndex + movement
     }
   }
 
+  if (targetIndex < 0) {
+    targetIndex = elements.length - 1
+  } else {
+    targetIndex = targetIndex % elements.length
+  }
+
   elements[targetIndex].focus()
 }
 

diff --git a/test/test.js b/test/test.js
@@ -81,17 +81,19 @@ describe('details-dialog-element', function() {
       dialog.toggle(true)
       await waitForToggleEvent(details)
       assert(details.open)
-      pressEscape(details)
+      triggerKeydownEvent(details, 'Escape')
       assert(!details.open)
     })
 
     it('manages focus', async function() {
       summary.click()
       await waitForToggleEvent(details)
       assert.equal(document.activeElement, dialog)
-      pressTab(details)
+      triggerKeydownEvent(details, 'Tab', true)
+      assert.equal(document.activeElement, document.querySelector(`[${CLOSE_ATTR}]`))
+      triggerKeydownEvent(details, 'Tab')
       assert.equal(document.activeElement, document.querySelector(`[data-button]`))
-      pressTab(details)
+      triggerKeydownEvent(details, 'Tab')
       assert.equal(document.activeElement, document.querySelector(`[${CLOSE_ATTR}]`))
     })
 
@@ -122,7 +124,7 @@ describe('details-dialog-element', function() {
       assert(details.open)
       assert.equal(closeRequestCount, 2)
 
-      pressEscape(details)
+      triggerKeydownEvent(details, 'Escape')
       assert(details.open)
       assert.equal(closeRequestCount, 3)
 
@@ -163,7 +165,7 @@ describe('details-dialog-element', function() {
         assert(details.open)
         assert.equal(closeRequestCount, 1)
 
-        pressEscape(details)
+        triggerKeydownEvent(details, 'Escape')
         assert(details.open)
         assert.equal(closeRequestCount, 2)
 
@@ -197,7 +199,7 @@ describe('details-dialog-element', function() {
         dialog.toggle(true)
         await waitForToggleEvent(details)
         assert(details.open)
-        pressEscape(details)
+        triggerKeydownEvent(details, 'Escape')
         assert(!details.open)
       })
     })
@@ -230,7 +232,7 @@ describe('details-dialog-element', function() {
         dialog.preload = true
         assert(dialog.hasAttribute('preload'))
         assert.notOk(includeFragment.getAttribute('src'))
-        triggerEvent(details, 'mouseover')
+        triggerMouseoverEvent(details)
         assert.equal(includeFragment.getAttribute('src'), '/404')
       })
     })
@@ -260,7 +262,7 @@ describe('details-dialog-element', function() {
       it('transfers src on mouseover', async function() {
         assert(!details.open)
         assert.notOk(includeFragment.getAttribute('src'))
-        triggerEvent(details, 'mouseover')
+        triggerMouseoverEvent(details)
         assert.equal(includeFragment.getAttribute('src'), '/404')
       })
     })
@@ -279,17 +281,21 @@ function waitForToggleEvent(details) {
   })
 }
 
-function triggerEvent(element, name, key) {
-  const event = document.createEvent('Event')
-  event.initEvent(name, true, true)
-  if (key) event.key = key
-  element.dispatchEvent(event)
-}
-
-function pressEscape(details) {
-  triggerEvent(details, 'keydown', 'Escape')
+function triggerMouseoverEvent(element) {
+  element.dispatchEvent(
+    new MouseEvent('mouseover', {
+      bubbles: true,
+      cancelable: true
+    })
+  )
 }
-
-function pressTab(details) {
-  triggerEvent(details, 'keydown', 'Tab')
+function triggerKeydownEvent(element, key, shiftKey) {
+  element.dispatchEvent(
+    new KeyboardEvent('keydown', {
+      bubbles: true,
+      cancelable: true,
+      key,
+      shiftKey
+    })
+  )
 }