From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Fri, 12 Apr 2019 20:03:46 +0000 (-0700)
Subject: LP1796936: Add aria-labels to the checkboxes in web client grids
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fsandbergja%2Flp1796936_label_grid_checkboxes;p=working%2FEvergreen.git

LP1796936: Add aria-labels to the checkboxes in web client grids

To test:
1) Go to an AngularJs grid interface.  Make sure that the "Select all"
checkbox has an aria-label attribute of "All rows"
2) In the same interface, make sure that each checkbox in the
non-header rows has an aria-label like "Row 15", "Row 23", etc.
3) Repeat steps 1-2 for an Angular grid interface.

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index 8d495aa84d..8f22cae4b4 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -8,7 +8,8 @@
 
     <ng-container *ngIf="!context.disableSelect">
       <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
-        <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
+        <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]"
+        i18n-aria-label="e.g. Row 13" attr.aria-label="Row {{context.pager.rowNumber(idx)}}">
       </div>
     </ng-container>
     <div class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny">
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
index 0662f54b0b..00a0fbd6fe 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -2,7 +2,8 @@
 <div class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
     <div class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
-      <input type='checkbox' (click)="handleBatchSelect($event)">
+      <input #selectAll type='checkbox' (click)="handleBatchSelect($event)" i18n-aria-label
+        aria-label="All rows">
     </div>
   </ng-container>
   <div class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 4d90a48408..cfc5febcff 100644
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -228,7 +228,7 @@
     </div>
     <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
       <div>
-        <input title="[% l('Row Selector Column') %]"
+        <input aria-label="[% l('All rows') %]" 
           focus-me="gridControls.focusRowSelector"
           type='checkbox' ng-model="selectAll"/> 
       </div>
@@ -310,7 +310,7 @@
         <!-- ng-click=handleRowClick here has unintended 
              consequences and is unnecessary, avoid it -->
         <div>
-          <input type='checkbox' title="[% l('Select Row') %]"
+          <input type='checkbox' aria-label="[% l('Row [_1]','{{$index + offset() + 1}}') %]"
             ng-change="updateSelected()"
             ng-model="selected[indexValue(item)]"/>
         </div>