Wrapper and outline for keyboard navigation

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

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index 6e95476..3b6f598 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -1,3 +1,10 @@
+.eg-grid-wrapper {
+  overflow-x: auto;
+}
+
+[role="region"][aria-labelledby][tabindex]:focus {
+  outline: 2px solid #0A58CA;
+}
 
 .eg-grid {
     width: 100%;

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 c3cd608..f1a7fb5 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
@@ -1,4 +1,4 @@
-<div class="eg-grid-wrapper">
+<div class="eg-grid-wrapper" role="region" aria-labelledby="eg-grid-caption" tabindex="0">
   <eg-grid-toolbar #toolbar
     [gridContext]="context"
     [disableSaveSettings]="!persistKey || ('disabled' === persistKey)">
@@ -10,13 +10,13 @@
   </eg-grid-toolbar-actions-menu>
 </ng-template>
 
-<table class="eg-grid eg-grid-table table" tabindex="1" role="table">
+<table class="eg-grid eg-grid-table table" role="table">
   
   <!-- eg-grid-column-width -->
 
   <!-- eg-grid-print -->
 
-    <caption>
+    <caption id="eg-grid-caption">
     <ng-container *ngIf="dataSource.data.length === 0">
       <ng-container *ngIf="dataSource.requestingData">
         <span>