[CL-724] Vault list item keyboard nav dialog (#15591)

* add focus-visible-within util

* wip: add grid a11y dialog to vault

* add story and i18n

libs/common/src/platform/state/state-definitions.ts

@@ -200,3 +200,7 @@ export const VAULT_BROWSER_INTRO_CAROUSEL = new StateDefinition(
   "vaultBrowserIntroCarousel",
   "disk",
 );
+export const VAULT_ITEM_GROUP_NAVIGATION_DIALOG = new StateDefinition(
+  "vaultItemGroupNavigationDialog",
+  "disk",
+);

libs/components/src/a11y/index.ts

@@ -1 +1,4 @@
+export * from "./a11y-cell.directive";
+export * from "./a11y-grid.directive";
+export * from "./a11y-row.directive";
 export * from "./a11y-title.directive";

libs/components/src/utils/focus-visible-within.ts

@@ -0,0 +1,47 @@
+import { Directive, ElementRef, inject, input, output } from "@angular/core";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
+import { filter, fromEvent, map, switchMap } from "rxjs";
+
+@Directive({
+  selector: "[bitFocusVisibleWithin]",
+})
+export class FocusVisibleWithinDirective {
+  private elementRef = inject(ElementRef) as ElementRef<HTMLElement>;
+
+  /**
+   * Emits when the host element has a child with `:focus-visible`.
+   *
+   * The target selector can be narrowed with the `selector` input.
+   **/
+  bitFocusVisibleWithin = output<void>();
+
+  /**
+   * The child selector to watch.
+   *
+   * Defaults to `:focus-visble`, but sometimes it may be useful to be more specific, e.g. `foo-bar:focus-visible`.
+   **/
+  selector = input<`${string}:focus-visible`>(":focus-visible");
+
+  constructor() {
+    toObservable(this.selector)
+      .pipe(
+        switchMap((selector) =>
+          fromEvent(this.elementRef.nativeElement, "focusin").pipe(
+            map(() => {
+              const activeEl = document.activeElement;
+              return (
+                !!activeEl &&
+                this.elementRef.nativeElement.contains(activeEl) &&
+                activeEl.matches(selector)
+              );
+            }),
+          ),
+        ),
+        filter((hasFocusVisibleWithin) => hasFocusVisibleWithin),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => {
+        this.bitFocusVisibleWithin.emit();
+      });
+  }
+}

libs/components/src/utils/index.ts

@@ -1,2 +1,3 @@
+export * from "./focus-visible-within";
 export * from "./function-to-observable";
 export * from "./i18n-mock.service";