Skip to content
This repository was archived by the owner on Sep 22, 2022. It is now read-only.

Fix shift tab when currentIndex is 0 or -1 #49

Merged
merged 5 commits into from
Nov 14, 2019
Merged

Fix shift tab when currentIndex is 0 or -1 #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db19b79
Fix shiftTab from index 0 going to -1
muan Nov 6, 2019
94ddd45
Use activeElement instead of matches
muan Nov 6, 2019
c3924a4
Add test for shiftTab
muan Nov 6, 2019
63eb86a
Construct events in tests better
muan Nov 6, 2019
66c9d4a
Fix shift tabbing without current focus
muan Nov 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor Author

@muan muan Nov 6, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When currentFocus does not exist, movement was not apply at all.

const currentIndex = elements.indexOf(currentFocus)
if (currentIndex !== -1) {
const newIndex = currentIndex + movement
if (newIndex >= 0) targetIndex = newIndex % elements.length
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When newIndex is -1 ((currentIndex)0 + (movement)-1), targetIndex stays 0.

targetIndex = currentIndex + movement
}
}

if (targetIndex < 0) {
targetIndex = elements.length - 1
} else {
targetIndex = targetIndex % elements.length
}

elements[targetIndex].focus()
}

Expand Down
46 changes: 26 additions & 20 deletions test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New test for shift + tab here.

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}]`))
})

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)
})
})
Expand Down Expand Up @@ -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')
})
})
Expand Down Expand Up @@ -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')
})
})
Expand All @@ -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
})
)
}