Fix heading order accessibility issue in search filters/facets

(cherry picked from commit 276d808)

Author: tdonohue

cypress/e2e/my-dspace.cy.ts

@@ -19,17 +19,7 @@ describe('My DSpace page', () => {
         cy.get('.filter-toggle').click({ multiple: true });
 
         // Analyze <ds-my-dspace-page> for accessibility issues
-        testA11y(
-            {
-                include: ['ds-my-dspace-page'],
-            },
-            {
-                rules: {
-                    // Search filters fail this "moderate" impact rules
-                    'heading-order': { enabled: false },
-                }
-            } as Options
-        );
+        testA11y('ds-my-dspace-page');
     });
 
     it('should have a working detailed view that passes accessibility tests', () => {

cypress/e2e/search-page.cy.ts

@@ -27,17 +27,7 @@ describe('Search Page', () => {
         cy.get('[data-test="filter-toggle"]').click({ multiple: true });
 
         // Analyze <ds-search-page> for accessibility issues
-        testA11y(
-            {
-                include: ['ds-search-page'],
-            },
-            {
-                rules: {
-                    // Search filters fail this "moderate" impact rule
-                    'heading-order': { enabled: false },
-                }
-            } as Options
-        );
+        testA11y('ds-search-page');
     });
 
     it('should have a working grid view that passes accessibility tests', () => {

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

@@ -6,9 +6,9 @@
           [attr.aria-label]="(((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate) + ' ' + (('search.filters.filter.' + filter.name + '.head') | translate | lowercase)"
           [attr.data-test]="'filter-toggle' | dsBrowserOnly"
   >
-    <h5 class="d-inline-block mb-0">
+    <h4 class="d-inline-block mb-0">
       {{'search.filters.filter.' + filter.name + '.head'| translate}}
-    </h5>
+    </h4>
     <span class="filter-toggle flex-grow-1 fas p-auto"
           [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"
           [title]="((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate">

src/app/shared/sidebar/sidebar-dropdown.component.html

@@ -1,5 +1,5 @@
 <div class="setting-option mb-3 p-3">
-  <h5><label for="{{id}}">{{label | translate}}</label></h5>
+  <h4><label for="{{id}}">{{label | translate}}</label></h4>
   <select id="{{id}}" class="form-control" (change)="change.emit($event)">
     <ng-content></ng-content>
   </select>

src/themes/dspace/styles/_global-styles.scss

@@ -17,7 +17,7 @@
     background-color: var(--bs-primary);
   }
 
-  h5 {
+  h4 {
     font-size: 1.1rem
   }
 }