basic ARIA support

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

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 6511a3a..7c8f415 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
@@ -1,4 +1,4 @@
-
+<!-- note that colgroups are set up in grid.component.html -->
 
 <tr row="row" class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
@@ -23,6 +23,7 @@
     (dragover)="onColumnDragEnter($event, col)"
     (dragleave)="onColumnDragLeave($event, col)"
     [ngClass]="{'dragover' : col.isDragTarget}"
+    [attr.aria-sort]="ariaSortDirection(col)"
     class="eg-grid-cell eg-grid-header-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}} {{context.cellClassCallback(row, col)}}">
     <a class="sortable label-with-material-icon" *ngIf="col.isSortable"
       (click)="sortOneColumn(col)">

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
index 355d52f..db85186 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
@@ -71,6 +71,18 @@ export class GridHeaderComponent implements OnInit, AfterViewInit {
         return sort && sort.dir === dir;
     }
 
+    // Returns sorting direction in ARIA's required format
+    ariaSortDirection(col: GridColumn): string {
+        const sort = this.context.dataSource.sort.filter(c => c.name === col.name)[0];
+        
+        if (sort && sort.dir === 'ASC')
+            return 'ascending';
+        if (sort && sort.dir === 'DESC')
+            return 'descending';
+        
+        return null;
+    }
+
     handleBatchSelect($event) {
         if ($event.target.checked) {
             if (this.context.rowSelector.isEmpty() || !this.allRowsAreSelected()) {

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
index a24c154..aabe603 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -16,22 +16,24 @@
 
   <!-- eg-grid-print -->
 
+    <caption>
     <ng-container *ngIf="dataSource.data.length === 0">
       <ng-container *ngIf="dataSource.requestingData">
-        <caption>
+        <span>
           <eg-progress-inline></eg-progress-inline>
-        </caption>
+        </span>
       </ng-container>
       <ng-container *ngIf="!dataSource.requestingData">
-        <caption i18n *ngIf="dataSource.retrievalError">
+        <span i18n *ngIf="dataSource.retrievalError">
           Error Retrieving Results
-        </caption>
-        <caption i18n *ngIf="!dataSource.retrievalError">
+        </span>
+        <span i18n *ngIf="!dataSource.retrievalError">
           Nothing to Display
-        </caption>
+        </span>
       </ng-container>
     </ng-container>
-    
+    </caption>
+
     <colgroup class="eg-grid-col-utilities">
       <col *ngIf="!context.disableSelect" class="eg-grid-col eg-grid-checkbox-col">
       <col class="eg-grid-col eg-grid-number-col">