LP1960526 Accessible link and button colors

Several of the default colors in Bootstrap 4 do not meet WCAG Level AA
accessibility requirements when used for links (#007bff blue) or button
backgrounds with white text (blue/primary, #28a745 green/success, and

Additionally, while the yellow/warning color (#ffc107) does pass the
contrast check with black text, the button itself does not pass the
contrast check against white or #f7f7f7 page/tab backgrounds, meaning
people with some forms of color blindness can't see the shape of the
button.

This patch updates link and button colors using Bootstrap 5 tints
(https://getbootstrap.com/docs/5.0/customize/color/#all-colors). While
slightly lighter custom colors could be used to pass the contrast
checks, sticking to the Bootstrap 5 color scheme should make it easier
for us to stay consistent as new components are added in the future.

diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index d5d930e..ef5d22c 100644 (file)
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -6,6 +6,14 @@
 /* Locally served material icon fonts  */
 @import '~material-design-icons-iconfont/dist/material-design-icons.css';
 
+/* BS default colors lack sufficient contrast for accessibility */
+:root {
+  --blue: #0A58CA; /* $blue-600 in BS5 */
+  --green: #198754; /* $green ($green-500) in BS5 */
+  --success: #198754;
+  --cyan: #087990; /* $cyan-700 in BS5 */
+}
+
 /** BS default fonts are huge */
 body, .form-control, .btn, .input-group-text {
   /* This more or less matches the font size of the angularjs client.
@@ -28,16 +36,29 @@ h5 {font-size: .95rem}
 
 .small-text-1 {font-size: 85%}
 
+a, .page-item.active .page-link { 
+  border-color: #0A58CA;
+  color: #0A58CA; 
+}
+
+a:hover, .page-item.active .page-link:hover { 
+  border-color: #0848A5;
+  color: #0848A5; 
+}
 
 /** Ang5 routes on clicks to href's with no values, so we can't have
  * bare href's to force anchor styling.  Use this for anchors w/ no href.
  * TODO: should we style all of them?  a:not([href]) ....
  * */
 .no-href {
+  color: #0A58CA;
   cursor: pointer;
-  color: #007bff;
 }
 
+.no-href:hover {
+  border-color: #0848A5;
+  color: #0848A5; 
+}
 
 /** BS has flex utility classes, but none for specifying flex widths.
  *  BS class="col" is roughly equivelent to flex-1, but col-2 is not
@@ -282,3 +303,42 @@ body>.dropdown-menu {z-index: 2100;}
 .negative-money-amount {
     color: red;
 }
+
+/* Accessible button colors */
+
+.btn-warning {
+  border-color: #BB8402;
+}
+
+.btn-primary {
+  background-color: #0A58CA;
+  border-color: #0A58CA;
+}
+
+.btn-primary:hover,
+.btn-primary.hover {
+  background-color: #0848A5;
+  border-color: #0848A5;
+}
+
+.btn-info {
+  background-color: #087990;
+  border-color: #087990;
+}
+
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #076376;
+  border-color: #076376;
+}
+
+.btn-success {
+  background-color: #198754;
+  border-color: #198754;
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #157146;
+  border-color: #157146;
+}
\ No newline at end of file