Accessibility when selecting a search filter

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -2,7 +2,7 @@
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
    [queryParams]="addQueryParams$ | async"
-   (click)="filterService.minimizeAll()">
+   (click)="selectingFilter()">
   <label class="mb-0 d-flex w-100">
     <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
     <span class="w-100 pl-1 break-facet">

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts

@@ -1,4 +1,4 @@
 import {
   AsyncPipe,
   NgIf,
 } from '@angular/common';
@@ -12,7 +12,10 @@
   Router,
   RouterLink,
 } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -25,6 +28,7 @@
 import { FacetValue } from '../../../../models/facet-value.model';
 import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
 import { getFacetValueForType } from '../../../../search.utils';
+import { LiveRegionService } from '../../../../../../shared/live-region/live-region.service';
 
 @Component({
   selector: 'ds-search-facet-option',
@@ -70,11 +74,18 @@
 
   paginationId: string;
 
+  /**
+   * Stores selected filters
+   */
+  selectedFilters = new Set();
+
   constructor(protected searchService: SearchService,
               protected filterService: SearchFilterService,
               protected searchConfigService: SearchConfigurationService,
               protected router: Router,
               protected paginationService: PaginationService,
+              protected liveRegionService: LiveRegionService,
+              private translateService: TranslateService,
   ) {
   }
 
@@ -119,4 +130,25 @@
     return getFacetValueForType(this.filterValue, this.filterConfig);
   }
 
+  /**
+   * Announces to the screen reader that the page will be reloaded, which filter has been selected
+   * and then implement “filterService.minimizeAll()”
+   */
+  selectingFilter() {
+    const filterValue = this.filterValue.value;
+    if (!this.selectedFilters.has(filterValue)) {
+      this.translateService.get('search-facet-option.update.announcement')
+        .subscribe(translatedMessage => {
+          const message = `${translatedMessage} ${filterValue}`;
+          this.liveRegionService.addMessage(message);
+
+          setTimeout(() => {
+            this.liveRegionService.clear();
+          }, this.liveRegionService.getMessageTimeOutMs());
+          this.selectedFilters.add(filterValue);
+        });
+    }
+    this.filterService.minimizeAll();
+  }
+
 }

src/assets/i18n/en.json5

@@ -6741,4 +6741,6 @@
   "item.page.cc.license.disclaimer": "Except where otherwised noted, this item's license is described as",
 
   "browse.search-form.placeholder": "Search the repository",
+
+  "search-facet-option.update.announcement": "The page will be reloaded. selected filter: ",
 }

src/assets/i18n/es.json5

@@ -8152,5 +8152,7 @@
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar en el repositorio",
 
+  // "search-facet-option.update.announcement": "The page will be reloaded. selected filter: ",
+  "search-facet-option.update.announcement": "La página será recargada. filtro seleccionado: ",
 
 }

src/assets/i18n/pt-BR.json5

@@ -10249,4 +10249,7 @@
 
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar no repositório",
+
+  // "search-facet-option.update.announcement": "The page will be reloaded. selected filter: ",
+  "search-facet-option.update.announcement": "A página será recarregada. filtro selecionado: ",
 }