@navikt/ds-react 8.4.1 → 8.5.1

package/src/data/table/helpers/table-focus.ts

@@ -1,3 +1,29 @@
+/**
+ * WeakMap to store original tabIndex values for cells.
+ * Used to restore tabIndex when navigation moves away from a cell.
+ */
+const originalTabIndexMap = new WeakMap<Element, number>();
+
+/**
+ * Stores the original tabIndex of a cell if not already stored, and returns it.
+ */
+function syncOriginalTabIndex(cell: Element): void {
+  if (!originalTabIndexMap.has(cell)) {
+    const current = (cell as HTMLElement).tabIndex;
+    originalTabIndexMap.set(cell, current);
+  }
+}
+
+/**
+ * Restores the original tabIndex for a cell.
+ */
+function restoreTabIndex(cell: Element): void {
+  const original = originalTabIndexMap.get(cell);
+  if (original !== undefined) {
+    (cell as HTMLElement).tabIndex = original;
+  }
+}
+
 /**
  * Makes sure only focusable and non-disabled elements are targeted when navigating through the table using keyboard interactions.
  * Tries to find the most logical focus target inside a cell, by looking for commonly used interactive elements,
@@ -6,7 +32,7 @@
  * If the assumed focus target is not the cell itself, we check if that element is hidden or disabled, and fall back to the cell if so,
  * since we want to avoid/can't focus hidden/disabled elements.
  */
-function getFocusableTarget(cell: Element): HTMLElement | null {
+function findFocusableElementInCell(cell: Element): HTMLElement | null {
   const el = cell as HTMLElement | null;
   if (!el || isHiddenElement(el)) {
     return null;
@@ -31,8 +57,7 @@ function getFocusableTarget(cell: Element): HTMLElement | null {
 }
 
 /**
- * TODO:
- * - validate this implementation against SR-only elements
+ * Checks if an element is visually hidden (but not SR-only).
  */
 function isHiddenElement(el: HTMLElement): boolean {
   if (el.hidden) {
@@ -43,6 +68,9 @@ function isHiddenElement(el: HTMLElement): boolean {
   return style.display === "none" || style.visibility === "hidden";
 }
 
+/**
+ * Checks if an element is disabled (via aria-disabled, fieldset, or native disabled property).
+ */
 function isDisabledElement(el: HTMLElement): boolean {
   if (el.getAttribute("aria-disabled") === "true") {
     return true;
@@ -64,8 +92,12 @@ function isDisabledElement(el: HTMLElement): boolean {
   return false;
 }
 
-function focusCell(cell: Element): Element | null {
-  const focusTarget = getFocusableTarget(cell);
+/**
+ * Determines the focus target and updates tabIndex if the cell itself should be focused.
+ * Returns null if no focusable target found.
+ */
+function prepareCellFocus(cell: Element): HTMLElement | null {
+  const focusTarget = findFocusableElementInCell(cell);
   if (!focusTarget) {
     return null;
   }
@@ -74,15 +106,34 @@ function focusCell(cell: Element): Element | null {
     (cell as HTMLElement).tabIndex = 0;
   }
 
-  focusTarget.focus({
+  return focusTarget;
+}
+
+/**
+ * Applies focus and scroll to an element.
+ */
+function applyFocusAndScroll(element: HTMLElement): void {
+  element.focus({
     preventScroll: true,
   });
 
-  focusTarget.scrollIntoView({
+  element.scrollIntoView({
     behavior: "smooth",
     block: "nearest",
     inline: "nearest",
   });
+}
+
+/**
+ * Focuses a cell by finding its focusable target and applying focus with scroll.
+ */
+function focusCell(cell: Element): Element | null {
+  const focusTarget = prepareCellFocus(cell);
+  if (!focusTarget) {
+    return null;
+  }
+
+  applyFocusAndScroll(focusTarget);
   return cell;
 }
 
@@ -92,7 +143,8 @@ function focusCellAndUpdateTabIndex(
   { shouldFocus = true }: { shouldFocus?: boolean } = {},
 ): Element | null {
   if (previousCell && previousCell !== nextCell) {
-    (previousCell as HTMLElement).tabIndex = -1;
+    syncOriginalTabIndex(previousCell);
+    restoreTabIndex(previousCell);
   }
 
   if (!shouldFocus) {
@@ -102,4 +154,13 @@ function focusCellAndUpdateTabIndex(
   return focusCell(nextCell);
 }
 
-export { focusCell, focusCellAndUpdateTabIndex, getFocusableTarget };
+export {
+  applyFocusAndScroll,
+  focusCell,
+  focusCellAndUpdateTabIndex,
+  findFocusableElementInCell,
+  isDisabledElement,
+  isHiddenElement,
+  prepareCellFocus,
+  restoreTabIndex,
+};