From b27659d958226f3a2aeed1a637c18054261e2950 Mon Sep 17 00:00:00 2001
From: Andrea-Guevara <101608067+Andrea-Guevara@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:52:13 -0300
Subject: [PATCH] Accessibility when selecting a search filter (#3385)

* Creation of a new method so that when a filter is selected a page reload message is announced to the user

* Correcting import formatting errors

* New attempt - Correcting import formatting errors

* New import fix

* New import fix

* Returning to the order of imports more like the original

* Correcting import order errors

* Resolving conflicts

* lint fixes

* Code refactoring

---------

Co-authored-by: root <root@TI-03.OHB.LOCAL>
Co-authored-by: nwoodward <woodward.nicholas@gmail.com>
---
 .../search-facet-option.component.html            |  2 +-
 .../search-facet-option.component.ts              | 15 ++++++++++++++-
 src/assets/i18n/en.json5                          |  2 ++
 src/assets/i18n/es.json5                          |  5 +++--
 src/assets/i18n/pt-BR.json5                       |  3 +++
 5 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
index f0e6120725..dfd68d026a 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
+++ b/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)="announceFilter(); filterService.minimizeAll()">
   <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">
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
index 297ae12f09..17615e6221 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
@@ -12,7 +12,10 @@ import {
   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';
 
@@ -20,6 +23,7 @@ import { PaginationService } from '../../../../../../core/pagination/pagination.
 import { SearchService } from '../../../../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
 import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
+import { LiveRegionService } from '../../../../../../shared/live-region/live-region.service';
 import { currentPath } from '../../../../../utils/route.utils';
 import { ShortNumberPipe } from '../../../../../utils/short-number.pipe';
 import { FacetValue } from '../../../../models/facet-value.model';
@@ -75,6 +79,8 @@ export class SearchFacetOptionComponent implements OnInit {
               protected searchConfigService: SearchConfigurationService,
               protected router: Router,
               protected paginationService: PaginationService,
+              protected liveRegionService: LiveRegionService,
+              private translateService: TranslateService,
   ) {
   }
 
@@ -119,4 +125,11 @@ export class SearchFacetOptionComponent implements OnInit {
     return getFacetValueForType(this.filterValue, this.filterConfig);
   }
 
+  /**
+   * Announces to the screen reader that the page will be reloaded, which filter has been selected
+   */
+  announceFilter() {
+    const message = this.translateService.instant('search-facet-option.update.announcement', { filter: this.filterValue.value });
+    this.liveRegionService.addMessage(message);
+  }
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 77b6c32984..5d8c0237d7 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -6775,4 +6775,6 @@
   "register-page.registration.aria.label": "Enter your e-mail address",
 
   "forgot-email.form.aria.label": "Enter your e-mail address",
+
+  "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
 }
diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5
index 75677ee18e..7130d6d468 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -10201,5 +10201,6 @@
   // "forgot-email.form.aria.label": "Enter your e-mail address",
   "forgot-email.form.aria.label": "Introduzca su dirección de correo electrónico",
 
-
-}
\ No newline at end of file
+  // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
+  "search-facet-option.update.announcement": "La página será recargada. Filtro {{ filter }} seleccionado.",
+}
diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5
index 2a326cf181..300b4e370e 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -10258,4 +10258,7 @@
 
   // "forgot-email.form.aria.label": "Enter your e-mail address",
   "forgot-email.form.aria.label": "Digite seu e-mail",
+
+  // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
+  "search-facet-option.update.announcement": "A página será recarregada. O filtro {{ filter }} foi selecionado.",
 }