-
-
Notifications
You must be signed in to change notification settings - Fork 787
/
tabbable.ts
198 lines (157 loc) · 6.06 KB
/
tabbable.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
190
191
192
193
194
195
196
197
198
// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
// computedStyle calls are "live" so they only need to be retrieved once for an element.
const computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();
function getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {
let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);
if (!computedStyle) {
computedStyle = window.getComputedStyle(el, null);
computedStyleMap.set(el, computedStyle);
}
return computedStyle;
}
function isVisible(el: HTMLElement): boolean {
// This is the fastest check, but isn't supported in Safari.
if (typeof el.checkVisibility === 'function') {
// Opacity is focusable, visibility is not.
return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
}
// Fallback "polyfill" for "checkVisibility"
const computedStyle = getCachedComputedStyle(el);
return computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none';
}
// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
// accessible way of handling overflow areas. [Konnor]
function isOverflowingAndTabbable(el: HTMLElement): boolean {
const computedStyle = getCachedComputedStyle(el);
const { overflowY, overflowX } = computedStyle;
if (overflowY === 'scroll' || overflowX === 'scroll') {
return true;
}
if (overflowY !== 'auto' || overflowX !== 'auto') {
return false;
}
// Always overflow === "auto" by this point
const isOverflowingY = el.scrollHeight > el.clientHeight;
if (isOverflowingY && overflowY === 'auto') {
return true;
}
const isOverflowingX = el.scrollWidth > el.clientWidth;
if (isOverflowingX && overflowX === 'auto') {
return true;
}
return false;
}
/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
function isTabbable(el: HTMLElement) {
const tag = el.tagName.toLowerCase();
const tabindex = Number(el.getAttribute('tabindex'));
const hasTabindex = el.hasAttribute('tabindex');
// elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
return false;
}
// Elements with a disabled attribute are not tabbable
if (el.hasAttribute('disabled')) {
return false;
}
// If any parents have "inert", we aren't "tabbable"
if (el.closest('[inert]')) {
return false;
}
// Radios without a checked attribute are not tabbable
if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {
return false;
}
if (!isVisible(el)) {
return false;
}
// Audio and video elements with the controls attribute are tabbable
if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
return true;
}
// Elements with a tabindex other than -1 are tabbable
if (el.hasAttribute('tabindex')) {
return true;
}
// Elements with a contenteditable attribute are tabbable
if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {
return true;
}
// At this point, the following elements are considered tabbable
const isNativelyTabbable = [
'button',
'input',
'select',
'textarea',
'a',
'audio',
'video',
'summary',
'iframe'
].includes(tag);
if (isNativelyTabbable) {
return true;
}
// We save the overflow checks for last, because they're the most expensive
return isOverflowingAndTabbable(el);
}
/**
* Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
* element because it short-circuits after finding the first and last ones.
*/
export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
const tabbableElements = getTabbableElements(root);
// Find the first and last tabbable elements
const start = tabbableElements[0] ?? null;
const end = tabbableElements[tabbableElements.length - 1] ?? null;
return { start, end };
}
/**
* This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
* However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
* This fixes that fun edge case.
*/
function getSlottedChildrenOutsideRootElement(slotElement: HTMLSlotElement, root: HTMLElement | ShadowRoot) {
return (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;
}
export function getTabbableElements(root: HTMLElement | ShadowRoot) {
const walkedEls = new WeakMap();
const tabbableElements: HTMLElement[] = [];
function walk(el: HTMLElement | ShadowRoot) {
if (el instanceof Element) {
// if the element has "inert" we can just no-op it.
if (el.hasAttribute('inert') || el.closest('[inert]')) {
return;
}
if (walkedEls.has(el)) {
return;
}
walkedEls.set(el, true);
if (!tabbableElements.includes(el) && isTabbable(el)) {
tabbableElements.push(el);
}
if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {
walk(assignedEl);
});
}
if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
walk(el.shadowRoot);
}
}
for (const e of el.children) {
walk(e as HTMLElement);
}
}
// Collect all elements including the root
walk(root);
// Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
// So is it worth being right? Or fast?
return tabbableElements.sort((a, b) => {
// Make sure we sort by tabindex.
const aTabindex = Number(a.getAttribute('tabindex')) || 0;
const bTabindex = Number(b.getAttribute('tabindex')) || 0;
return bTabindex - aTabindex;
});
}