From cb7c40a53438a1f0a7c0a7b1e313c8e05704e39c Mon Sep 17 00:00:00 2001
From: milanmajchrak <milan.majchrak@dataquest.sk>
Date: Thu, 10 Sep 2026 19:38:08 +0200
Subject: [PATCH] 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 5a92fdfa89 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.
The banner [alt] needs one file the card did not list: src/themes/dspace/app/home-page/home-news/
home-news.component.ts. That themed component declares no imports[] at all, because its template was
pure static HTML until now, so the first use of the translate pipe fails the production build with
NG8004 "No pipe found with name 'translate'". TranslateModule is added to its imports[]. The file has
no fork delta and is claimed by no other card.

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: 5a92fdfa89 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: 5a92fdfa89 (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>
---
 .../org-unit-input-suggestions.component.html |  2 ++
 .../person-input-suggestions.component.html   |  2 ++
 .../dso-input-suggestions.component.html      |  2 ++
 .../input-suggestions.component.html          |  2 ++
 .../input-suggestions.component.spec.ts       | 33 +++++++++++++++++++
 .../validation-suggestions.component.html     |  4 ++-
 ...claimed-task-actions-reject.component.html |  2 ++
 .../home-news/home-news.component.html        |  2 +-
 .../home-news/home-news.component.ts          |  4 +++
 9 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
index 45a4dc9bb3a..6f7e7de0148 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
+++ b/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()"
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
index e2bdaab5a4e..da3a99dabff 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
+++ b/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)"
diff --git a/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html b/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
index dfa3e241fd0..90838193d7b 100644
--- a/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
+++ b/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)"
diff --git a/src/app/shared/input-suggestions/input-suggestions.component.html b/src/app/shared/input-suggestions/input-suggestions.component.html
index 35f95f7313a..8c36eab36c3 100644
--- a/src/app/shared/input-suggestions/input-suggestions.component.html
+++ b/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)"
diff --git a/src/app/shared/input-suggestions/input-suggestions.component.spec.ts b/src/app/shared/input-suggestions/input-suggestions.component.spec.ts
index b16380e4db5..5cd3d247d81 100644
--- a/src/app/shared/input-suggestions/input-suggestions.component.spec.ts
+++ b/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(() => {
diff --git a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
index f0867ad8744..fc54140203d 100644
--- a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
+++ b/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)"
diff --git a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
index 82721fb8287..54935843a02 100644
--- a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
+++ b/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>
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.html b/src/themes/dspace/app/home-page/home-news/home-news.component.html
index d98da7be07c..45b6a6321b1 100644
--- a/src/themes/dspace/app/home-page/home-news/home-news.component.html
+++ b/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>
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.ts b/src/themes/dspace/app/home-page/home-news/home-news.component.ts
index 5a7d52d83ea..0303002e546 100644
--- a/src/themes/dspace/app/home-page/home-news/home-news.component.ts
+++ b/src/themes/dspace/app/home-page/home-news/home-news.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component';
 
@@ -6,6 +7,9 @@ import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page
   selector: 'ds-themed-home-news',
   styleUrls: ['./home-news.component.scss'],
   templateUrl: './home-news.component.html',
+  imports: [
+    TranslateModule,
+  ],
 })
 
 /**