From 8ff943b08488022f41815020ea1d565be65e6775 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 7 May 2025 17:51:54 +0200
Subject: [PATCH] 129964: Made DSO badges more screen-reader friendly

- Added commas between the labels to prevent screen readers from reading it as a sentence
- Added hidden text describing what the badges represent
---
 .../access-status-badge.component.html                    | 6 +++++-
 .../access-status-badge.component.spec.ts                 | 2 +-
 .../my-dspace-status-badge.component.html                 | 2 ++
 .../badges/status-badge/status-badge.component.html       | 8 ++++++--
 .../shared/badges/type-badge/type-badge.component.html    | 6 +++++-
 src/assets/i18n/en.json5                                  | 8 ++++++++
 6 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
index a0180a761a..805b86f66d 100644
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
@@ -1,5 +1,9 @@
 <ng-container *ngIf="showAccessStatus">
   <span *ngIf="accessStatus$ | async as accessStatus">
-    <span class="badge badge-secondary">{{ accessStatus | translate }}</span>
+    <span class="badge badge-secondary">
+      <span class="sr-only">{{ 'listelement.badge.access-status' | translate }}</span>
+      {{ accessStatus | translate }}
+      <span class="sr-only">, </span>
+    </span>
   </span>
 </ng-container>
diff --git a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.spec.ts b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.spec.ts
index f661ed6e00..9faba30c84 100644
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.spec.ts
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.spec.ts
@@ -77,7 +77,7 @@ describe('ItemAccessStatusBadgeComponent', () => {
 
   function lookForAccessStatusBadge(status: string) {
     const badge = fixture.debugElement.query(By.css('span.badge'));
-    expect(badge.nativeElement.textContent).toEqual(`access-status.${status.toLowerCase()}.listelement.badge`);
+    expect(badge.nativeElement.textContent).toContain(`access-status.${status.toLowerCase()}.listelement.badge`);
   }
 
   describe('init', () => {
diff --git a/src/app/shared/object-collection/shared/badges/my-dspace-status-badge/my-dspace-status-badge.component.html b/src/app/shared/object-collection/shared/badges/my-dspace-status-badge/my-dspace-status-badge.component.html
index 4cf93cbd1d..be85e8d2f3 100644
--- a/src/app/shared/object-collection/shared/badges/my-dspace-status-badge/my-dspace-status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/my-dspace-status-badge/my-dspace-status-badge.component.html
@@ -1,5 +1,7 @@
 <div>
   <span [className]="badgeClass">
+    <span class="sr-only">{{ 'mydspace.status' | translate }}</span>
     {{('mydspace.status.' + badgeContent) | translate}}
+    <span class="sr-only">, </span>
   </span>
 </div>
diff --git a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
index c864f22afa..136a4055e0 100644
--- a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
@@ -1,6 +1,10 @@
 <div *ngIf="privateBadge" class="private-badge">
-    <span class="badge badge-danger">{{ "item.badge.private" | translate }}</span>
+  <span class="sr-only">{{ 'item.badge.status' | translate }}</span>
+  <span class="badge badge-danger">{{ "item.badge.private" | translate }}</span>
+  <span class="sr-only">, </span>
 </div>
 <div *ngIf="withdrawnBadge" class="withdrawn-badge">
-    <span class="badge badge-warning">{{ "item.badge.withdrawn" | translate }}</span>
+  <span class="sr-only">{{ 'item.badge.status' | translate }}</span>
+  <span class="badge badge-warning">{{ "item.badge.withdrawn" | translate }}</span>
+  <span class="sr-only">, </span>
 </div>
diff --git a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
index 119702c375..a77e6fbba5 100644
--- a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
@@ -1,3 +1,7 @@
 <span *ngIf="typeMessage">
-  <span class="badge badge-info">{{ typeMessage | translate }}</span>
+  <span class="badge badge-info">
+    <span class="sr-only">{{ 'listelement.badge.dso-type' | translate}}</span>
+    {{ typeMessage | translate }}
+    <span class="sr-only">, </span>
+  </span>
 </span>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6c91bae4c1..a1ebb99057 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -34,6 +34,8 @@
 
   "error-page.orcid.generic-error": "An error occurred during login via ORCID. Make sure you have shared your ORCID account email address with DSpace. If the error persists, contact the administrator",
 
+  "listelement.badge.access-status": "Access status:",
+
   "access-status.embargo.listelement.badge": "Embargo",
 
   "access-status.metadata.only.listelement.badge": "Metadata only",
@@ -1898,6 +1900,8 @@
 
   "item.edit.authorizations.title": "Edit item's Policies",
 
+  "item.badge.status": "Item status:",
+
   "item.badge.private": "Non-discoverable",
 
   "item.badge.withdrawn": "Withdrawn",
@@ -3012,6 +3016,8 @@
 
   "mydspace.show.supervisedWorkspace": "Supervised items",
 
+  "mydspace.status": "My DSpace status:",
+
   "mydspace.status.mydspaceArchived": "Archived",
 
   "mydspace.status.mydspaceValidation": "Validation",
@@ -3068,6 +3074,8 @@
 
   "nav.user.description": "User profile bar",
 
+  "listelement.badge.dso-type": "Item type:",
+
   "none.listelement.badge": "Item",
 
   "orgunit.listelement.badge": "Organizational Unit",