From 09aecd9942048473fa5a70573b556b750bdc8cdd Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Fri, 9 Dec 2022 11:22:13 -0600
Subject: [PATCH] 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>
---
 .../share/accesskey/accesskey-info.component.css   | 37 ++++++++++++++++++++++
 .../share/accesskey/accesskey-info.component.html  | 22 ++++++-------
 .../share/accesskey/accesskey-info.component.ts    |  6 ++--
 3 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css

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 {
 
-- 
2.11.0