Merge pull request #2468 from tdonohue/cypress_accessibility_testing

Minor Accessibility Fixes & Enable accessibility scan on more pages

src/app/item-page/simple/field-components/specific-field/title/item-page-title-field.component.html

@@ -1,6 +1,6 @@
-<h2 class="item-page-title-field">
+<h1 class="item-page-title-field">
   <div *ngIf="item.firstMetadataValue('dspace.entity.type') as type" class="d-inline">
     {{ type.toLowerCase() + '.page.titleprefix' | translate }}
   </div>
   <span class="dont-break-out">{{ dsoNameService.getName(item) }}</span>
-</h2>
+</h1>

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.html

@@ -1,5 +1,5 @@
 <div class="simple-view-element" [class.d-none]="hideIfNoTextContent && content.textContent.trim().length === 0">
-  <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
+  <h2 class="simple-view-element-header" *ngIf="label">{{ label }}</h2>
   <div #content class="simple-view-element-body">
     <ng-content></ng-content>
   </div>

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.scss

@@ -2,4 +2,7 @@
   .simple-view-element {
     margin-bottom: 15px;
   }
+  .simple-view-element-header {
+    font-size: 1.25rem;
+  }
 }

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/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html

@@ -9,8 +9,8 @@
                   </span>
                   <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
                          class="form-control" (blur)="onSubmit()"
-                         aria-label="Mininum value"
-                         [placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder' | translate"
+                         [attr.aria-label]="minLabel"
+                         [placeholder]="minLabel"
                   />
                 </label>
             </div>
@@ -21,8 +21,8 @@
                     </span>
                     <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
                            class="form-control" (blur)="onSubmit()"
-                           aria-label="Maximum value"
-                           [placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder' | translate"
+                           [attr.aria-label]="maxLabel"
+                           [placeholder]="maxLabel"
                     />
                 </label>
             </div>
@@ -33,7 +33,7 @@
         </form>
 
         <ng-container *ngIf="shouldShowSlider()">
-            <nouislider [connect]="true" [min]="min" [max]="max" [step]="1"
+            <nouislider [connect]="true" [config]="config" [min]="min" [max]="max" [step]="1"
                         [dsDebounce]="250" (onDebounce)="onSubmit()"
                         (keydown)="startKeyboardControl()" (keyup)="stopKeyboardControl()"
                         [(ngModel)]="range" ngDefaultControl>

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

@@ -2,6 +2,7 @@ import { BehaviorSubject, combineLatest as observableCombineLatest, Subscription
 import { map, startWith } from 'rxjs/operators';
 import { isPlatformBrowser } from '@angular/common';
 import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
 import { FilterType } from '../../../models/filter-type.model';
 import { renderFacetFor } from '../search-filter-type-decorator';
@@ -53,11 +54,27 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
    */
   min = 1950;
 
+  /**
+   * i18n Label to use for minimum field
+   */
+  minLabel: string;
+
   /**
    * Fallback maximum for the range
    */
   max = new Date().getUTCFullYear();
 
+  /**
+   * i18n Label to use for maximum field
+   */
+  maxLabel: string;
+
+  /**
+   * Base configuration for nouislider
+   * https://refreshless.com/nouislider/slider-options/
+   */
+  config = {};
+
   /**
    * The current range of the filter
    */
@@ -78,6 +95,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
               protected filterService: SearchFilterService,
               protected router: Router,
               protected rdbs: RemoteDataBuildService,
+              private translateService: TranslateService,
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
               @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
               @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@@ -96,6 +114,8 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
     super.ngOnInit();
     this.min = yearFromString(this.filterConfig.minValue) || this.min;
     this.max = yearFromString(this.filterConfig.maxValue) || this.max;
+    this.minLabel = this.translateService.instant('search.filters.filter.' + this.filterConfig.name + '.min.placeholder');
+    this.maxLabel = this.translateService.instant('search.filters.filter.' + this.filterConfig.name + '.max.placeholder');
     const iniMin = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX).pipe(startWith(undefined));
     const iniMax = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX).pipe(startWith(undefined));
     this.sub = observableCombineLatest(iniMin, iniMax).pipe(
@@ -105,6 +125,15 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
         return [minimum, maximum];
       })
     ).subscribe((minmax) => this.range = minmax);
+
+    // Default/base config for nouislider
+    this.config = {
+      // Ensure draggable handles have labels
+      handleAttributes: [
+        { 'aria-label': this.minLabel },
+        { 'aria-label': this.maxLabel },
+      ],
+    };
   }
 
   /**

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/styles/_vendor.scss

@@ -1,5 +1,5 @@
 // node_modules imports meant for all the themes
 
 @import '~node_modules/bootstrap/scss/bootstrap.scss';
-@import '~node_modules/nouislider/distribute/nouislider.min';
+@import '~node_modules/nouislider/dist/nouislider.min';
 @import '~node_modules/ngx-ui-switch/ui-switch.component.scss';

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

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