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>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

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 9ab26cd..273b61b 100644 (file)
--- 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
@@ -15,6 +15,7 @@
     <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)]"
+          i18n-aria-label="e.g. Row 13" attr.aria-label="Row {{context.pager.rowNumber(idx)}}"
           #rowContextMenu="ngbPopover"
           popoverTitle="Actions for Selected Rows" i18n-popoverTitle
           (contextmenu)="onRowContextClick($event, row, rowContextMenu)"

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 571d074..a680765 100644 (file)
--- 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
@@ -4,6 +4,7 @@
     <div role="columnheader"
       class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
       <input type='checkbox' (click)="handleBatchSelect($event)"
+        i18n-aria-label aria-label="All rows"
         [(ngModel)]="batchRowCheckbox">
     </div>
   </ng-container>

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 73850e0..c872c76 100644 (file)
--- 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>