Add aria-describedby for item table links
authorStephanie Leary <stephanie.leary@equinoxoli.org>
Wed, 15 Mar 2023 18:31:02 +0000 (18:31 +0000)
committerStephanie Leary <stephanie.leary@equinoxoli.org>
Wed, 15 Mar 2023 18:31:02 +0000 (18:31 +0000)
Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html

index 166d71d..9895bef 100644 (file)
@@ -1,20 +1,22 @@
 <ng-template #cnTemplate let-copy="row">
+  <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 aria-describedby="copy-callnumber-{{copy.call_number}}">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" 
+  <a target="_blank" aria-describedby="copy-barcode-{{copy.id}}"
     href="/eg/staff/cat/item/{{copy.id}}" i18n>View</a>
     <ng-container *ngIf="context.editable(copy)">
-      | <a class="ps-1" target="_blank"
+      | <a target="_blank" aria-describedby="copy-barcode-{{copy.id}}"
         routerLink="/staff/cat/volcopy/attrs/item/{{copy.id}}" i18n>Edit</a>
     </ng-container>
   </div>
     <div class="border-bottom">
       <a routerLink="/staff/catalog/hold/C"
         [queryParams]="{target: copy.id}"
-        queryParamsHandling="merge" i18n>
+        queryParamsHandling="merge" i18n
+        aria-describedby="copy-barcode-{{copy.id}}">
         Item Hold
       </a>
     </div>
     <div>
       <a routerLink="/staff/catalog/hold/V"
         [queryParams]="{target: copy.call_number}"
-        queryParamsHandling="merge" i18n>
+        queryParamsHandling="merge" i18n
+        aria-describedby="copy-callnumber-{{copy.call_number}}">
         Call Number Hold
       </a>
     </div>
@@ -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()}}">
+    <div class="visually-hidden" id="course-name-{{course.id()}}">{{course.name()}}</div>
+    <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}"
+    aria-describedby="course-name-{{course.id()}}">
       {{course.course_number()}}
     </a>
   </div>