LP1991562 Accessible link and button colors in Angular staff interface

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
graphical object 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.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Shula Link <slink@gchrl.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/pagination.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/result/pagination.component.css
index c283ff4..0de2968 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/pagination.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/pagination.component.css
@@ -6,3 +6,12 @@
   cursor: pointer;
 }
 
+.pagination a, .pagination .page-item.active .page-link { 
+  border-color: #0A58CA;
+  color: #0A58CA; 
+}
+
+.pagination a:hover, .pagination .page-item.active .page-link:hover { 
+  border-color: #0848A5;
+  color: #0848A5; 
+}
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 450642f..58c97bf 100644 (file)
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -6,6 +6,16 @@
 /* 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 */
+  --primary: #0A58CA;
+  --green: #198754; /* $green ($green-500) in BS5 */
+  --success: #198754;
+  --cyan: #087990; /* $cyan-700 in BS5 */
+  --info: #087990;
+}
+
 /** BS default fonts are huge */
 body, .form-control, .btn, .input-group-text {
   /* This more or less matches the font size of the angularjs client.
@@ -24,22 +34,32 @@ h5 {font-size: .95rem}
 
 .small-text-1 {font-size: 85%}
 
-/** Use a default link color that achieves WCAG AAA
+/** Use a default link color that achieves WCAG AA
  *  color contrast against a white background
  */
-a {
-  color: #255a88;
+ a { 
+  border-color: #0A58CA;
+  color: #0A58CA; 
+}
+
+a: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 {
+ .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
@@ -365,6 +385,92 @@ input.small {
   color: #212121;
 }
 
+/* Accessible button colors */
+
+.btn-warning,
+.btn-outline-warning {
+  border-color: #BB8402;
+}
+
+/* other colors' focus state shadows do not need to change */
+.btn-warning.focus,
+.btn-warning:focus {
+  border-color: #FFC107;
+  box-shadow: 0 0 0 .2rem rgba(255, 205, 57,.5);
+}
+
+.btn-primary {
+  background-color: #0A58CA;
+  border-color: #0A58CA;
+}
+
+.btn-primary:hover,
+.btn-primary.hover,
+.btn-primary:focus,
+.btn-primary.focus {
+  background-color: #0848A5;
+  border-color: #0848A5;
+}
+
+.btn-outline-primary {
+  border-color: #0A58CA;
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary.hover,
+.btn-outline-primary:focus,
+.btn-outline-primary.focus {
+  border-color: #0848A5;
+}
+
+.btn-info {
+  background-color: #087990;
+  border-color: #087990;
+}
+
+.btn-info:hover,
+.btn-info.hover,
+.btn-info:focus,
+.btn-info.focus {
+  background-color: #076376;
+  border-color: #076376;
+}
+
+.btn-outline-info {
+  border-color: #087990;
+}
+
+.btn-outline-info:hover,
+.btn-outline-info.hover,
+.btn-outline-info:focus,
+.btn-outline-info.focus {
+  border-color: #076376;
+}
+
+.btn-success {
+  background-color: #198754;
+  border-color: #198754;
+}
+
+.btn-success:hover,
+.btn-success.hover,
+.btn-success:focus,
+.btn-success.focus {
+  background-color: #157146;
+  border-color: #157146;
+}
+
+.btn-outline-success {
+  border-color: #198754;
+}
+
+.btn-outline-success:hover,
+.btn-outline-success.hover,
+.btn-outline-success:focus,
+.btn-outline-success.focus {
+  border-color: #157146;
+}
+
 /* Less intense, WCAG AAA-compliant badges */
 .badge {
   font-weight: 400;