fix(search-filters): remove facet region landmarks and group under single section landmark (#5497)

Author: Ubuntu

src/app/shared/search/search-filters/search-filter/search-filter.component.html

@@ -1,6 +1,6 @@
 @if (active$ | async) {
   <div class="facet-filter d-block mb-3 p-3"
-    [id]="regionId" [attr.aria-labelledby]="toggleId" [ngClass]="{ 'focus': focusBox }" role="region">
+    [id]="regionId" [attr.aria-labelledby]="toggleId" [ngClass]="{ 'focus': focusBox }">
     <button (click)="toggle()" (focusin)="focusBox = true" (focusout)="focusBox = false"
       class="filter-name d-flex" [attr.aria-controls]="regionId" [id]="toggleId"
       [attr.aria-expanded]="(collapsed$ | async) !== true"

src/app/shared/search/search-filters/search-filter/search-filter.component.spec.ts

@@ -7,6 +7,7 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { AppliedFilter } from '@dspace/core/shared/search/models/applied-filter.model';
@@ -94,6 +95,11 @@ describe('SearchFilterComponent', () => {
     expect(comp.regionId).toContain('17');
   });
 
+  it('should not expose individual facet filter as a region landmark', () => {
+    const facetFilterElement = fixture.debugElement.query(By.css('.facet-filter'));
+    expect(facetFilterElement.attributes['role']).not.toBe('region');
+  });
+
   describe('when the toggle method is triggered', () => {
     beforeEach(() => {
       spyOn(searchFilterService, 'toggle');

src/app/shared/search/search-filters/search-filters.component.html

@@ -1,3 +1,5 @@
+<section [attr.aria-label]="filterLabel + '.filters.head' | translate">
+
 @if (inPlaceSearch) {
   <h3>{{filterLabel+'.filters.head' | translate}}</h3>
 } @else {
@@ -21,4 +23,4 @@ <h2>{{filterLabel+'.filters.head' | translate}}</h2>
     <i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}
   </button>
 }
-
+</section>

src/app/shared/search/search-filters/search-filters.component.spec.ts

@@ -7,6 +7,7 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { APP_CONFIG } from '@dspace/config/app-config.interface';
@@ -68,4 +69,12 @@ describe('SearchFiltersComponent', () => {
     });
   });
 
+  describe('accessibility', () => {
+    it('should render a section landmark with an accessible aria-label', () => {
+      const sectionElement = fixture.debugElement.query(By.css('section'));
+      expect(sectionElement).toBeTruthy();
+      expect(sectionElement.attributes['aria-label']).toBeTruthy();
+    });
+  });
+
 });