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

Author: alexandrevryghem

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>

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', () => {

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>

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>

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>

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",