-
Notifications
You must be signed in to change notification settings - Fork 1k
/
focus-management.ts
189 lines (150 loc) · 5.46 KB
/
focus-management.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
import { match } from './match'
import { getOwnerDocument } from './owner'
// Credit:
// - https://stackoverflow.com/a/30753870
let focusableSelector = [
'[contentEditable=true]',
'[tabindex]',
'a[href]',
'area[href]',
'button:not([disabled])',
'iframe',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
]
.map(
process.env.NODE_ENV === 'test'
? // TODO: Remove this once JSDOM fixes the issue where an element that is
// "hidden" can be the document.activeElement, because this is not possible
// in real browsers.
(selector) => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
: (selector) => `${selector}:not([tabindex='-1'])`
)
.join(',')
export enum Focus {
/** Focus the first non-disabled element */
First = 1 << 0,
/** Focus the previous non-disabled element */
Previous = 1 << 1,
/** Focus the next non-disabled element */
Next = 1 << 2,
/** Focus the last non-disabled element */
Last = 1 << 3,
/** Wrap tab around */
WrapAround = 1 << 4,
/** Prevent scrolling the focusable elements into view */
NoScroll = 1 << 5,
}
export enum FocusResult {
/** Something went wrong while trying to focus. */
Error,
/** When `Focus.WrapAround` is enabled, going from position `N` to `N+1` where `N` is the last index in the array, then we overflow. */
Overflow,
/** Focus was successful. */
Success,
/** When `Focus.WrapAround` is enabled, going from position `N` to `N-1` where `N` is the first index in the array, then we underflow. */
Underflow,
}
enum Direction {
Previous = -1,
Next = 1,
}
export function getFocusableElements(container: HTMLElement | null = document.body) {
if (container == null) return []
return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
}
export enum FocusableMode {
/** The element itself must be focusable. */
Strict,
/** The element should be inside of a focusable element. */
Loose,
}
export function isFocusableElement(
element: HTMLElement,
mode: FocusableMode = FocusableMode.Strict
) {
if (element === getOwnerDocument(element)?.body) return false
return match(mode, {
[FocusableMode.Strict]() {
return element.matches(focusableSelector)
},
[FocusableMode.Loose]() {
let next: HTMLElement | null = element
while (next !== null) {
if (next.matches(focusableSelector)) return true
next = next.parentElement
}
return false
},
})
}
export function focusElement(element: HTMLElement | null) {
element?.focus({ preventScroll: true })
}
export function sortByDomNode<T>(
nodes: T[],
resolveKey: (item: T) => HTMLElement | null = (i) => i as unknown as HTMLElement | null
): T[] {
return nodes.slice().sort((aItem, zItem) => {
let a = resolveKey(aItem)
let z = resolveKey(zItem)
if (a === null || z === null) return 0
let position = a.compareDocumentPosition(z)
if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
return 0
})
}
export function focusIn(container: HTMLElement | HTMLElement[], focus: Focus) {
let ownerDocument = Array.isArray(container)
? container.length > 0
? container[0].ownerDocument
: document
: container.ownerDocument
let elements = Array.isArray(container)
? sortByDomNode(container)
: getFocusableElements(container)
let active = ownerDocument.activeElement as HTMLElement
let direction = (() => {
if (focus & (Focus.First | Focus.Next)) return Direction.Next
if (focus & (Focus.Previous | Focus.Last)) return Direction.Previous
throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last')
})()
let startIndex = (() => {
if (focus & Focus.First) return 0
if (focus & Focus.Previous) return Math.max(0, elements.indexOf(active)) - 1
if (focus & Focus.Next) return Math.max(0, elements.indexOf(active)) + 1
if (focus & Focus.Last) return elements.length - 1
throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last')
})()
let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {}
let offset = 0
let total = elements.length
let next = undefined
do {
// Guard against infinite loops
if (offset >= total || offset + total <= 0) return FocusResult.Error
let nextIdx = startIndex + offset
if (focus & Focus.WrapAround) {
nextIdx = (nextIdx + total) % total
} else {
if (nextIdx < 0) return FocusResult.Underflow
if (nextIdx >= total) return FocusResult.Overflow
}
next = elements[nextIdx]
// Try the focus the next element, might not work if it is "hidden" to the user.
next?.focus(focusOptions)
// Try the next one in line
offset += direction
} while (next !== ownerDocument.activeElement)
// This is a little weird, but let me try and explain: There are a few scenario's
// in chrome for example where a focused `<a>` tag does not get the default focus
// styles and sometimes they do. This highly depends on whether you started by
// clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
// then the active element (document.activeElement) is this anchor, which is expected.
// However in that case the default focus styles are not applied *unless* you
// also add this tabindex.
if (!next.hasAttribute('tabindex')) next.setAttribute('tabindex', '0')
return FocusResult.Success
}