@fluid-topics/ft-wc-utils 1.2.50 → 1.2.52

package/build/FtLitElement.d.ts

@@ -8,7 +8,7 @@ declare const dynamicDependenciesLoaded: unique symbol;
 export type FtElementToFocus = {
     element?: Optional<HTMLElement>;
     selector?: string;
-    isKeyboardNavigation?: boolean;
+    shadowPath?: string[];
 };
 export declare class FtLitElement extends ScopedRegistryLitElement {
     exportpartsPrefix?: string;

package/build/FtLitElement.js

@@ -9,6 +9,7 @@ import { property, state } from "lit/decorators.js";
 import { jsonProperty } from "./decorators";
 import { Debouncer } from "./Debouncer";
 import { ScopedRegistryLitElement } from "./ScopedRegistryLitElement";
+import { shadowQuerySelector } from "./shadowQuerySelector";
 const constructorPrototype = Symbol("constructorPrototype");
 const constructorName = Symbol("constructorName");
 const exportpartsDebouncer = Symbol("exportpartsDebouncer");
@@ -57,12 +58,13 @@ export class FtLitElement extends ScopedRegistryLitElement {
     }
     contentAvailableCallback(props) {
         if (props.has("elementToFocus") && this.elementToFocus != null) {
-            let { element, selector, isKeyboardNavigation } = this.elementToFocus;
+            let { element, selector, shadowPath } = this.elementToFocus;
             if (selector != null) {
-                element = this.shadowRoot.querySelector(selector);
+                const selectors = [...shadowPath !== null && shadowPath !== void 0 ? shadowPath : [], selector];
+                element = shadowQuerySelector(this.shadowRoot, ...selectors);
             }
             element === null || element === void 0 ? void 0 : element.focus();
-            if (!isKeyboardNavigation) {
+            if (!window.FluidTopicsA11yHints.isKeyboardNavigation) {
                 element === null || element === void 0 ? void 0 : element.blur();
             }
             this.elementToFocus = undefined;

package/build/a11y/FluidTopicsA11yEvents.d.ts

@@ -0,0 +1,3 @@
+export declare class FocusMainContentEvent extends Event {
+    constructor();
+}

package/build/a11y/FluidTopicsA11yEvents.js

@@ -0,0 +1,5 @@
+export class FocusMainContentEvent extends Event {
+    constructor() {
+        super("ft-focus-main-content", { composed: true, bubbles: true });
+    }
+}

package/build/a11y/FluidTopicsA11yHints.d.ts

@@ -0,0 +1,8 @@
+export interface FluidTopicsA11yHints {
+    isKeyboardNavigation: boolean;
+}
+declare global {
+    interface Window {
+        FluidTopicsA11yHints: FluidTopicsA11yHints;
+    }
+}

package/build/a11y/FluidTopicsA11yHints.js

@@ -0,0 +1,15 @@
+window.FluidTopicsA11yHints = {
+    isKeyboardNavigation: false,
+};
+function onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
+        window.FluidTopicsA11yHints.isKeyboardNavigation = true;
+    }
+}
+function onClick(event) {
+    // event.detail contains the number of clicks. If it is equal to 0, that means we are using a keyboard
+    window.FluidTopicsA11yHints.isKeyboardNavigation = event.detail == 0;
+}
+document.body.addEventListener("keydown", onKeyDown);
+document.body.addEventListener("click", onClick);
+export {};