Fixed accessibility issues on search page

Author: alexandrevryghem

src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html

@@ -1,10 +1,12 @@
 <ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
-    <input *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+    <input #selectListItemCheckbox *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+           [attr.aria-label]="(selectListItemCheckbox.checked ? 'selectable-list-item-control.deselect' : 'selectable-list-item-control.select') | translate"
            [name]="'checkbox' + index"
            [id]="'object' + index"
            [ngModel]="selected$ | async"
            (ngModelChange)="selectCheckbox($event)">
     <input *ngIf="!selectionConfig.repeatable" class="form-check-input mt-2" type="radio"
+           [attr.aria-label]="'selectable-list-item-control.select' | translate"
            [name]="'radio' + index"
            [id]="'object' + index"
            [checked]="selected$ | async"

src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.spec.ts

@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { VarDirective } from '../../../utils/var.directive';
 import { of as observableOf } from 'rxjs';
 import { ListableObject } from '../listable-object.model';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('SelectableListItemControlComponent', () => {
   let comp: SelectableListItemControlComponent;
@@ -45,7 +46,10 @@ describe('SelectableListItemControlComponent', () => {
     init();
     TestBed.configureTestingModule({
       declarations: [SelectableListItemControlComponent, VarDirective],
-      imports: [FormsModule],
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot(),
+      ],
       providers: [
         {
           provide: SelectableListService,

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

@@ -2,17 +2,18 @@
      [id]="regionId" [attr.aria-labelledby]="toggleId" [ngClass]="{ 'focus': focusBox }" role="region">
   <button (click)="toggle()" (focusin)="focusBox = true" (focusout)="focusBox = false"
           class="filter-name d-flex" [attr.aria-controls]="regionId" [id]="toggleId"
-          [attr.aria-expanded]="false"
+          [attr.aria-expanded]="!(collapsed$ | async)"
           [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"
   >
-    <h4 class="d-inline-block text-left mt-auto mb-auto">
+    <span class="h4 d-inline-block text-left mt-auto mb-auto">
       {{'search.filters.filter.' + filter.name + '.head'| translate}}
-    </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">
     </span>
+    <i class="filter-toggle flex-grow-1 fas p-auto"
+       aria-hidden="true"
+       [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"
+       [title]="((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate">
+    </i>
   </button>
   <div [@slide]="(collapsed$ | async) ? 'collapsed' : 'expanded'"
        (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)"

src/app/shared/search/search-labels/search-label/search-label.component.html

@@ -1,6 +1,7 @@
 <a class="badge badge-primary mr-1 mb-1"
+   [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
     {{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
-    <span> ×</span>
+    <span aria-hidden="true"> ×</span>
 </a>

src/app/shared/view-mode-switch/view-mode-switch.component.html

@@ -1,5 +1,7 @@
 <div class="btn-group" data-toggle="buttons">
     <button *ngIf="isToShow(viewModeEnum.ListElement)"
+            [attr.aria-current]="currentMode === viewModeEnum.ListElement"
+            [attr.aria-label]="'search.view-switch.show-list' | translate"
        routerLink="."
        [queryParams]="{view: 'list'}"
        queryParamsHandling="merge"
@@ -8,9 +10,11 @@
        [class.active]="currentMode === viewModeEnum.ListElement"
        class="btn btn-secondary"
        [attr.data-test]="'list-view' | dsBrowserOnly">
-       <span class="fas fa-list"></span><span class="sr-only">{{'search.view-switch.show-list' | translate}}</span>
+       <i class="fas fa-list"></i>
     </button>
     <button *ngIf="isToShow(viewModeEnum.GridElement)"
+            [attr.aria-current]="currentMode === viewModeEnum.GridElement"
+            [attr.aria-label]="'search.view-switch.show-grid' | translate"
        routerLink="."
        [queryParams]="{view: 'grid'}"
        queryParamsHandling="merge"
@@ -19,7 +23,7 @@
        [class.active]="currentMode === viewModeEnum.GridElement"
        class="btn btn-secondary"
        [attr.data-test]="'grid-view' | dsBrowserOnly">
-       <span class="fas fa-th-large"></span><span class="sr-only">{{'search.view-switch.show-grid' | translate}}</span>
+       <i class="fas fa-th-large"></i>
     </button>
     <button *ngIf="isToShow(viewModeEnum.DetailedListElement)"
        routerLink="."

src/assets/i18n/en.json5

@@ -3666,6 +3666,8 @@
 
   "search.search-form.placeholder": "Search the repository ...",
 
+  "search.filters.remove": "Remove filter of type {{ type }} with value {{ value }}",
+
   "search.filters.applied.f.author": "Author",
 
   "search.filters.applied.f.dateIssued.max": "End date",
@@ -3920,6 +3922,10 @@
 
   "search.view-switch.show-list": "Show as list",
 
+  "selectable-list-item-control.deselect": "Deselect item",
+
+  "selectable-list-item-control.select": "Select item",
+
   "sorting.ASC": "Ascending",
 
   "sorting.DESC": "Descending",