explicit ARIA roles to support responsive tables

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.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 3148424..fa06fa9 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
@@ -4,12 +4,12 @@
   tabindex=1 so the grid body can capture keyboard events.
 -->
 
-  <tr scope="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
+  <tr scope="row" role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
 
     <ng-container *ngIf="!context.disableSelect">
-      <td class="eg-grid-cell eg-grid-checkbox-cell">
+      <td role="cell" class="eg-grid-cell eg-grid-checkbox-cell">
         <div class="eg-grid-cell-contents">
         <input type='checkbox' 
           [ngModel]="context.rowSelector.indexes[context.getRowIndex(row)]"
@@ -24,10 +24,10 @@
         </div>
       </td>
     </ng-container>
-    <td class="eg-grid-cell eg-grid-number-cell">
+    <td role="cell" class="eg-grid-cell eg-grid-number-cell">
       <div class="eg-grid-cell-contents">{{context.pager.rowNumber(idx)}}</div>
     </td>
-    <td *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
+    <td role="cell" *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
       <!-- using *ngIf allows us to assign the flair callback to a value,
             obviating the need for multiple calls of the same function -->
       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
@@ -45,7 +45,7 @@
     <!-- contextMenu applied to cells instead of rows so the position
          of the popover is close to the mouse.  As of writing, no way
          to position the popover at the mouse -->
-    <td class="eg-grid-cell eg-grid-body-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}}  {{context.cellClassCallback(row, col)}}"
+    <td role="cell" class="eg-grid-cell eg-grid-body-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}}  {{context.cellClassCallback(row, col)}}"
       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
       *ngFor="let col of context.columnSet.displayColumns()">
         <div class="eg-grid-cell-contents" (dblclick)="onRowDblClick(row)"

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 7c8f415..4058d49 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,14 +1,14 @@
 <!-- note that colgroups are set up in grid.component.html -->
 
-<tr row="row" class="eg-grid-row eg-grid-header-row">
+<tr row="row" role="row" class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
-    <th scope="col" class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
+    <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
       <input type='checkbox' (click)="handleBatchSelect($event)"
         i18n-aria-label aria-label="All rows"
         [(ngModel)]="batchRowCheckbox">
     </th>
   </ng-container>
-  <th scope="col" class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell">
+  <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell">
     <span i18n="number|Row Number Header">#</span>
   </th>
   <th *ngIf="context.rowFlairIsEnabled" scope="col" 
@@ -16,7 +16,7 @@
     <span class="material-icons">notifications</span>
   </th>
   <th *ngFor="let col of context.columnSet.displayColumns()"
-    scope="col" 
+    scope="col" role="columnheader"
     draggable="true"
     (dragstart)="dragColumn = col"
     (drop)="onColumnDrop(col)"
@@ -36,16 +36,16 @@
     <span *ngIf="!col.isSortable">{{col.headerLabel}}</span>
   </th>
 </tr>
-<tr *ngIf="context.isFilterable"
+<tr *ngIf="context.isFilterable" role="row"
   class="eg-grid-row eg-grid-filter-controls-row">
   <ng-container *ngIf="!context.disableSelect">
-    <td class="eg-grid-cell eg-grid-header-cell"></td>
+    <td class="eg-grid-cell eg-grid-header-cell" role="cell"></td>
   </ng-container>
-  <th scope="col" class="eg-grid-cell eg-grid-header-cell"></th>
-  <th *ngIf="context.rowFlairIsEnabled" scope="col" 
+  <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell"></th>
+  <th *ngIf="context.rowFlairIsEnabled" scope="col" role="columnheader"
     class="eg-grid-cell eg-grid-header-cell {{context.idlFieldDef}} eg-grid-class-{{context.idlClass}}"></th>
 
-  <th *ngFor="let col of context.columnSet.displayColumns()" scope="col" 
+  <th *ngFor="let col of context.columnSet.displayColumns()" scope="col" role="columnheader"
     class="eg-grid-cell eg-grid-filter-control-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}">
     <eg-grid-filter-control [context]="context" [col]="col"></eg-grid-filter-control>
   </th>

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 aabe603..c3cd608 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
@@ -10,7 +10,7 @@
   </eg-grid-toolbar-actions-menu>
 </ng-template>
 
-<table class="eg-grid eg-grid-table table" tabindex="1">
+<table class="eg-grid eg-grid-table table" tabindex="1" role="table">
   
   <!-- eg-grid-column-width -->
 
@@ -44,8 +44,8 @@
         class="eg-grid-col eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}} {{context.cellClassCallback(row, col)}}">
     </colgroup>
     
-    <thead class="eg-grid-header" #egGridStickyHeader [context]="context" [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">  </thead>
-    <tbody class="eg-grid-body" [context]="context"></tbody>
+    <thead class="eg-grid-header" #egGridStickyHeader [context]="context" [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}" role="rowgroup">  </thead>
+    <tbody class="eg-grid-body" [context]="context" role="rowgroup"></tbody>
 </table>
 
 </div>
\ No newline at end of file