@fluid-topics/ft-filter 1.1.71 → 1.1.72

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

@@ -16,6 +16,7 @@ export declare class FtFilterLevel extends FtLitElement {
     private noValuesLabel?;
     displayedValuesLimit: number;
     private container?;
+    private radios?;
     private displayedPages;
     get hasHiddenValues(): boolean;
     private get limit();
@@ -24,9 +25,12 @@ export declare class FtFilterLevel extends FtLitElement {
     private goBackOnKeyPress;
     private goBackOnClick;
     private displayMore;
+    private onRadioChange;
     private buildMultiValuedOption;
     private buildMonoValuedOption;
     private onRadioKeyUp;
     private optionsChanged;
     private displayLevel;
+    connectedCallback(): void;
+    private makeRadioKeyBoardNavigable;
 }

package/build/ft-filter-level.js

@@ -56,6 +56,7 @@ class FtFilterLevel extends FtLitElement {
                         <div tabindex="0"
                              part="controls go-back"
                              class="ft-filter-level--go-back"
+                             aria-label="back to ${this.parent.label}"
                              ?disabled=${this.disabled}
                              @keyup=${this.goBackOnKeyPress}
                              @click=${this.goBackOnClick}>
@@ -72,7 +73,7 @@ class FtFilterLevel extends FtLitElement {
                 ${repeat(limitedOptions, option => option.value, option => {
             var _a;
             return html `
-                            <div class="ft-filter-level--option" part="options">
+                            <div class="ft-filter-level--option" part="options" tabindex="-1">
                                 ${this.multivalued
                 ? this.buildMultiValuedOption(option)
                 : this.buildMonoValuedOption(option)}
@@ -81,6 +82,7 @@ class FtFilterLevel extends FtLitElement {
                 : html `
                                         <ft-button icon="thin_arrow_right"
                                                    part="controls navigate-hierarchy"
+                                                   aria-label="expand node"
                                                    label="${option.label}"
                                                    ?disabled=${this.disabled}
                                                    tooltipPosition="left"
@@ -114,6 +116,18 @@ class FtFilterLevel extends FtLitElement {
     }
     displayMore() {
         this.displayedPages++;
+        this.makeRadioKeyBoardNavigable();
+    }
+    onRadioChange(e) {
+        var _a;
+        e.stopPropagation();
+        const event = e;
+        (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+            //we put radio.name in the FtRadioChangeEvent detail.value because in ft-filter-level
+            //ft-radio don't have value
+            radio.checked = (radio.name === event.detail.value);
+            radio.setAttribute("tabindex", "0"); // to make all ft-radio keyboard navigable
+        });
     }
     buildMultiValuedOption(option) {
         var _a;
@@ -139,7 +153,7 @@ class FtFilterLevel extends FtLitElement {
                       .disabled=${this.disabled}
                       @click=${(e) => this.optionsChanged(e, option)}
                       @keyup=${(e) => this.onRadioKeyUp(e, option)}
-                      @change=${(e) => e.stopPropagation()}>
+                      @change=${(e) => this.onRadioChange(e)}>
                 ${option.renderOption ? option.renderOption : option.label}${this.displayCount ? ` (${option.count})` : ""}
             </ft-radio>
         `;
@@ -156,6 +170,23 @@ class FtFilterLevel extends FtLitElement {
     displayLevel(option) {
         this.dispatchEvent(new CustomEvent("display-level", { detail: option }));
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.makeRadioKeyBoardNavigable();
+    }
+    makeRadioKeyBoardNavigable() {
+        if (!this.multivalued) {
+            setTimeout(() => {
+                var _a, _b;
+                this.radios = Array.from((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ft-radio"));
+                (_b = this.radios) === null || _b === void 0 ? void 0 : _b.forEach(option => {
+                    var _a, _b;
+                    option.setAttribute("tabindex", "0");
+                    (_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input[type=\"radio\"]")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabindex", "-1");
+                });
+            }, 5);
+        }
+    }
 }
 FtFilterLevel.elementDefinitions = {
     "ft-button": FtButton,
@@ -206,6 +237,9 @@ __decorate([
 __decorate([
     query(".ft-filter-level--container")
 ], FtFilterLevel.prototype, "container", void 0);
+__decorate([
+    state()
+], FtFilterLevel.prototype, "radios", void 0);
 __decorate([
     state()
 ], FtFilterLevel.prototype, "displayedPages", void 0);