Port #1084 (part) to dtq-dev-9-base: accessible labels for the suggestion inputs, reject reason and banner

Card X-02a, part C of three. Seven templates the v9 upgrade took wholesale from vanilla 9.3, so the
remaining accessibility hunks of 5a92fdf were never applied.

The five autocomplete inputs (input-suggestions and its dso, validation, person and org-unit
variants) carried a placeholder and nothing else: a placeholder is not a label, so a screen reader
announced them as an unnamed edit field. Each input now gets [id]="name + '-input'" and a
visually-hidden <label> bound to the same expression. The workflow reject-reason textarea had the
same problem and now has id="reason" and a label carrying the reason placeholder key. The dspace
theme's home banner image gets the translated [alt] the fork added.

Fork mistakes ported fixed rather than literally:

1. class="sr-only" does not exist in Bootstrap 5 and 9-base defines it nowhere
   (git grep -nE '^[[:space:]]*\.sr-only' -- src => 0 hits, "bootstrap": "^5.3"); a literal port would
   render a visible label above every autocomplete. visually-hidden is used, defined at
   src/styles/_global-styles.scss:280.
2. <label for="name + '-input'"> is a static attribute, not a binding - it emits those 15 characters
   literally and pairs with nothing. It is ported as [attr.for]="name + '-input'", matching the
   input's [id] expression, so the association is real.
3. validation-suggestions also carried a static id="name" on the same input as the fork's new [id]
   binding. Leaving both would keep a second element answering to id="name" in the submission form,
   so the static one is removed and only the per-instance binding remains.

The five suggestion templates keep their existing <button class="sr-only" type="submit">: that is
pre-existing vanilla markup on 9-base (29 files use the class), out of scope here, and touching it
would mix an unrelated Bootstrap-5 migration into an accessibility port.

Tests: 5a92fdf ships none. input-suggestions.component.spec.ts gains cases asserting the label
resolves to the input it names (label.htmlFor === input.id, id non-empty and derived from the name
input) rather than asserting that a string is present in the template. Proven load-bearing with
negative controls - see the PR description.

Source: 5a92fdf (dtq-dev PR #1084), partial - the search boxes from the same commit are in the
sibling PR for card X-02a part B.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: milanmajchrak

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>