@internetarchive/modal-manager 0.3.4 → 0.9.1-alpha.0

package/src/shoelace/tabbable.ts

@@ -0,0 +1,221 @@
+// 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 ('checkVisibility' in el && typeof el['checkVisibility'] === 'function') {
+    // Opacity is focusable, visibility is not.
+    return (el as any)['checkVisibility']({
+      checkOpacity: false,
+      checkVisibilityCSS: true,
+    });
+  }
+
+  // Fallback "polyfill" for "checkVisibility"
+  const computedStyle = getCachedComputedStyle(el as HTMLElement);
+
+  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: Element) => {
+            walk(assignedEl as HTMLElement | ShadowRoot);
+          }
+        );
+      }
+
+      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+        walk(el.shadowRoot);
+      }
+    }
+
+    for (const e of Array.from(el.children) as HTMLElement[]) {
+      walk(e);
+    }
+  }
+
+  // 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;
+  });
+}

package/test/modal-manager.test.ts

@@ -21,7 +21,7 @@ describe('Modal Manager', () => {
       <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
     `)) as ModalManager;
 
-    el.customModalContent = ('foo' as unknown) as TemplateResult;
+    el.customModalContent = 'foo' as unknown as TemplateResult;
     await elementUpdated(el);
 
     expect(el.customModalContent).to.equal('foo');
@@ -56,7 +56,7 @@ describe('Modal Manager', () => {
     setTimeout(() => {
       el.showModal({ config });
     });
-    const response = await oneEvent(el, 'modeChanged');
+    const response = await oneEvent(el, 'modeChanged', false);
     expect(response.detail.mode).to.equal(ModalManagerMode.Open);
   });
 
@@ -72,7 +72,7 @@ describe('Modal Manager', () => {
     setTimeout(() => {
       el.closeModal();
     });
-    const response = await oneEvent(el, 'modeChanged');
+    const response = await oneEvent(el, 'modeChanged', false);
     expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
   });
 

package/test/modal-template.test.ts

@@ -40,7 +40,7 @@ describe('Modal Template', () => {
     setTimeout(() => {
       closeButton?.dispatchEvent(clickEvent);
     });
-    const response = await oneEvent(el, 'closeButtonPressed');
+    const response = await oneEvent(el, 'closeButtonPressed', false);
     expect(response).to.exist;
   });