CLARIN-DSpace v9/Restore the dropped accessibility labels on the suggestion inputs and reject reason (X1 sweep, X-02a part C)

src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html

@@ -3,7 +3,9 @@
   (keydown.arrowdown)="shiftFocusDown($event)"
   (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
   (dsClickOutside)="close();">
+  <label [attr.for]="name + '-input'" class="visually-hidden">{{placeholder}}</label>
   <input #inputField type="text" [(ngModel)]="value" [name]="name"
+    [id]="name + '-input'"
     class="form-control suggestion_input"
     (focus)="open()"
     (click)="open()"

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html

@@ -3,7 +3,9 @@
   (keydown.arrowdown)="shiftFocusDown($event)"
   (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
   (dsClickOutside)="close();">
+  <label [attr.for]="name + '-input'" class="visually-hidden">{{placeholder}}</label>
   <input #inputField type="text" [ngModel]="value" [name]="name"
+    [id]="name + '-input'"
     class="form-control suggestion_input"
     (focus)="open()"
     (blur)="onSubmit(inputField.value)"

src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html

@@ -3,7 +3,9 @@
   (keydown.arrowdown)="shiftFocusDown($event)"
   (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
   (dsClickOutside)="close();">
+  <label [attr.for]="name + '-input'" class="visually-hidden">{{placeholder}}</label>
   <input #inputField type="text" [(ngModel)]="value" [name]="name"
+    [id]="name + '-input'"
     class="form-control suggestion_input mb-2"
     [ngClass]="{'is-invalid': !valid}"
     [dsDebounce]="debounceTime" (onDebounce)="find($event)"

src/app/shared/input-suggestions/input-suggestions.component.html

@@ -3,7 +3,9 @@
   (keydown.arrowdown)="shiftFocusDown($event)"
   (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
   (dsClickOutside)="close();">
+  <label [attr.for]="name + '-input'" class="visually-hidden">{{placeholder}}</label>
   <input #inputField type="text" [(ngModel)]="value" [name]="name"
+    [id]="name + '-input'"
     class="form-control suggestion_input"
     [ngClass]="{'is-invalid': !valid}"
     [dsDebounce]="debounceTime" (onDebounce)="find($event)"

src/app/shared/input-suggestions/input-suggestions.component.spec.ts

@@ -55,6 +55,39 @@ describe('InputSuggestionsComponent', () => {
     expect(comp).toBeTruthy();
   });
 
+  describe('the accessible name of the suggestion input', () => {
+    beforeEach(() => {
+      comp.name = 'author';
+      comp.placeholder = 'Search for an author';
+      fixture.detectChanges();
+    });
+
+    it('should label the input with a label that resolves to it', () => {
+      const input: HTMLInputElement = el.querySelector('input.suggestion_input');
+      const label: HTMLLabelElement = el.querySelector('label');
+
+      expect(input.id).toBeTruthy();
+      expect(label).toBeTruthy();
+      // a placeholder is not a label: the association has to be real
+      expect(label.htmlFor).toEqual(input.id);
+      expect(label.textContent.trim()).toEqual('Search for an author');
+      // and the label must not be rendered visibly (Bootstrap 5 dropped the old screen-reader class)
+      expect(Array.from(label.classList)).toContain('visually-hidden');
+    });
+
+    it('should derive the id from the name input so two instances do not collide', () => {
+      const input: HTMLInputElement = el.querySelector('input.suggestion_input');
+      const firstId: string = input.id;
+
+      comp.name = 'subject';
+      fixture.detectChanges();
+      const label: HTMLLabelElement = el.querySelector('label');
+
+      expect(input.id).not.toEqual(firstId);
+      expect(label.htmlFor).toEqual(input.id);
+    });
+  });
+
   describe('when the input field is in focus', () => {
 
     beforeEach(() => {

src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html

@@ -3,7 +3,9 @@
   (keydown.arrowdown)="shiftFocusDown($event)"
   (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
   (dsClickOutside)="checkIfValidInput(form);close();">
-  <input [readonly]="disable" #inputField type="text" formControlName="metadataNameField" attr.aria-labelledby="fieldName" [(ngModel)]="value" id="name" [name]="name"
+  <label [attr.for]="name + '-input'" class="visually-hidden">{{placeholder}}</label>
+  <input [readonly]="disable" #inputField type="text" formControlName="metadataNameField" attr.aria-labelledby="fieldName" [(ngModel)]="value" [name]="name"
+    [id]="name + '-input'"
     class="form-control suggestion_input"
     [ngClass]="{'is-invalid': !valid}"
     [dsDebounce]="debounceTime" (onDebounce)="find($event)"

src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html

@@ -25,7 +25,9 @@ <h4 class="modal-title">{{'submission.workflow.tasks.claimed.reject.reason.title
       {{'submission.workflow.tasks.claimed.reject.reason.info' | translate}}
     </div>
     <form (ngSubmit)="submitTask();" [formGroup]="rejectForm" >
+      <label for="reason" class="visually-hidden">{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}</label>
       <textarea style="width: 100%"
+        id="reason"
         formControlName="reason"
         rows="4"
       placeholder="{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}"></textarea>

src/themes/dspace/app/home-page/home-news/home-news.component.html

@@ -34,7 +34,7 @@ <h1 class="display-2">DSpace 9</h1>
   <picture class="background-image">
     <source type="image/webp" srcset="assets/dspace/images/banner.webp 2000w, assets/dspace/images/banner-half.webp 1200w, assets/dspace/images/banner-tall.webp 768w">
     <source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">
-    <img alt="" [src]="'assets/dspace/images/banner.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
+    <img [alt]="'home.news.image.banner' | translate" [src]="'assets/dspace/images/banner.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
   </picture>
   <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">&#64;inspiredimages</a></small>
 </div>

src/themes/dspace/app/home-page/home-news/home-news.component.ts

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component';
 
 @Component({
   selector: 'ds-themed-home-news',
   styleUrls: ['./home-news.component.scss'],
   templateUrl: './home-news.component.html',
+  imports: [
+    TranslateModule,
+  ],
 })
 
 /**