From 839971e4470bb40758e9a18464979016a5abb80d Mon Sep 17 00:00:00 2001
From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Fri, 12 Apr 2019 13:03:46 -0700
Subject: [PATCH] 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>
---
Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html | 1 +
Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html | 1 +
Open-ILS/src/templates/staff/share/t_autogrid.tt2 | 4 ++--
3 files changed, 4 insertions(+), 2 deletions(-)
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 9ab26cd32e..273b61b9db 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
@@ -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 571d0740ea..a68076514c 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
@@ -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 73850e028c..c872c76ffa 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>
--
2.11.0