2023-12-01 17:06:16 +00:00
|
|
|
// 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 isVisible(el: HTMLElement): boolean {
|
|
|
|
// This is the fastest check, but isn't supported in Safari.
|
|
|
|
if (typeof el.checkVisibility === 'function') {
|
|
|
|
return el.checkVisibility({ checkOpacity: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fallback "polyfill" for "checkVisibility"
|
|
|
|
let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);
|
|
|
|
|
|
|
|
if (!computedStyle) {
|
|
|
|
computedStyle = window.getComputedStyle(el, null);
|
|
|
|
computedStyleMap.set(el, computedStyle);
|
|
|
|
}
|
|
|
|
|
|
|
|
return computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none';
|
2023-10-16 16:30:34 +00:00
|
|
|
}
|
2023-10-16 16:46:59 +00:00
|
|
|
|
2022-01-16 05:47:14 +00:00
|
|
|
/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
|
2021-04-15 17:38:53 +00:00
|
|
|
function isTabbable(el: HTMLElement) {
|
|
|
|
const tag = el.tagName.toLowerCase();
|
2020-10-16 21:04:35 +00:00
|
|
|
|
2021-04-15 17:38:53 +00:00
|
|
|
// Elements with a -1 tab index are not tabbable
|
|
|
|
if (el.getAttribute('tabindex') === '-1') {
|
|
|
|
return false;
|
2020-10-16 21:04:35 +00:00
|
|
|
}
|
|
|
|
|
2021-04-15 17:38:53 +00:00
|
|
|
// Elements with a disabled attribute are not tabbable
|
|
|
|
if (el.hasAttribute('disabled')) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Radios without a checked attribute are not tabbable
|
|
|
|
if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2023-12-01 17:06:16 +00:00
|
|
|
if (!isVisible(el)) {
|
2021-04-15 17:38:53 +00:00
|
|
|
return false;
|
2020-10-16 21:04:35 +00:00
|
|
|
}
|
|
|
|
|
2021-06-29 11:08:49 +00:00
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
|
2021-04-15 17:38:53 +00:00
|
|
|
// At this point, the following elements are considered tabbable
|
|
|
|
return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary'].includes(tag);
|
|
|
|
}
|
|
|
|
|
2022-01-16 05:47:14 +00:00
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
*/
|
2021-07-07 11:59:06 +00:00
|
|
|
export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
|
2023-07-07 19:32:23 +00:00
|
|
|
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 };
|
|
|
|
}
|
|
|
|
|
2023-12-01 17:06:16 +00:00
|
|
|
/**
|
|
|
|
* 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;
|
|
|
|
}
|
|
|
|
|
2023-07-07 19:32:23 +00:00
|
|
|
export function getTabbableElements(root: HTMLElement | ShadowRoot) {
|
2023-12-01 17:06:16 +00:00
|
|
|
const walkedEls = new WeakMap();
|
2023-08-23 15:43:48 +00:00
|
|
|
const tabbableElements: HTMLElement[] = [];
|
2021-07-07 11:59:06 +00:00
|
|
|
|
|
|
|
function walk(el: HTMLElement | ShadowRoot) {
|
2023-07-07 19:32:23 +00:00
|
|
|
if (el instanceof Element) {
|
2023-08-23 15:43:48 +00:00
|
|
|
// if the element has "inert" we can just no-op it.
|
|
|
|
if (el.hasAttribute('inert')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-12-01 17:06:16 +00:00
|
|
|
if (walkedEls.has(el)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
walkedEls.set(el, true);
|
|
|
|
|
2023-08-23 15:43:48 +00:00
|
|
|
if (!tabbableElements.includes(el) && isTabbable(el)) {
|
|
|
|
tabbableElements.push(el);
|
|
|
|
}
|
|
|
|
|
2023-12-01 17:06:16 +00:00
|
|
|
if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
|
2023-08-23 15:43:48 +00:00
|
|
|
el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {
|
|
|
|
walk(assignedEl);
|
|
|
|
});
|
|
|
|
}
|
2021-07-07 11:59:06 +00:00
|
|
|
|
2022-01-16 05:47:14 +00:00
|
|
|
if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
|
2021-07-07 11:59:06 +00:00
|
|
|
walk(el.shadowRoot);
|
|
|
|
}
|
2021-04-15 17:38:53 +00:00
|
|
|
}
|
|
|
|
|
2023-12-01 17:06:16 +00:00
|
|
|
for (const e of el.children) {
|
|
|
|
walk(e as HTMLElement);
|
|
|
|
}
|
2021-04-15 17:38:53 +00:00
|
|
|
}
|
|
|
|
|
2021-07-07 11:59:06 +00:00
|
|
|
// Collect all elements including the root
|
|
|
|
walk(root);
|
2021-04-15 17:38:53 +00:00
|
|
|
|
2023-08-23 15:43:48 +00:00
|
|
|
// 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?
|
2023-10-04 19:10:38 +00:00
|
|
|
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;
|
|
|
|
});
|
2020-10-16 21:04:35 +00:00
|
|
|
}
|