From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Fri, 9 Dec 2022 17:22:13 +0000 (-0600)
Subject: Access Key Info modal color contrast fixes
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=09aecd9942048473fa5a70573b556b750bdc8cdd;p=working%2FEvergreen.git

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
index 0000000000..e2ab932f23
--- /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 8396ea5873..af51572e15 100644
--- 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 d713ee60b6..bc6e7e1c00 100644
--- 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 {