From 1585b53dd9b421b3be6cb87059cce5e5774cf723 Mon Sep 17 00:00:00 2001 From: Stephanie Leary Date: Tue, 1 Nov 2022 11:33:04 -0500 Subject: [PATCH] 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 Signed-off-by: Shula Link Signed-off-by: Galen Charlton --- .../staff/catalog/result/pagination.component.css | 9 ++ Open-ILS/src/eg2/src/styles.css | 116 ++++++++++++++++++++- 2 files changed, 120 insertions(+), 5 deletions(-) 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 c283ff45d5..0de2968d4f 100644 --- 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 9332276961..e1d8e74380 100644 --- 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; -- 2.11.0