@fluid-topics/ft-search-selected-facets 1.2.49 → 1.2.50

package/build/FtSearchSelectedFacetsMessages.d.ts

@@ -0,0 +1,7 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtSearchSelectedFacetsMessages extends I18nMessages {
+    filterGroupLabel(): string;
+    removeFilterLabel(): string;
+}
+export declare const searchSelectedFacets: I18nMessageContext<FtSearchSelectedFacetsMessages>;
+export declare const searchSelectedFacetsDefaultMessages: DefaultI18nMessages<FtSearchSelectedFacetsMessages>;

package/build/FtSearchSelectedFacetsMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const searchSelectedFacets = I18nMessageContext.build("designedSearchSelectedFacets");
+export const searchSelectedFacetsDefaultMessages = {
+    filterGroupLabel: "Filters enabled",
+    removeFilterLabel: "Remove filter"
+};

package/build/ft-search-selected-facets.js

@@ -15,6 +15,7 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { searchInDocumentTitlesOnlySelector } from "@fluid-topics/ft-search-context";
 import { searchTypeContext, searchTypeDefaultMessages } from "@fluid-topics/ft-search-type";
 import { periodFilterContext, periodFilterDefaultMessages } from "@fluid-topics/ft-search-period-filter";
+import { searchSelectedFacets, searchSelectedFacetsDefaultMessages } from "./FtSearchSelectedFacetsMessages";
 class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
     get hasSomethingToDisplay() {
         var _a, _b;
@@ -25,6 +26,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
     constructor() {
         super();
         this.addI18nContext(searchTypeContext, searchTypeDefaultMessages);
+        this.addI18nContext(searchSelectedFacets, searchSelectedFacetsDefaultMessages);
         this.addI18nContext(periodFilterContext, periodFilterDefaultMessages);
     }
     render() {
@@ -33,7 +35,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
             return nothing;
         }
         return html `
-            <div class="ft-search-selected-facets--container">
+            <div role="group" class="ft-search-selected-facets--container" aria-label="${searchSelectedFacets.messages.filterGroupLabel()}">
                 ${repeat(this.facets || [], facet => facet.key, facet => {
             const values = this.getSelectedValues(facet);
             return repeat(values, value => facet.key + "-" + value, value => this.renderFacet(facet.key, facet.label, values, value));
@@ -54,7 +56,8 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                         part="tooltips tooltip-${keyWithNoColumn}">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-${keyWithNoColumn}"
-                    removable
+                    removable hideIconTooltip
+                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     label="${label}"
                     @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(facetKey, selectedValues.filter(v => v !== value)); }}
                     data-key="${facetKey}"
@@ -87,7 +90,8 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                         part="tooltips tooltip-search-in-document-titles-only">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-search-in-document-titles-only"
-                    removable
+                    removable hideIconTooltip
+                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSearchInDocumentTitlesOnly(false); }}>
                     ${searchTypeContext.messages.documentTitlesOnly()}
                 </ft-chip>
@@ -109,7 +113,8 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                         part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable
+                    removable hideIconTooltip
+                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key); }}>
                     ${periodFilterContext.messages[dateFilter.type]()}
                 </ft-chip>
@@ -120,7 +125,8 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
             <ft-tooltip inline text="${periodFilterContext.messages.period(periodFilterContext.messages.customPeriod(rangeFilter.from, rangeFilter.to))}" part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable
+                    removable hideIconTooltip
+                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key); }}>
                     ${periodFilterContext.messages["CUSTOM"]()}
                 </ft-chip>