Access Key Info modal color contrast fixes

The modal header and close button don't pass WCAG color contrast checks.
In addition to fixing those issues, I've given the rows alternating
backgrounds and bold column headers.

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

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css
new file mode 100644 (file)
index 0000000..e2ab932
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css
@@ -0,0 +1,37 @@
+.modal-title {
+    color: #fff;
+    font-weight: 600;
+}
+
+.modal-header .close,
+.modal-header .close:hover {
+    color: #fff;
+    opacity: 1;
+    text-shadow: none;
+}
+
+.modal-header .close:not(:disabled):not(.disabled):focus, 
+.modal-header .close:not(:disabled):not(.disabled):hover {
+    opacity: 1;
+}
+
+.modal-body .row {
+    margin: 0;
+}
+
+.modal-body .row:nth-of-type(odd) {
+    background: #f4f4f4;
+}
+
+.modal-body .row.shortcut-info {
+    background: #fff;
+    font-style: italic;
+}
+
+.modal-body .row-header {
+    font-weight: bold;
+}
+
+.shortcut-keycombo {
+    text-align: center;
+}

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
index 8396ea5..af51572 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
@@ -7,20 +7,20 @@
     </button>
   </div>
   <div class="modal-body">
-    <div class="row border-bottom">
-      <div class="col-lg-2 p-1 border-right text-center" i18n>Command</div>
-      <div class="col-lg-6 p-1 border-right" i18n>Action</div>
-      <div class="col-lg-2 p-1" i18n>Context</div>
-      <div class="col-lg-2 p-1" i18n>Active?</div>
+    <div class="row row-header border-bottom">
+      <div class="col-lg-2 p-1 border-right shortcut-keycombo" i18n>Command</div>
+      <div class="col-lg-6 p-1 border-right shortcut-action" i18n>Action</div>
+      <div class="col-lg-2 p-1 shortcut-context" i18n>Context</div>
+      <div class="col-lg-2 p-1 shortcut-status" i18n>Active?</div>
     </div>
     <div class="row border-bottom" *ngFor="let a of assignments()">
-      <div class="col-lg-2 p-1 border-right text-center">{{a.key}}</div>
-      <div class="col-lg-6 p-1 border-right">{{a.desc}}</div>
-      <div class="col-lg-2 p-1 border-right">{{a.ctx}}</div>
-      <div class="col-lg-2 p-1"><eg-bool [value]="!a.shadowed"></eg-bool></div>
+      <div class="col-lg-2 p-1 border-right shortcut-keycombo">{{a.key}}</div>
+      <div class="col-lg-6 p-1 border-right shortcut-action">{{a.desc}}</div>
+      <div class="col-lg-2 p-1 border-right shortcut-context">{{a.ctx}}</div>
+      <div class="col-lg-2 p-1 shortcut-status"><eg-bool [value]="!a.shadowed"></eg-bool></div>
     </div>
-    <div class="row mt-2">
-      <div class="col-lg-12 font-italic" i18n>
+    <div class="row mt-2 shortcut-info">
+      <div class="col-lg-12" i18n>
         If an assignment is not active, it means it was superseded by
         an assignment from a different context using the same keyboard 
         shortcut.

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts
index d713ee6..bc6e7e1 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts
@@ -1,13 +1,15 @@
 /**
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {AccessKeyService} from '@eg/share/accesskey/accesskey.service';
 import {DialogComponent} from '@eg/share/dialog/dialog.component';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'eg-accesskey-info',
-  templateUrl: './accesskey-info.component.html'
+  templateUrl: './accesskey-info.component.html',
+  styleUrls: [ 'accesskey-info.component.css' ],
+  encapsulation: ViewEncapsulation.None
 })
 export class AccessKeyInfoComponent extends DialogComponent {