LP1828575 Keyboard focus for grid options

Changes <a> to <button> for grid options and column management; adds
styles to make buttons and links look the same when focused.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.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 8a9723a..7d5b4a9 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
@@ -24,28 +24,28 @@
       </div>
       <div class="col-lg-3" (click)="toggleVisibility(col)">{{col.label}}</div>
       <div class="col-lg-1">
-        <a class="no-href" title="Move column up" i18n-title
+        <button class="btn" title="Move column up" i18n-title
           (click)="columnSet.moveColumn(col, -1)">
           <span class="material-icons">arrow_upward</span>
-        </a>
+        </button>
       </div>
       <div class="col-lg-1">
-        <a class="no-href" title="Move column down" i18n-title
+        <button class="btn" title="Move column down" i18n-title
           (click)="columnSet.moveColumn(col, 1)">
           <span class="material-icons">arrow_downward</span>
-        </a>
+        </button>
       </div>
       <div class="col-lg-2">
-        <a class="no-href" title="Make first visible" i18n-title
+        <button class="btn" title="Make first visible" i18n-title
           (click)="columnSet.moveColumn(col, -10000)">
           <span class="material-icons">vertical_align_top</span>
-        </a>
+        </button>
       </div>
       <div class="col-lg-2">
-        <a class="no-href" title="Make last visible" i18n-title
+        <button class="btn" title="Make last visible" i18n-title
           (click)="columnSet.moveColumn(col, 10000)">
           <span class="material-icons">vertical_align_bottom</span>
-        </a>
+        </button>
       </div>
       <div class="col-lg-2" *ngIf="columnSet.isMultiSortable">
         <div *ngIf="col.isMultiSortable">

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..a6e5bff 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,18 +3,18 @@
     <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>
+      <button class="btn" (click)="expandColumn(col)" title="Expand Column" i18n-title>
         <span class="material-icons eg-grid-column-width-icon">call_made</span>
-      </a>
+      </button>
     </div>
   </div>
   <div class="eg-grid-row">
     <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>
+      <button class="btn" (click)="shrinkColumn(col)" title="Shrink Column" i18n-title>
         <span class="material-icons eg-grid-column-width-icon">call_received</span>
-      </a>
+      </button>
     </div>
   </div>
 </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 43b9b5c..00267ba 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
@@ -108,59 +108,52 @@
   </eg-grid-column-config>
   <div ngbDropdown placement="bottom-right">
     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
-      <span title="Show Grid Options" i18n-title
-        class="material-icons mat-icon-in-button">settings</span>
+      <span title="Show Grid Options" i18n-title class="material-icons mat-icon-in-button">settings</span>
     </button>
     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
-      <a class="dropdown-item label-with-material-icon"
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon"
         (click)="columnConfDialog.open({size:'lg'})">
         <span class="material-icons">build</span>
         <span class="ms-2" i18n>Manage Columns</span>
-      </a>
-      <a class="dropdown-item label-with-material-icon"
+      </button>
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon"
         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
         <span class="material-icons">compare_arrows</span>
         <span class="ms-2" i18n>Manage Column Widths</span>
-      </a>
-      <button class="dropdown-item label-with-material-icon"
-        [disabled]="gridContext.toolbarActions.length === 0"
-        (click)="toolbarActionsEditor.open().subscribe()">
+      </button>
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon"
+        [disabled]="gridContext.toolbarActions.length === 0" (click)="toolbarActionsEditor.open().subscribe()">
         <span class="material-icons">menu</span>
         <span class="ms-2" i18n>Manage Actions Menu</span>
       </button>
-      <a class="dropdown-item label-with-material-icon"
-        *ngIf="!disableSaveSettings"
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon" *ngIf="!disableSaveSettings"
         (click)="saveGridConfig()">
         <span class="material-icons">save</span>
         <span class="ms-2" i18n>Save Grid Settings</span>
-      </a>
-      <a class="dropdown-item label-with-material-icon"
-        (click)="gridContext.columnSet.reset()">
+      </button>
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="gridContext.columnSet.reset()">
         <span class="material-icons">restore</span>
         <span class="ms-2" i18n>Reset Columns</span>
-      </a>
-      <a class="dropdown-item label-with-material-icon"
-        (click)="generateCsvExportUrl($event)"
-        [download]="csvExportFileName"
-        [href]="csvExportUrl">
+      </button>
+      <a nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="generateCsvExportUrl($event)"
+        [download]="csvExportFileName" [href]="csvExportUrl">
         <span class="material-icons">cloud_download</span>
         <span class="ms-2" i18n>Download Full CSV</span>
       </a>
-      <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="printHtml()">
         <span class="material-icons">print</span>
         <span class="ms-2" i18n>Print Full Grid</span>
-      </a>
-
+      </button>
+  
       <div class="dropdown-divider"></div>
-
-      <a class="dropdown-item label-with-material-icon"
-        (click)="toggleVisibility(col)"
+  
+      <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="toggleVisibility(col)"
         *ngFor="let col of gridContext.columnSet.sortForColPicker()">
         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
         <span class="ms-2">{{col.label}}</span>
-      </a>
-
+      </button>
+  
     </div>
   </div>
 

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 0cd8bf3..1b57bf3 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
@@ -95,6 +95,14 @@
   padding-bottom: 11px;
 }
 
+/* make buttons and links match when focused */
+.eg-grid-toolbar .dropdown-item:focus,
+.eg-grid-toolbar .dropdown-item:hover,
+.eg-grid-column-config-dialog button:focus,
+.eg-grid-column-width-config button:focus {
+  outline: 2px solid var(--primary);
+}
+
 .eg-grid-cell-skinny {
   width: 2em;
   text-align: center;