@creative-web-solution/front-library 7.1.52 → 7.1.54

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 7.1.54
+
+- [Autocomplete]: Remove shouldMarkValue configuration
+
+## 7.1.53
+
+- Add AriaAnnouncementHelper
+
 ## 7.1.52
 
 - [Popin]: Fix tabulation inside popin

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/Autocomplete/AbstractAutocompleteAdapter.ts

@@ -8,12 +8,12 @@ export default abstract class AbstractAutocompleteAdapter<ItemDataType> {
         query: string,
         $input: HTMLElement,
     ): Record<string, any>;
-    abstract markValue(options: {
+    markValue?(options: {
         item: ItemDataType;
         index: number;
         query: string;
     }): ItemDataType;
-    abstract updateInputValueFromItem?(options: {
+    updateInputValueFromItem?(options: {
         item: ItemDataType;
         index: number;
         query: string;

package/Modules/Autocomplete/index.ts

@@ -25,7 +25,6 @@ type AutocompleteOptions<ItemDataType> = {
         results: ItemDataType[];
     }) => void;
     $searchField: HTMLInputElement;
-    shouldMarkValue?: boolean;
 };
 
 const PREVENT_DEFAULT_KEY_LIST = [
@@ -49,7 +48,6 @@ const DEFAULT_OPTIONS = {
     layerPosition: "top",
     $layerWrapper: document.body,
     minChar: 3,
-    shouldMarkValue: false,
 };
 
 export default class Autocomplete<ItemDataType> {
@@ -222,13 +220,11 @@ export default class Autocomplete<ItemDataType> {
         this.resetResults();
 
         this.#currentResults = results.map((item, index) => {
-            const markedItem = this.#options.shouldMarkValue
-                ? this.#adapter.markValue({
+            const markedItem = this.#adapter.markValue?.({
                       item,
                       index,
                       query: this.#currentQuery,
-                  })
-                : item;
+                  }) ?? item;
             const $item = strToDOM(
                 this.#adapter.itemRender({
                     item: markedItem,

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.52
+@version: 7.1.54
 
 
 ## 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.52",
+  "version": "7.1.54",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],