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

Update query for focusable elements #30

Merged
merged 3 commits into from
Apr 5, 2019
Merged

Update query for focusable elements #30

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e51fb9
Update query for focusable elements
muan Apr 2, 2019
6866b96
Fix tabindex='-1' elements being tabbable
muan Apr 2, 2019
166709c
Remove unnecessary parentheses
muan Apr 2, 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
8 changes: 2 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

const CLOSE_ATTR = 'data-close-dialog'
const CLOSE_SELECTOR = `[${CLOSE_ATTR}]`
const INPUT_SELECTOR = 'a, input, button, textarea, select, summary'

type Focusable =
| HTMLButtonElement
Expand Down Expand Up @@ -33,7 +32,7 @@ function keydown(event: KeyboardEvent): void {
}

function focusable(el: Focusable): boolean {
return !el.disabled && !el.hidden && (!el.type || el.type !== 'hidden') && !el.closest('[hidden]')
return el.tabIndex >= 0 && !el.disabled && !el.hidden && (!el.type || el.type !== 'hidden') && !el.closest('[hidden]')
}

function restrictTabBehavior(event: KeyboardEvent): void {
Expand All @@ -42,7 +41,7 @@ function restrictTabBehavior(event: KeyboardEvent): void {
if (!dialog) return
event.preventDefault()

const elements: Array<Focusable> = Array.from(dialog.querySelectorAll(INPUT_SELECTOR)).filter(focusable)
const elements: Array<Focusable> = Array.from(dialog.querySelectorAll('*')).filter(focusable)
if (elements.length === 0) return

const movement = event.shiftKey ? -1 : 1
Expand Down Expand Up @@ -141,9 +140,6 @@ class DetailsDialogElement extends HTMLElement {
static get CLOSE_SELECTOR() {
return CLOSE_SELECTOR
}
static get INPUT_SELECTOR() {
Copy link

Choose a reason for hiding this comment

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

Any reason why this was part of the element's API? 😕

Copy link
Contributor Author

Choose a reason for hiding this comment

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

See #11. I should've questioned it more. 😔

return INPUT_SELECTOR
}

constructor() {
super()
Expand Down