@fluid-topics/ft-search-bar 1.2.60 → 1.2.62

package/build/ft-search-bar.d.ts

@@ -59,6 +59,9 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     scrollToFacet?: string;
     api?: FluidTopicsApi;
     reactToFocus: boolean;
+    displaySuggestListbox: boolean;
+    selectedSuggestOptionId?: string;
+    selectedSuggestRemoveRecent?: boolean;
     suggestManager: SuggestManager;
     selectedFacetsManager: FacetsChipsManager;
     desktopSearchBarManager: DesktopSearchBarManager;
@@ -75,10 +78,11 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     focusInput(react?: boolean): Promise<void>;
     clear(): void;
     protected render(): import("lit-html").TemplateResult<1>;
+    private renderLiveText;
     protected renderSearchBar(): import("lit-html").TemplateResult<1>;
     renderMobileFacets(): import("lit-html").TemplateResult<1>;
     private getContentLocaleRadioGroup;
-    renderDesktopMenu(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderDesktopMenu(): typeof nothing | import("lit-html").TemplateResult<1>;
     renderFacetsActions(): import("lit-html").TemplateResult<1>;
     private renderDesktopClearFilters;
     private renderDesktopFacets;
@@ -101,6 +105,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private initRecentSearches;
     saveRecentSearches(): void;
     private closeFloatingContainer;
+    private closeSuggestListbox;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private updateSize;
@@ -115,8 +120,6 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private clearFilters;
     querySelector(selectors: string): HTMLElement | null;
     querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
-    renderDesktopFloatingMenu(): import("lit-html").TemplateResult<1> | typeof nothing;
-    private enableFocusReactionCallback;
-    private enableFocusReactionOnAnyUserInteraction;
-    private enableFocusReaction;
+    renderDesktopFloatingMenu(): typeof nothing | import("lit-html").TemplateResult<1>;
+    get ariaActiveDescendent(): string | undefined;
 }

package/build/ft-search-bar.js

@@ -83,6 +83,8 @@ class FtSearchBar extends FtLitElement {
         this.suggestions = [];
         this.recentSearches = [];
         this.reactToFocus = true;
+        this.displaySuggestListbox = false;
+        this.selectedSuggestRemoveRecent = false;
         this.suggestManager = new SuggestManager(this);
         this.selectedFacetsManager = new FacetsChipsManager(this);
         this.desktopSearchBarManager = new DesktopSearchBarManager(this);
@@ -115,6 +117,14 @@ class FtSearchBar extends FtLitElement {
                 this.displayFacets = this.displayFacets && e.composedPath().some(element => element === this.floatingContainer);
             }
         };
+        this.closeSuggestListbox = (e) => {
+            const path = e.composedPath();
+            const inside = path.some(n => n === this || n === this.shadowRoot);
+            if (!inside) {
+                this.displaySuggestListbox = false;
+                this.selectedSuggestOptionId = undefined;
+            }
+        };
         this.compareUnknownFilters = (a, b) => {
             if (a.valueFilter && b.valueFilter) {
                 return this.compareValueFilters(a.valueFilter, b.valueFilter);
@@ -138,7 +148,6 @@ class FtSearchBar extends FtLitElement {
         this.compareRequests = (a, b) => (a.contentLocale == null || b.contentLocale == null || a.contentLocale === b.contentLocale)
             && a.metadataFilters.length === b.metadataFilters.length
             && a.metadataFilters.every(fa => b.metadataFilters.some(fb => this.compareFilters(fa, fb)));
-        this.enableFocusReactionCallback = () => this.enableFocusReaction();
     }
     isMobileMenuOpen() {
         return this.isMobile() && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
@@ -198,9 +207,7 @@ class FtSearchBar extends FtLitElement {
         this.reactToFocus = react;
         await waitFor(() => this.input, 50);
         this.input.focus();
-        if (!react) {
-            this.enableFocusReactionOnAnyUserInteraction();
-        }
+        this.reactToFocus = true;
     }
     clear() {
         this.query = "";
@@ -214,9 +221,20 @@ class FtSearchBar extends FtLitElement {
     render() {
         return html `
             <ft-size-watcher @change=${this.updateSize}></ft-size-watcher>
+            <div class="ft-search-bar--aria-live" aria-live="polite" aria-atomic="true">
+                ${this.renderLiveText()}
+            </div>
             ${this.renderSearchBar()}
         `;
     }
+    renderLiveText() {
+        if (this.suggestManager.shouldDisplaySuggestions) {
+            return this.labelResolver.resolve("ariaLiveSuggestions", this.suggestManager.recentSearchesMatchingQuery.length, this.suggestions.length);
+        }
+        else {
+            return "";
+        }
+    }
     renderSearchBar() {
         if (this.facetsInitialized && this.availableContentLocalesInitialized) {
             return this.isMobile() ? this.mobileSearchBarManager.render() : this.desktopSearchBarManager.render();
@@ -574,6 +592,7 @@ class FtSearchBar extends FtLitElement {
     }
     async connectedCallback() {
         super.connectedCallback();
+        document.addEventListener("pointerdown", this.closeSuggestListbox);
         document.addEventListener("focusin", this.closeFloatingContainer);
         document.addEventListener("click", this.closeFloatingContainer);
         if (this.focusOnDisplay && !isTouchScreen) {
@@ -584,8 +603,9 @@ class FtSearchBar extends FtLitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        document.removeEventListener("pointerdown", this.closeSuggestListbox);
         document.removeEventListener("focusin", this.closeFloatingContainer);
-        document.addEventListener("click", this.closeFloatingContainer);
+        document.removeEventListener("click", this.closeFloatingContainer);
         ftAppInfoStore.removeEventListener("authentication-change", this.initSearchData);
     }
     updateSize(e) {
@@ -640,16 +660,14 @@ class FtSearchBar extends FtLitElement {
                 ${this.renderDesktopMenu()}
             </div>`;
     }
-    enableFocusReactionOnAnyUserInteraction() {
-        this.addEventListener("blur", this.enableFocusReactionCallback);
-        this.addEventListener("click", this.enableFocusReactionCallback);
-        this.addEventListener("keyup", this.enableFocusReactionCallback);
-    }
-    enableFocusReaction() {
-        this.reactToFocus = true;
-        this.removeEventListener("blur", this.enableFocusReactionCallback);
-        this.removeEventListener("click", this.enableFocusReactionCallback);
-        this.removeEventListener("keyup", this.enableFocusReactionCallback);
+    get ariaActiveDescendent() {
+        if (!this.selectedSuggestOptionId) {
+            return undefined;
+        }
+        if (this.selectedSuggestRemoveRecent) {
+            return "remove-" + this.selectedSuggestOptionId;
+        }
+        return this.selectedSuggestOptionId;
     }
 }
 FtSearchBar.elementDefinitions = {
@@ -783,7 +801,13 @@ __decorate([
 ], FtSearchBar.prototype, "api", void 0);
 __decorate([
     state()
-], FtSearchBar.prototype, "reactToFocus", void 0);
+], FtSearchBar.prototype, "displaySuggestListbox", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "selectedSuggestOptionId", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "selectedSuggestRemoveRecent", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "facetsLoaded", void 0);