From db634b88d1c1e9eb65d7385cff734cc8ebef91da Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Fri, 14 Apr 2023 22:19:12 +0000
Subject: [PATCH] LP2016343 aria-describedby for item table links

Adds aria-describedby attributes to repetitive links in the staff
catalog items table. This appends the barcode to the text of the link
for screen readers, to help disambiguate links for different items.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---
 .../app/staff/catalog/record/copies.component.html   | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html
index 166d71d274..4fd5a58e07 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html
@@ -1,20 +1,22 @@
 <ng-template #cnTemplate let-copy="row">
-  {{copy.call_number_prefix_label}}
-  {{copy.call_number_label}}
-  {{copy.call_number_suffix_label}}
+    <div id="copy-callnumber-{{copy.call_number}}">
+    {{copy.call_number_prefix_label}}
+    {{copy.call_number_label}}
+    {{copy.call_number_suffix_label}}
+    </div>
   <div>
     <a routerLink="/staff/cat/volcopy/holdings/callnumber/{{copy.call_number}}"
-      class="" target="_blank"i18n>Edit</a> 
+      target="_blank" i18n attr.aria-describedby="copy-barcode-{{copy.id}}">Edit</a> 
   </div>
 </ng-template>
 
 <ng-template #barcodeTemplate let-copy="row" let-context="userContext">
-  <div>{{copy.barcode}}</div>
+  <div id="copy-barcode-{{copy.id}}">{{copy.barcode}}</div>
   <div>
   <a class="ps-1" target="_blank" 
     href="/eg/staff/cat/item/{{copy.id}}" i18n>View</a>
     <ng-container *ngIf="context.editable(copy)">
-      | <a class="ps-1" target="_blank"
+      | <a class="ps-1" target="_blank"  attr.aria-describedby="copy-barcode-{{copy.id}}"
         routerLink="/staff/cat/volcopy/attrs/item/{{copy.id}}" i18n>Edit</a>
     </ng-container>
   </div>
@@ -24,6 +26,7 @@
   <div *ngIf="context.holdable(copy)">
     <div class="border-bottom">
       <a routerLink="/staff/catalog/hold/C"
+        attr.aria-describedby="copy-barcode-{{copy.id}}"
         [queryParams]="{target: copy.id}"
         queryParamsHandling="merge" i18n>
         Item Hold
@@ -31,6 +34,7 @@
     </div>
     <div>
       <a routerLink="/staff/catalog/hold/V"
+        attr.aria-describedby="copy-barcode-{{copy.id}}"
         [queryParams]="{target: copy.call_number}"
         queryParamsHandling="merge" i18n>
         Call Number Hold
@@ -42,7 +46,9 @@
 
 <ng-template #courseTemplate let-copy="row">
   <div *ngFor="let course of copy._courses">
-    <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
+    <span class="sr-only" id="course-name-{{course.id()}}">{{course.name()}}</span>
+    <a attr.aria-describedby="course-name-{{course.id()}}"
+    routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
       {{course.course_number()}}
     </a>
   </div>
-- 
2.11.0