@fluid-topics/ft-filter 1.2.48 → 1.2.50

package/build/ft-filter-level.d.ts

@@ -21,6 +21,8 @@ export declare class FtFilterLevel extends FtLitElement {
     get hasHiddenValues(): boolean;
     private get limit();
     get height(): number;
+    focusOnBackButton(): void;
+    focusOnExpandButton(value: string): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private goBackOnKeyPress;
     private goBackOnClick;

package/build/ft-filter-level.js

@@ -41,6 +41,19 @@ class FtFilterLevel extends FtLitElement {
         var _a, _b;
         return (_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
     }
+    focusOnBackButton() {
+        this.elementToFocus = {
+            selector: `.ft-filter-level--go-back`,
+            isKeyboardNavigation: true,
+        };
+    }
+    focusOnExpandButton(value) {
+        // Find the correct expand button associated with the checkbox value
+        this.elementToFocus = {
+            selector: `.ft-filter-level--option ft-button[part="controls navigate-hierarchy"][data-value="${value}"]`,
+            isKeyboardNavigation: true,
+        };
+    }
     render() {
         let options = [...this.options];
         if (this.hideSelectedOptions) {
@@ -84,6 +97,7 @@ class FtFilterLevel extends FtLitElement {
                                         <ft-button icon="thin_arrow_right"
                                                    part="controls navigate-hierarchy"
                                                    aria-label="Expand node"
+                                                   data-value="${option.value}"
                                                    ?disabled=${this.disabled}
                                                    hideTooltip
                                                    @click=${() => this.displayLevel(option)}></ft-button>
@@ -115,13 +129,20 @@ class FtFilterLevel extends FtLitElement {
         this.dispatchEvent(new CustomEvent("go-back", { detail: this.parent }));
     }
     displayMore() {
+        var _a;
+        const previousLimit = (_a = this.limit) !== null && _a !== void 0 ? _a : 0;
         this.displayedPages++;
+        // Wait for the component update before focusing on the first new option
+        this.elementToFocus = {
+            selector: `.ft-filter-level--option:nth-child(${previousLimit + 2}) [part~="option"]`,
+            isKeyboardNavigation: true,
+        };
     }
     buildMultiValuedOption(option) {
         var _a;
         return html `
             <ft-checkbox name="${this.filterId}"
-                         part="multivalued-option"
+                         part="multivalued-option option"
                          data-value="${option.value}"
                          .checked=${option.selected}
                          .disabled=${this.disabled}
@@ -134,7 +155,7 @@ class FtFilterLevel extends FtLitElement {
     buildMonoValuedOption(option) {
         return html `
             <ft-radio name="${this.filterId + Math.round(Math.random() * 1000000)}"
-                      part="monovalued-option"
+                      part="monovalued-option option"
                       data-value="${option.value}"
                       value="${option.value}"
                       .checked=${option.selected}

package/build/ft-filter.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from "lit";
 import { property, query, queryAll, state } from "lit/decorators.js";
-import { Debouncer, deepEqual, flatDeep, FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, deepEqual, flatDeep, FtLitElement, jsonProperty, waitUntil } from "@fluid-topics/ft-wc-utils";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtFilterLevel } from "./ft-filter-level";
 import { FtButton } from "@fluid-topics/ft-button";
@@ -102,7 +102,7 @@ class FtFilter extends FtLitElement {
         }
     }
     contentAvailableCallback(props) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         super.contentAvailableCallback(props);
         if (this.valuesContainer) {
             this.scrollResizeObserver.observe(this.valuesContainer);
@@ -115,20 +115,19 @@ class FtFilter extends FtLitElement {
             (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.scrollToIndex(this.displayedLevels.length);
         }
         if (props.has("slideIn") && this.slideIn) {
+            (_b = this.levelsContainer) === null || _b === void 0 ? void 0 : _b.next();
             setTimeout(() => {
-                var _a;
-                (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.next();
                 this.slideIn = undefined;
-            }, 0);
+            }, 300);
         }
         if (props.has("slideOut") && this.slideOut) {
-            (_b = this.levelsContainer) === null || _b === void 0 ? void 0 : _b.previous();
+            (_c = this.levelsContainer) === null || _c === void 0 ? void 0 : _c.previous();
             setTimeout(() => {
                 this.displayedLevels.pop();
                 this.slideOut = undefined;
             }, 300);
         }
-        this.lastLevelHasHiddenvalues = (_e = (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(".ft-filter--levels ft-filter-level:last-child")) === null || _d === void 0 ? void 0 : _d.hasHiddenValues) !== null && _e !== void 0 ? _e : false;
+        this.lastLevelHasHiddenvalues = (_f = (_e = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(".ft-filter--levels ft-filter-level:last-child")) === null || _e === void 0 ? void 0 : _e.hasHiddenValues) !== null && _f !== void 0 ? _f : false;
     }
     renderLevels() {
         const allOptions = this.flatOptions;
@@ -200,10 +199,22 @@ class FtFilter extends FtLitElement {
     }
     goBack(e) {
         this.slideOut = e.detail.value;
+        // After the animation completes, move focus to the navigate-hierarchy button
+        waitUntil(() => this.slideOut === undefined).then(() => {
+            var _a;
+            const previousLevel = (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.querySelector(".ft-filter--level-center");
+            previousLevel === null || previousLevel === void 0 ? void 0 : previousLevel.focusOnExpandButton(e.detail.value);
+        });
     }
     onDisplayLevel(e) {
         this.displayedLevels.push(e.detail.value);
         this.slideIn = e.detail.value;
+        // After the animation completes, move focus to the go back button
+        waitUntil(() => this.slideIn === undefined).then(() => {
+            var _a;
+            const newLevel = (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.querySelector(".ft-filter--level-center");
+            newLevel === null || newLevel === void 0 ? void 0 : newLevel.focusOnBackButton();
+        });
     }
     clear() {
         this.flatOptions.forEach(o => o.selected = false);