@creative-web-solution/front-library 7.1.58 → 7.1.60

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 7.1.60
+
+- [Accordion]: Updates for accessibility
+- [Tabs]: Add manual selection handling
+
+## 7.1.59
+
+- [DragSlider]: Refresh elements on first interaction
+
 ## 7.1.58
 
 - [Popin]: Fix trap focus bug

package/Modules/Accordion/Tab.ts

@@ -1,51 +1,65 @@
-import { next } from "../../DOM/Traversing";
-
 /**
  * Tab of an accordion
  */
 export default class Tab {
-    #isOpen: boolean;
-    #originalOpenedState: boolean;
-    #$TAB_PANNEL: HTMLElement | null;
-    #options;
-    #$TAB;
+    #isOpen: boolean = false;
+    #originalOpenedState: boolean = false;
+    #$panel!: HTMLElement;
+    #options: FLib.Accordion.TabOptions;
+    #$tab: HTMLElement;
 
     get isOpen(): boolean {
         return this.#isOpen;
     }
 
-    constructor($TAB: HTMLElement, options: FLib.Accordion.TabOptions) {
+    constructor($tab: HTMLElement, options: FLib.Accordion.TabOptions) {
         this.#options = options;
-        this.#$TAB = $TAB;
+        this.#$tab = $tab;
+        this.#init();
+    }
 
-        const ID = $TAB.getAttribute("aria-controls");
-        this.#$TAB_PANNEL = ID
+    #init(): void {
+        const ID = this.#$tab.getAttribute("aria-controls");
+        const $panel = ID
             ? document.getElementById(ID)
-            : (next($TAB) as HTMLElement);
+            : this.#$tab.nextElementSibling as HTMLElement;
+
+        if (!$panel) {
+            let idError = "";
+            if (ID) {
+                idError = ` with id "${ ID }"`;
+            }
+            throw `[TAB] Missing tab panel${ idError }.`;
+        }
 
+        this.#$panel = $panel;
         this.#isOpen = this.#originalOpenedState =
-            $TAB.getAttribute("aria-expanded") === "true";
+            this.#$tab.getAttribute("aria-expanded") === "true";
+
+        this.#$panel.inert = true;
 
         if (this.#isOpen) {
             this.#openTab(true);
         }
+
     }
 
     #changeTabState = (): void => {
-        this.#$TAB.setAttribute(
+        this.#$tab.setAttribute(
             "aria-expanded",
             this.#isOpen ? "true" : "false",
         );
     };
 
     #openTab = (isOpenAtStart?: boolean): void => {
+        this.#$panel.inert = false;
         this.#options.animations
-            .open(this.#$TAB, this.#$TAB_PANNEL)
+            .open(this.#$tab, this.#$panel)
             .then(() => {
                 if (isOpenAtStart && this.#options.onOpenAtStart) {
-                    this.#options.onOpenAtStart(this.#$TAB, this.#$TAB_PANNEL);
+                    this.#options.onOpenAtStart(this.#$tab, this.#$panel);
                 } else if (!isOpenAtStart && this.#options.onOpen) {
-                    this.#options.onOpen(this.#$TAB, this.#$TAB_PANNEL);
+                    this.#options.onOpen(this.#$tab, this.#$panel);
                 }
             });
 
@@ -54,13 +68,14 @@ export default class Tab {
     };
 
     #closeTab = (autoClose?: boolean): void => {
+        this.#$panel.inert = true;
         this.#options.animations
-            .close(this.#$TAB, this.#$TAB_PANNEL)
+            .close(this.#$tab, this.#$panel)
             .then(() => {
                 this.#options.onClose?.(
-                    this.#$TAB,
-                    this.#$TAB_PANNEL,
-                    autoClose,
+                    this.#$tab,
+                    this.#$panel,
+                    autoClose ?? false,
                 );
             });
 
@@ -84,12 +99,13 @@ export default class Tab {
     }
 
     destroy(): this {
-        this.#options.animations.destroy(this.#$TAB, this.#$TAB_PANNEL);
+        this.#options.animations.destroy(this.#$tab, this.#$panel);
 
-        this.#$TAB.setAttribute(
+        this.#$tab.setAttribute(
             "aria-expanded",
             this.#originalOpenedState ? "true" : "false",
         );
+        this.#$panel.inert = false;
 
         return this;
     }

package/Modules/Accordion/index.ts

@@ -8,18 +8,18 @@ const DEFAULT_OPTIONS = {
     allowMultipleTab: false,
     atLeastOneOpen: false,
     animations: {
-        open: function ($TAB, $TAB_PANNEL) {
-            aClass([$TAB, $TAB_PANNEL], "on");
+        open: function ($tab: HTMLElement, $panel: HTMLElement) {
+            aClass([$tab, $panel], "on");
 
             return Promise.resolve();
         },
-        close: function ($TAB, $TAB_PANNEL) {
-            rClass([$TAB, $TAB_PANNEL], "on");
+        close: function ($tab: HTMLElement, $panel: HTMLElement) {
+            rClass([$tab, $panel], "on");
 
             return Promise.resolve();
         },
-        destroy: function ($TAB, $TAB_PANNEL) {
-            rClass([$TAB, $TAB_PANNEL], "on");
+        destroy: function ($tab: HTMLElement, $panel: HTMLElement) {
+            rClass([$tab, $panel], "on");
 
             return Promise.resolve();
         },

package/Modules/DragSlider.ts

@@ -75,7 +75,6 @@ export default class DragSlider {
     #itemMap = new Map<HTMLElement, FLib.DragSlider.Item>();
     #firstItem: FLib.DragSlider.Item | undefined;
     #currentSnapItem: FLib.DragSlider.Item | undefined;
-    #hasAlreadyBeenDragged = false;
     #startDragCoords: FLib.Events.Gesture.Coords | undefined;
     #isInitialized = false;
     #visibleItems: FLib.DragSlider.Item[] = [];
@@ -83,6 +82,7 @@ export default class DragSlider {
     #debouncedOnResize;
     #minXPos: number = 0;
     #maxXPos: number = 0;
+    #interactedWithSliderOneTime: boolean = false;
 
     get count(): number {
         return this.#$items?.length ?? 0;
@@ -405,10 +405,7 @@ export default class DragSlider {
         $target: HTMLElement,
         coords: FLib.Events.Gesture.Coords
     ): void => {
-        if (!this.#hasAlreadyBeenDragged) {
-            this.#onResize();
-            this.#hasAlreadyBeenDragged = true;
-        }
+        this.#checkForFirstInteraction();
 
         if (!this.#isDraggingActive || !this.#$list) {
             return;
@@ -515,6 +512,8 @@ export default class DragSlider {
     };
 
     next(): Promise<any> {
+        this.#checkForFirstInteraction();
+
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
         if (
@@ -530,6 +529,8 @@ export default class DragSlider {
     }
 
     previous(): Promise<any> {
+        this.#checkForFirstInteraction();
+
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
         if (!this.#isDraggingActive || CURRENT_ITEM.isFirst) {
@@ -546,6 +547,8 @@ export default class DragSlider {
             return Promise.resolve();
         }
 
+        this.#checkForFirstInteraction();
+
         let $block;
 
         if (typeof blockOrIndex === "number") {
@@ -587,6 +590,14 @@ export default class DragSlider {
             .then(() => this.#updateAccessibilityFeature());
     }
 
+
+    #checkForFirstInteraction(): void {
+        if (!this.#interactedWithSliderOneTime) {
+            this.#interactedWithSliderOneTime = true;
+            this.#onResize();
+        }
+    }
+
     #updateAccessibilityFeature = (): void => {
         this.#visibleItems.length = 0;
         this.#hiddenItems.length = 0;
@@ -697,7 +708,7 @@ export default class DragSlider {
 
     destroy(): this {
         this.#isInitialized = false;
-        this.#hasAlreadyBeenDragged = false;
+        this.#interactedWithSliderOneTime = false;
 
         if (!this.#$items?.length) {
             return this;

package/Modules/Tabs/Tab.ts

@@ -4,13 +4,13 @@ import { on, off }        from '../../Events/EventsManager';
 /**
  * Tab of a tabs list
  */
-export default class Tab implements FLib.Tabs.Tab {
+export default class Tab {
 
-    #options:             FLib.Tabs.TabOptions;
-    #$TAB:                HTMLElement;
-    #$TAB_PANNEL:         HTMLElement;
-    #isOpen:              boolean;
-    #originalOpenedState: boolean;
+    #options: FLib.Tabs.TabOptions;
+    #$tab: HTMLElement;
+    #panel!: HTMLElement;
+    #isOpen: boolean = false;
+    #originalOpenedState: boolean = false;
 
 
     get isOpened(): boolean {
@@ -22,58 +22,72 @@ export default class Tab implements FLib.Tabs.Tab {
     }
 
 
-    constructor( $TAB: HTMLElement, options: FLib.Tabs.TabOptions ) {
+    constructor( $tab: HTMLElement, options: FLib.Tabs.TabOptions ) {
         this.#options = options;
-        this.#$TAB    = $TAB;
+        this.#$tab    = $tab;
 
-        const ID = $TAB.getAttribute( 'aria-controls' );
+        this.#init();
+    }
+
+    #init(): void {
+        const ID = this.#$tab.getAttribute( 'aria-controls' );
 
         if ( !ID ) {
             throw `Missing "aria-controls" attributes on tab element`;
         }
 
-        this.#$TAB_PANNEL = document.getElementById( ID ) as HTMLElement;
+        this.#panel = document.getElementById( ID ) as HTMLElement;
 
-        if ( !this.#$TAB_PANNEL ) {
+        if ( !this.#panel ) {
             throw `Unable to find panel element id="${ ID }" attributes on tab element`;
         }
 
-        this.#isOpen = this.#originalOpenedState = $TAB.getAttribute( 'aria-selected' ) === 'true';
+        this.#isOpen = this.#originalOpenedState = this.#$tab.getAttribute( 'aria-selected' ) === 'true';
+        this.#panel.inert = true;
 
-        on( $TAB, {
+        on( this.#$tab, {
             "eventsName": "click",
             "callback":   this.#toggleTab
         } );
 
+        on( this.#$tab, {
+            "eventsName": "focus",
+            "callback":   this.#onFocusTab
+        } );
+
         if ( this.#isOpen ) {
             this.#openTab( true );
         }
     }
 
+    #onFocusTab = (): void => {
+        this.#options.onFocusTab?.(this);
+    }
 
-    #changeTabState = ( isOpenAtStart?: boolean ): void => {
-        this.#$TAB.setAttribute( 'aria-selected', this.#isOpen ? 'true' : 'false' );
-        this.#$TAB.setAttribute( 'tabindex', this.#isOpen ? '0' : '-1' );
+    #toggleTab = ( e: Event ): void => {
+        e.preventDefault();
 
-        if ( this.#isOpen && !isOpenAtStart ) {
-            this.#$TAB.focus();
+        if( this.#isOpen ) {
+            this.#closeTab();
+        }
+        else {
+            this.#openTab();
         }
-
     }
 
 
     #openTab = ( isOpenAtStart?: boolean ): void => {
+        this.#panel.inert = false;
         this.#options.animations
-                    .open( this.#$TAB, this.#$TAB_PANNEL )
-                    .then( () => {
-
-                        if ( isOpenAtStart && this.#options.onOpenAtStart ) {
-                            this.#options.onOpenAtStart( this.#$TAB, this.#$TAB_PANNEL );
-                        }
-                        else if ( !isOpenAtStart && this.#options.onOpen ) {
-                            this.#options.onOpen( this.#$TAB, this.#$TAB_PANNEL );
-                        }
-                    } );
+            .open( this.#$tab, this.#panel )
+            .then( () => {
+                if ( isOpenAtStart && this.#options.onOpenAtStart ) {
+                    this.#options.onOpenAtStart( this.#$tab, this.#panel );
+                }
+                else if ( !isOpenAtStart && this.#options.onOpen ) {
+                    this.#options.onOpen( this.#$tab, this.#panel );
+                }
+            } );
 
         if ( this.#options.onOpenTab ) {
             this.#options.onOpenTab( this );
@@ -84,11 +98,12 @@ export default class Tab implements FLib.Tabs.Tab {
 
 
     #closeTab = ( autoClose?: boolean ): void => {
+        this.#panel.inert = true;
         this.#options.animations
-                    .close( this.#$TAB, this.#$TAB_PANNEL )
+                    .close( this.#$tab, this.#panel )
                     .then( () => {
                         if ( this.#options.onClose ) {
-                            this.#options.onClose( this.#$TAB, this.#$TAB_PANNEL, autoClose );
+                            this.#options.onClose( this.#$tab, this.#panel, autoClose );
                         }
                     } );
         this.#isOpen = false;
@@ -96,14 +111,12 @@ export default class Tab implements FLib.Tabs.Tab {
     }
 
 
-    #toggleTab = ( e: Event ): void => {
-        e.preventDefault();
+    #changeTabState = ( isOpenAtStart?: boolean ): void => {
+        this.#$tab.setAttribute( 'aria-selected', this.#isOpen ? 'true' : 'false' );
+        this.#$tab.setAttribute( 'tabindex', this.#isOpen ? '0' : '-1' );
 
-        if( this.#isOpen ) {
-            this.#closeTab();
-        }
-        else {
-            this.#openTab();
+        if ( this.#isOpen && !isOpenAtStart ) {
+            this.#$tab.focus();
         }
     }
 
@@ -125,16 +138,22 @@ export default class Tab implements FLib.Tabs.Tab {
         return this;
     }
 
+    focusTab(): this {
+        this.#$tab.focus();
+        return this;
+    }
+
 
     destroy(): this {
-        this.#options.animations.destroy( this.#$TAB, this.#$TAB_PANNEL );
+        this.#options.animations.destroy( this.#$tab, this.#panel );
+        this.#panel.inert = false;
 
-        off( this.#$TAB, {
+        off( this.#$tab, {
             "eventsName": "click",
             "callback": this.#toggleTab
         } );
 
-        this.#$TAB.setAttribute( 'aria-selected', this.#originalOpenedState ? 'true' : 'false' );
+        this.#$tab.setAttribute( 'aria-selected', this.#originalOpenedState ? 'true' : 'false' );
 
         return this;
     }

package/Modules/Tabs/index.ts

@@ -6,19 +6,20 @@ import Tab                 from './Tab';
 
 const DEFAULT_OPTIONS = {
     "tabSelector":      "li[aria-selected]",
+    "selectOnFocus":    false,
     "animations": {
-        "open": function( $TAB, $TAB_PANNEL ) {
-            aClass( [ $TAB, $TAB_PANNEL ], 'on' );
+        "open": function( $tab: HTMLElement, $panel: HTMLElement ) {
+            aClass( [ $tab, $panel ], 'on' );
 
             return Promise.resolve();
         },
-        "close": function( $TAB, $TAB_PANNEL ) {
-            rClass( [ $TAB, $TAB_PANNEL ], 'on' );
+        "close": function( $tab: HTMLElement, $panel: HTMLElement ) {
+            rClass( [ $tab, $panel ], 'on' );
 
             return Promise.resolve();
         },
-        "destroy": function( $TAB, $TAB_PANNEL ) {
-            rClass( [ $TAB, $TAB_PANNEL ], 'on' );
+        "destroy": function( $tab: HTMLElement, $panel: HTMLElement ) {
+            rClass( [ $tab, $panel ], 'on' );
 
             return Promise.resolve();
         }
@@ -98,10 +99,11 @@ export default class Tabs {
     #options:        FLib.Tabs.Options;
     #$TABS_LIST:     HTMLElement;
     #$TABS:          NodeList;
-    #tablist:        FLib.Tabs.Tab[];
+    #tablist:        Tab[];
     #status:         string;
     #VERTICAL_MODE:  boolean;
-    #lastOpenedTab:  FLib.Tabs.Tab | undefined;
+    #lastOpenedTab:  Tab | undefined;
+    #lastFocusedTab: Tab | undefined;
     #keyboard:       KeyboardHandler | undefined;
     #$tabsWrapper:   HTMLElement;
 
@@ -124,7 +126,7 @@ export default class Tabs {
     }
 
 
-    #onOpenTab = ( tab: FLib.Tabs.Tab ): void => {
+    #onOpenTab = ( tab: Tab ): void => {
         if ( this.#lastOpenedTab ) {
             this.#lastOpenedTab.close( true );
         }
@@ -134,18 +136,54 @@ export default class Tabs {
 
 
     #onNext = (): void => {
-        const lastIndex   = this.#lastOpenedTab ? this.#lastOpenedTab.index : 0;
+        if (this.#options.selectOnFocus) {
+            const lastIndex   = this.#lastOpenedTab ? this.#lastOpenedTab.index : 0;
+            const indexToOpen = lastIndex + 1 >= this.#tablist.length ? 0 : lastIndex + 1;
+
+            this.#tablist[ indexToOpen ].open();
+            return;
+        }
+
+        const lastIndex   = this.#lastFocusedTab ? this.#lastFocusedTab.index : 0;
         const indexToOpen = lastIndex + 1 >= this.#tablist.length ? 0 : lastIndex + 1;
 
-        this.#tablist[ indexToOpen ].open();
+        this.#tablist[ indexToOpen ].focusTab();
     }
 
 
     #onPrevious = (): void => {
-        const lastIndex   = this.#lastOpenedTab ? this.#lastOpenedTab.index : 0;
+        if (this.#options.selectOnFocus) {
+            const lastIndex   = this.#lastOpenedTab ? this.#lastOpenedTab.index : 0;
+            const indexToOpen = lastIndex - 1 < 0 ? this.#tablist.length - 1 : lastIndex - 1;
+
+            this.#tablist[ indexToOpen ].open();
+            return;
+        }
+
+        const lastIndex   = this.#lastFocusedTab ? this.#lastFocusedTab.index : 0;
         const indexToOpen = lastIndex - 1 < 0 ? this.#tablist.length - 1 : lastIndex - 1;
 
-        this.#tablist[ indexToOpen ].open();
+        this.#tablist[ indexToOpen ].focusTab();
+    }
+
+
+    #onFirst = (): void => {
+        if (this.#options.selectOnFocus) {
+            this.#tablist[ 0 ].open();
+            return;
+        }
+
+        this.#tablist[ 0 ].focusTab();
+    }
+
+
+    #onLast = (): void => {
+        if (this.#options.selectOnFocus) {
+            this.#tablist[ this.#tablist.length - 1 ].open();
+            return;
+        }
+
+        this.#tablist[ this.#tablist.length - 1 ].focusTab();
     }
 
 
@@ -162,7 +200,8 @@ export default class Tabs {
             const tab = new Tab( $tab as HTMLElement, {
                 ...this.#options,
                 index,
-                "onOpenTab": this.#onOpenTab
+                "onOpenTab": this.#onOpenTab,
+                "onFocusTab": this.#onFocusTab
             } );
 
             this.#tablist.push( tab );
@@ -180,16 +219,35 @@ export default class Tabs {
             this.#keyboard = new KeyboardHandler( this.#$tabsWrapper, {
                 "selector": this.#options.tabSelector,
                 "onUp":     this.#onPrevious,
-                "onDown":   this.#onNext
+                "onDown":   this.#onNext,
+                "onHome":   this.#onFirst,
+                "onEnd":   this.#onLast,
+                "onSelect": this.#onSelect
             } );
+
+            return;
         }
-        else {
-            this.#keyboard = new KeyboardHandler( this.#$tabsWrapper, {
-                "selector": this.#options.tabSelector,
-                "onRight":  this.#onNext,
-                "onLeft":   this.#onPrevious
-            } );
+
+        this.#keyboard = new KeyboardHandler( this.#$tabsWrapper, {
+            "selector": this.#options.tabSelector,
+            "onRight":  this.#onNext,
+            "onLeft":   this.#onPrevious,
+            "onHome":   this.#onFirst,
+            "onEnd":   this.#onLast,
+            "onSelect": this.#onSelect
+        } );
+    }
+
+    #onSelect = (): void => {
+        if (!this.#lastFocusedTab) {
+            return;
         }
+
+        this.#lastFocusedTab.open();
+    }
+
+    #onFocusTab = (tab: Tab): void => {
+        this.#lastFocusedTab = tab;
     }
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.58
+@version: 7.1.60
 
 
 ## Use

package/Types/Accordion.d.ts

@@ -27,15 +27,14 @@ declare namespace FLib {
             onOpenAtStart: Callback;
             onOpen: Callback;
             onClose: CloseCallback;
-            animations: Partial<AnimationOptions>;
+            animations: AnimationOptions;
         }
 
-        interface OptionsInit extends Partial<Options> {
-            animations?: Partial<AnimationOptions>;
-        }
+        type OptionsInit = Partial<Options>
 
         interface TabOptions extends Options {
             index: number;
+            animations: AnimationOptions;
         }
     }
 }

package/Types/Tabs.d.ts

@@ -3,17 +3,11 @@ declare namespace FLib {
         type AnimationFunction = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
         type Callback          = ( $tab: HTMLElement, $panel: HTMLElement, autoClose?: boolean ) => void;
 
-        interface Tab {
-            isOpened:                    boolean;
-            index:                       number;
-            close( autoClose?: boolean ): this;
-            open( autoOpen?: boolean ):   this;
-            destroy():                   this;
-        }
-
         type Options = {
             /** @defaultValue 'li[aria-selected]' */
             tabSelector:    string;
+            /** @defaultValue false */
+            selectOnFocus?:  boolean;
             onOpenAtStart?: Callback;
             onOpen?:        Callback;
             onClose?:       Callback;
@@ -27,6 +21,7 @@ declare namespace FLib {
 
         type TabOptions = Options & {
             onOpenTab?: ( tab: Tab ) => void;
+            onFocusTab?: ( tab: Tab ) => void;
             index:     number;
         }
     }

package/package.json

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