feat: improve/refactor focus handling (#17796)

* feat: improve focus

* test

* lint

* use modulus in loop

web/src/lib/utils/focus-util.ts

@@ -1,4 +1,39 @@
-const selectors =
-  'button:not([disabled], .hidden), [href]:not(.hidden), input:not([disabled], .hidden), select:not([disabled], .hidden), textarea:not([disabled], .hidden), [tabindex]:not([tabindex="-1"], .hidden)';
+import { focusable, isTabbable, tabbable, type CheckOptions, type TabbableOptions } from 'tabbable';
 
-export const getFocusable = (container: ParentNode) => [...container.querySelectorAll<HTMLElement>(selectors)];
+type TabbableOpts = TabbableOptions & CheckOptions;
+let defaultOpts: TabbableOpts = {
+  includeContainer: false,
+};
+
+export const setDefaultTabbleOptions = (options: TabbableOpts) => {
+  defaultOpts = options;
+};
+
+export const getTabbable = (container: Element, includeContainer: boolean = false) =>
+  tabbable(container, { ...defaultOpts, includeContainer });
+
+export const focusNext = (selector: (element: HTMLElement | SVGElement) => boolean, forwardDirection: boolean) => {
+  const focusElements = focusable(document.body, { includeContainer: true });
+  const current = document.activeElement as HTMLElement;
+  const index = focusElements.indexOf(current);
+  if (index === -1) {
+    for (const element of focusElements) {
+      if (selector(element)) {
+        element.focus();
+        return;
+      }
+    }
+    focusElements[0].focus();
+    return;
+  }
+  const totalElements = focusElements.length;
+  let i = index;
+  do {
+    i = (i + (forwardDirection ? 1 : -1) + totalElements) % totalElements;
+    const next = focusElements[i];
+    if (isTabbable(next) && selector(next)) {
+      next.focus();
+      break;
+    }
+  } while (i !== index);
+};