lp1828575 eg-grid options accessibility

Modify the options menu of eg-grid so that you can open it and use it
via the keyboard.

Signed-off-by: Mike Risher <mrisher@catalyte.io>
Changes to be committed:
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
index 1bb80fa..33058f2 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
@@ -20,31 +20,39 @@
     </div>
     <div class="row pt-1" *ngFor="let col of columnSet.columns"
       [ngClass]="{visible : col.visible}">
-      <div class="col-lg-1" (click)="col.visible=!col.visible">
+      <a class="col-lg-1" (click)="col.visible=!col.visible"
+        href="javscript:void(0)">
         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
-      </div>
-      <div class="col-lg-3" (click)="col.visible=!col.visible">{{col.label}}</div>
+      </a>
+      <a class="col-lg-3" (click)="col.visible=!col.visible"
+        href="javscript:void(0)">
+        {{col.label}}
+      </a>
       <div class="col-lg-1">
         <a class="no-href" title="Move column up" i18n-title
+          href="javscript:void(0)"
           (click)="columnSet.moveColumn(col, -1)">
           <span class="material-icons">arrow_upward</span>
         </a>
       </div>
       <div class="col-lg-1">
         <a class="no-href" title="Move column down" i18n-title
+          href="javscript:void(0)"
           (click)="columnSet.moveColumn(col, 1)">
           <span class="material-icons">arrow_downward</span>
         </a>
       </div>
       <div class="col-lg-2">
         <a class="no-href" title="Make first visible" i18n-title
+          href="javscript:void(0)"
           (click)="columnSet.moveColumn(col, -10000)">
           <span class="material-icons">vertical_align_top</span>
         </a>
       </div>
       <div class="col-lg-2">
         <a class="no-href" title="Make last visible" i18n-title
+          href="javscript:void(0)"
           (click)="columnSet.moveColumn(col, 10000)">
           <span class="material-icons">vertical_align_bottom</span>
         </a>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
index ca24c00..8e0ae1e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
@@ -3,7 +3,8 @@
     <div class="eg-grid-column-width-header" i18n>Expand</div>
     <div *ngFor="let col of columnSet.displayColumns()" 
       class="eg-grid-cell text-center" [ngStyle]="{flex:col.flex}">
-      <a (click)="expandColumn(col)" title="Expand Column" i18n-title>
+      <a (click)="expandColumn(col)" title="Expand Column" i18n-title
+        href="javscript:void(0)">
         <span class="material-icons eg-grid-column-width-icon">call_made</span>
       </a>
     </div>
@@ -12,7 +13,8 @@
     <div class="eg-grid-column-width-header" i18n>Shrink</div>
     <div *ngFor="let col of columnSet.displayColumns()" 
       class="eg-grid-cell text-center" [ngStyle]="{flex:col.flex}">
-      <a (click)="shrinkColumn(col)" title="Shrink Column" i18n-title>
+      <a (click)="shrinkColumn(col)" title="Shrink Column" i18n-title
+        href="javscript:void(0)">
         <span class="material-icons eg-grid-column-width-icon">call_received</span>
       </a>
     </div>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
index eb701ce..89f06ac 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
@@ -74,7 +74,7 @@
       </span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <a class="dropdown-item"
+      <a class="dropdown-item" href="javscript:void(0)"
         *ngFor="let count of [5, 10, 25, 50, 100]"
         (click)="gridContext.pager.setLimit(count)">
         <span class="ml-2">{{count}}</span>
@@ -105,23 +105,24 @@
     </button>
     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
       <a class="dropdown-item label-with-material-icon"
-        (click)="columnConfDialog.open({size:'lg'})">
+        href="javscript:void(0)" (click)="columnConfDialog.open({size:'lg'})">
         <span class="material-icons">build</span>
         <span class="ml-2" i18n>Manage Columns</span>
       </a>
       <a class="dropdown-item label-with-material-icon"
+        href="javscript:void(0)"
         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
         <span class="material-icons">compare_arrows</span>
         <span class="ml-2" i18n>Manage Column Widths</span>
       </a>
       <a class="dropdown-item label-with-material-icon"
-        *ngIf="!disableSaveSettings"
+        href="javscript:void(0)" *ngIf="!disableSaveSettings"
         (click)="saveGridConfig()">
         <span class="material-icons">save</span>
         <span class="ml-2" i18n>Save Grid Settings</span>
       </a>
       <a class="dropdown-item label-with-material-icon"
-        (click)="gridContext.columnSet.reset()">
+        href="javscript:void(0)" (click)="gridContext.columnSet.reset()">
         <span class="material-icons">restore</span>
         <span class="ml-2" i18n>Reset Columns</span>
       </a>
@@ -132,14 +133,15 @@
         <span class="material-icons">cloud_download</span>
         <span class="ml-2" i18n>Download Full CSV</span>
       </a>
-      <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
+      <a class="dropdown-item label-with-material-icon"
+        href="javscript:void(0)" (click)="printHtml()">
         <span class="material-icons">print</span>
         <span class="ml-2" i18n>Print Full Grid</span>
       </a>
 
       <div class="dropdown-divider"></div>
 
-      <a class="dropdown-item label-with-material-icon"
+      <a class="dropdown-item label-with-material-icon" href="javscript:void(0)"
         (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>