@navikt/ds-react 7.32.2 → 7.32.4

package/src/util/__tests__/hideNonTargetElements.test.ts

@@ -0,0 +1,147 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { hideNonTargetElements } from "../hideNonTargetElements";
+
+describe("hideNonTargetElements util", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("marks non-avoided siblings with marker and cleans up on undo", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="target"></div>
+        <div id="hidden-1"></div>
+        <div aria-live="polite" id="live-region"></div>
+        <script id="script-el"></script>
+      </div>
+    `;
+    const target = document.getElementById("target") as Element;
+    const hidden1 = document.getElementById("hidden-1") as Element;
+    const live = document.getElementById("live-region") as Element;
+    const script = document.getElementById("script-el") as Element;
+
+    const undo = hideNonTargetElements([target]);
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(live.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(script.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+
+    undo();
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(live.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(script.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("nested: marks non-avoided siblings with marker and cleans up on undo", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="inner">
+          <div id="target"></div>
+          <div id="hidden-1"></div>
+        </div>
+        <div id="hidden-2"></div>
+      </div>
+    `;
+    const target = document.getElementById("target") as Element;
+    const hidden1 = document.getElementById("hidden-1") as Element;
+    const hidden2 = document.getElementById("hidden-2") as Element;
+
+    const undo = hideNonTargetElements([target]);
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+
+    undo();
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("applies aria-hidden when requested and restores previous state", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="target"></div>
+        <div id="hidden-2"></div>
+        <div id="pre-hidden" aria-hidden="true"></div>
+      </div>
+    `;
+    const target = document.getElementById("target") as Element;
+    const hidden2 = document.getElementById("hidden-2") as Element;
+    const preHidden = document.getElementById("pre-hidden") as Element;
+
+    const undo = hideNonTargetElements([target]);
+
+    expect(hidden2.getAttribute("aria-hidden")).toBe("true");
+    expect(preHidden.getAttribute("aria-hidden")).toBe("true");
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(preHidden.hasAttribute("data-aksel-hidden")).toBe(true);
+
+    undo();
+
+    expect(hidden2.hasAttribute("aria-hidden")).toBe(false);
+    expect(preHidden.getAttribute("aria-hidden")).toBe("true");
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(preHidden.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("treats shadow-hosted avoid elements as connected to host", () => {
+    document.body.innerHTML = `
+      <div id="root"></div>
+    `;
+    const root = document.getElementById("root") as HTMLElement;
+
+    const host = document.createElement("div");
+    host.id = "shadow-host";
+    const shadow = host.attachShadow({ mode: "open" });
+    const shadowTarget = document.createElement("button");
+    shadowTarget.id = "shadow-target";
+    shadow.appendChild(shadowTarget);
+
+    const sibling = document.createElement("div");
+    sibling.id = "outside";
+
+    root.append(host, sibling);
+
+    const undo = hideNonTargetElements([shadowTarget]);
+
+    expect(sibling.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(host.hasAttribute("data-aksel-hidden")).toBe(false);
+
+    undo();
+
+    expect(sibling.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(host.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("maintains counters across nested calls until final undo", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="target-a"></div>
+        <div id="target-b"></div>
+        <div id="shared"></div>
+      </div>
+    `;
+    const targetA = document.getElementById("target-a") as Element;
+    const targetB = document.getElementById("target-b") as Element;
+    const shared = document.getElementById("shared") as Element;
+
+    const undoA = hideNonTargetElements([targetA]);
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(true);
+
+    const undoB = hideNonTargetElements([targetB]);
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(true);
+
+    undoB();
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(shared.getAttribute("aria-hidden")).toBe("true");
+
+    undoA();
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(shared.hasAttribute("aria-hidden")).toBe(false);
+  });
+});

package/src/util/hideNonTargetElements.ts

@@ -0,0 +1,179 @@
+/**
+ * Modified version of `aria-hidden`-package.
+ * - Removed "inert"-functionality.
+ * - Removed flexibility for different data-attributes.
+ * https://github.com/theKashey/aria-hidden/blob/720e8a8e1cfa047bd299a929d95d47ac860a5c1a/src/index.ts
+ */
+import { ownerDocument } from "./owner";
+
+type UndoFn = () => void;
+
+let ariaHiddenCounter = new WeakMap<Element, number>();
+let markerCounter = new WeakMap<Element, number>();
+
+let uncontrolledElementsSet = new WeakSet<Element>();
+let lockCount = 0;
+
+const controlAttribute = "aria-hidden";
+const markerName = "data-aksel-hidden";
+
+/**
+ * Unwraps a Shadow DOM host to find the actual Element in the light DOM.
+ */
+function unwrapHost(node: Element | ShadowRoot): Element | null {
+  return (
+    node &&
+    ((node as ShadowRoot).host || unwrapHost(node.parentNode as Element))
+  );
+}
+
+/**
+ * Corrects the target elements by unwrapping Shadow DOM hosts if necessary.
+ *
+ * @param parent - The parent HTMLElement to check containment against.
+ * @param targets - An array of target Elements to correct.
+ * @returns An array of corrected Elements that are contained within the parent.
+ */
+function correctElements(parent: HTMLElement, targets: Element[]): Element[] {
+  return targets
+    .map((target) => {
+      if (parent.contains(target)) {
+        return target;
+      }
+
+      const correctedTarget = unwrapHost(target);
+
+      if (parent.contains(correctedTarget)) {
+        return correctedTarget;
+      }
+
+      return null;
+    })
+    .filter((x): x is Element => x !== null);
+}
+
+/**
+ * Applies the aria-hidden attribute to all elements in the body except the specified avoid elements.
+ */
+function applyAttributeToOthers(
+  uncorrectedAvoidElements: Element[],
+  body: HTMLElement,
+): UndoFn {
+  const avoidElements = correctElements(body, uncorrectedAvoidElements);
+  const elementsToAvoidWithParents = new Set<Node>();
+  const elementsToAvoidUpdating = new Set<Node>(avoidElements);
+  const hiddenElements: Element[] = [];
+
+  avoidElements.forEach(addToAvoidList);
+  applyAttributes(body);
+  elementsToAvoidWithParents.clear();
+
+  function addToAvoidList(el: Node | undefined) {
+    if (!el || elementsToAvoidWithParents.has(el)) {
+      return;
+    }
+
+    elementsToAvoidWithParents.add(el);
+    if (el.parentNode) {
+      addToAvoidList(el.parentNode);
+    }
+  }
+
+  function applyAttributes(parent: Element | null) {
+    if (!parent || elementsToAvoidUpdating.has(parent)) {
+      return;
+    }
+
+    const parentChildren = parent.children;
+
+    for (let index = 0; index < parentChildren.length; index += 1) {
+      const node = parentChildren[index] as Element;
+
+      if (elementsToAvoidWithParents.has(node)) {
+        applyAttributes(node);
+      } else {
+        const attr = node.getAttribute(controlAttribute);
+
+        /*
+         * We only check for falsy values here since since arbitrary values
+         * (e.g. "true", "foo", "") are all valid for indicating that the element is already hidden.
+         */
+        const alreadyHidden = attr !== null && attr !== "false";
+        const counterValue = (ariaHiddenCounter.get(node) || 0) + 1;
+        const markerValue = (markerCounter.get(node) || 0) + 1;
+
+        ariaHiddenCounter.set(node, counterValue);
+        markerCounter.set(node, markerValue);
+        hiddenElements.push(node);
+
+        if (counterValue === 1 && alreadyHidden) {
+          uncontrolledElementsSet.add(node);
+        }
+
+        if (markerValue === 1) {
+          node.setAttribute(markerName, "");
+        }
+
+        if (!alreadyHidden) {
+          node.setAttribute(controlAttribute, "true");
+        }
+      }
+    }
+  }
+
+  lockCount += 1;
+
+  /* Cleanup */
+  return () => {
+    for (const element of hiddenElements) {
+      const currentCounterValue = ariaHiddenCounter.get(element) || 0;
+      const counterValue = currentCounterValue - 1;
+      const markerValue = (markerCounter.get(element) || 0) - 1;
+
+      ariaHiddenCounter.set(element, counterValue);
+      markerCounter.set(element, markerValue);
+
+      if (!counterValue) {
+        if (!uncontrolledElementsSet.has(element)) {
+          element.removeAttribute(controlAttribute);
+        }
+
+        uncontrolledElementsSet.delete(element);
+      }
+
+      if (!markerValue) {
+        element.removeAttribute(markerName);
+      }
+    }
+
+    lockCount -= 1;
+
+    /* Reset */
+    if (!lockCount) {
+      ariaHiddenCounter = new WeakMap();
+      uncontrolledElementsSet = new WeakSet();
+      markerCounter = new WeakMap();
+    }
+  };
+}
+
+/**
+ * Hides all elements in the document body for assertive technologies except the specified elements with `aria-hidden`.
+ * @param avoidElements - An array of elements to avoid hiding.
+ * @returns A function that, when called, will undo the hiding of elements.
+ */
+function hideNonTargetElements(avoidElements: Element[]): UndoFn {
+  const body = ownerDocument(avoidElements[0]).body;
+
+  /**
+   * Assume that elements with `aria-live` or `script` tags should not be hidden.
+   * This ensures that live regions and scripts continue to function properly.
+   */
+  const ingoredElements = Array.from(
+    body.querySelectorAll("[aria-live], script"),
+  );
+
+  return applyAttributeToOthers(avoidElements.concat(ingoredElements), body);
+}
+
+export { hideNonTargetElements };

package/src/util/hooks/descendants/useDescendant.tsx

@@ -46,10 +46,13 @@ export function createDescendantContext<
     useClientLayoutEffect(() => {
       return () => {
         if (!ref.current) return;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         descendants.unregister(ref.current);
       };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useClientLayoutEffect(() => {
       if (!ref.current) return;
       const dataIndex = Number(ref.current.dataset.index);

package/src/util/hooks/useLatestRef.ts

@@ -8,6 +8,7 @@ export function useLatestRef<T>(value: T) {
 
   latest.next = value;
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useClientLayoutEffect(latest.effect);
 
   return latest;