@creative-web-solution/front-library 7.1.51 → 7.1.53

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 7.1.53
+
+- Add AriaAnnouncementHelper
+
+## 7.1.52
+
+- [Popin]: Fix tabulation inside popin
+
 ## 7.1.51
 
 - [Validator]: Update error message selection

package/Helpers/AriaAnnouncementHelper.ts

@@ -0,0 +1,148 @@
+type AriaAnnouncementHelperBaseOptions = {
+    /** In words/minute. Average is between 150 and 200
+     * @default 175
+     */
+    estimatedSpeechSpeed?: number;
+};
+type AriaAnnouncementHelperSelectorsOptions =
+    AriaAnnouncementHelperBaseOptions & {
+        assertiveAreaSelector: string;
+        politeAreaSelector: string;
+    };
+type AriaAnnouncementHelperCssClassOptions =
+    AriaAnnouncementHelperBaseOptions & {
+        areaCssClass?: string;
+    };
+type AriaAnnouncementOptions = OneOf<
+    [
+        AriaAnnouncementHelperSelectorsOptions,
+        AriaAnnouncementHelperCssClassOptions,
+    ]
+>;
+
+type MessagePriority = "polite" | "assertive";
+
+const PRIORITIES: Record<MessagePriority, MessagePriority> = {
+    assertive: "assertive",
+    polite: "polite",
+} as const;
+
+const ESTIMATED_WORDS_BY_MINUTES_SPEED = 175;
+
+export default class AriaAnnouncementHelper {
+    #$assertiveArea!: HTMLElement;
+    #estimatedSpeechSpeed: number;
+    #isSpeeching: boolean = false;
+    #messages: {
+        message: string;
+        priority: MessagePriority;
+    }[] = [];
+    #options?: AriaAnnouncementOptions;
+    #$politeArea!: HTMLElement;
+    #rafId: number = -1;
+    #timeoutId: number = -1;
+
+    constructor(options?: AriaAnnouncementOptions) {
+        this.#options = options;
+        this.#estimatedSpeechSpeed =
+            this.#options?.estimatedSpeechSpeed ??
+            ESTIMATED_WORDS_BY_MINUTES_SPEED;
+        this.#createElements();
+    }
+
+    #createElements(): void {
+        this.#$politeArea = this.#createArea(
+            PRIORITIES.polite,
+            (this.#options as AriaAnnouncementHelperSelectorsOptions)
+                ?.politeAreaSelector,
+        );
+        this.#$assertiveArea = this.#createArea(
+            PRIORITIES.assertive,
+            (this.#options as AriaAnnouncementHelperSelectorsOptions)
+                ?.assertiveAreaSelector,
+        );
+    }
+
+    #createArea(priority: MessagePriority, selector?: string): HTMLElement {
+        let $element: HTMLElement | null = null;
+        if (selector) {
+            $element = document.querySelector<HTMLElement>(selector);
+        }
+        if (!$element) {
+            $element = document.createElement("div");
+            $element.id = `announcement-${priority}`;
+            $element.setAttribute("aria-live", priority);
+            $element.setAttribute("aria-atomic", "true");
+            const areaCssClass = (
+                this.#options as AriaAnnouncementHelperCssClassOptions
+            )?.areaCssClass;
+            if (areaCssClass) {
+                $element.classList.add(areaCssClass);
+            }
+        }
+        document.body.appendChild($element);
+
+        return $element;
+    }
+
+    assertiveMessage(message: string): this {
+        this.#addMessage(message, PRIORITIES.assertive);
+        return this;
+    }
+
+    politeMessage(message: string): this {
+        this.#addMessage(message, PRIORITIES.polite);
+        return this;
+    }
+
+    #addMessage(message: string, priority: MessagePriority): void {
+        this.#messages.push({ message, priority });
+        this.#processMessages();
+    }
+
+    #processMessages(): void {
+        if (this.#isSpeeching || this.#messages.length === 0) {
+            return;
+        }
+        this.#isSpeeching = true;
+        this.#clearZones();
+
+        const { message, priority } = this.#messages.shift()!;
+
+        this.#updateZone(
+            message,
+            priority === PRIORITIES.assertive
+                ? this.#$assertiveArea
+                : this.#$politeArea,
+        );
+
+        this.#timeoutId = setTimeout(() => {
+            this.#isSpeeching = false;
+            this.#processMessages();
+        }, this.#timeEstimationInMs(message));
+    }
+
+    #updateZone(message: string, $element: HTMLElement): void {
+        this.#rafId = requestAnimationFrame(() => {
+            $element.textContent = message;
+        });
+    }
+
+    #timeEstimationInMs(texte: string): number {
+        const wordsCount = texte.split(" ").length;
+        return (wordsCount / this.#estimatedSpeechSpeed) * 60 * 1000;
+    }
+
+    clearAll(): this {
+        this.#messages.length = 0;
+        clearTimeout(this.#timeoutId);
+        cancelAnimationFrame(this.#rafId);
+        this.#clearZones();
+        return this;
+    }
+
+    #clearZones(): void {
+        this.#$politeArea.textContent = "";
+        this.#$assertiveArea.textContent = "";
+    }
+}

package/Modules/Popin/PopinAccessibility.ts

@@ -39,7 +39,7 @@ export default class PopinAccessibility {
 
 
     handleForwardTab( e: Event ): void {
-        if ( this.#$elements?.length || !this.#$lastElement ) {
+        if ( !this.#$elements?.length || !this.#$lastElement ) {
             e.preventDefault();
             return;
         }

package/Modules/Popin/Tools.ts

@@ -1,5 +1,5 @@
 
-export const FOCUSABLE_ELEMENTS_SELECTOR = 'a,button,input,select,textarea';
+export const FOCUSABLE_ELEMENTS_SELECTOR = 'a,button,input,select,textarea,iframe';
 
 export function toggleTabIndex( $elements: NodeListOf<HTMLElement> | undefined | null, $popin: HTMLElement, activate: boolean ): void {
     $elements = $elements || $popin.querySelectorAll( FOCUSABLE_ELEMENTS_SELECTOR );

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.51
+@version: 7.1.53
 
 
 ## Use

package/Types/Global.d.ts

@@ -0,0 +1,25 @@
+type ArrayElement<ArrayType extends readonly unknown[]> =
+    ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+type MergeTypes<TypesArray extends any[], Res = {}> = TypesArray extends [
+    infer Head,
+    ...infer Rem,
+]
+    ? MergeTypes<Rem, Res & Head>
+    : Res;
+
+type OnlyFirst<F, S> = F & { [Key in keyof Omit<S, keyof F>]?: never };
+
+type OneOf<
+    TypesArray extends any[],
+    Res = never,
+    AllProperties = MergeTypes<TypesArray>,
+> = TypesArray extends [infer Head, ...infer Rem]
+    ? OneOf<Rem, Res | OnlyFirst<Head, AllProperties>, AllProperties>
+    : Res;
+
+type Nullable<T> = T | null | undefined;
+
+type NullableRecord<T> = {
+    [K in keyof T]: T[K] | null | undefined;
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.51",
+  "version": "7.1.53",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],