js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

update comments

Browse Source
This commit is contained in:
Cory LaViska
2023-10-16 12:46:59 -04:00
parent 54923edd22
commit db66bbe5a1
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/internal/tabbable.ts
View File

@@ -1,11 +1,16 @@
// It doesn't technically check visibility, it checks if the element has been rendered and can maybe possibly be tabbed to.
// This is a workaround for shadowroots not having an `offsetParent`
// https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
// Previously, we used https://www.npmjs.com/package/composed-offset-position, but recursing up an entire
// node tree took up a lot of CPU cycles and made focus traps unusable in Chrome / Edge.
//
// This doesn't technically check visibility, it checks if the element has been rendered and can maybe possibly be tabbed
// to. This is a workaround for shadow roots not having an `offsetParent`.
//
// See https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
//
// Previously, we used https://www.npmjs.com/package/composed-offset-position, but recursing up an entire node tree took
// up a lot of CPU cycles and made focus traps unusable in Chrome / Edge.
//
function isTakingUpSpace(elem: HTMLElement): boolean {
return Boolean(elem.offsetParent || elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
}
/** 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();
@@ -26,7 +31,6 @@ function isTabbable(el: HTMLElement) {
}
// Elements that are hidden have no offsetParent and are not tabbable
// !isRendered is added because otherwise it misses elements in Safari
if (!isTakingUpSpace(el)) {
return false;
}