Increase color contrast on badges in staff interface

Bug #1999282 reported by Stephanie Leary
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Fix Released
Medium
Unassigned

Bug Description

Three of the Bootstrap badge styles we use most often (primary, success, and info) don't pass color contrast checks.

Branch forthcoming.

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/1999282-not-so-loud-badges

Branch includes new styles that flip the contrast on badges to make them less intense and comply with color contrast requirements. In keeping with the less intense alert styles, the badges have more subtle background colors. I have also adjusted the spacing and font weight to make the characters larger without greatly increasing the overall size of the badge.

All of these styles pass WCAG AAA contrast checks. In anticipation of Bootstrap 5, I have included the new .text-bg-* classes alongside the current ones.

The access key modal (Control-H) is a good place to observe the overall effect.

Michele Morgan (mmorgan)
tags: added: pullrequest
Revision history for this message
Terran McCanna (tmccanna) wrote :

Stephanie, do you have any suggestions for where to test these in the staff interface?

Galen Charlton (gmc)
Changed in evergreen:
importance: Undecided → Medium
Revision history for this message
Galen Charlton (gmc) wrote :

I've being done some testing as well. Some interfaces to look at include:

* As Stephanie said, the access key modal
* The undo and redo buttons in the Angular MARC editor. (Note that there's a still a color contrast with part of those buttons if there's a change on the undo stack, but it's unrelated to the classes changed in this patch)
* The warning that appears on the Angular Print Template editor (on the template editing tab) if the sample data's JSON is malformed. (But note that you'll need the fix for bug 2007877 to test that at the moment)
* The column selection drop-down on any Angular eg-grid
* The checkin modifiers drop-down on the Angular checkin page
* The Staff only indication on the Angular patron stat cats component
* The eg-bool directive

Terran, please let me know if you plan to actively test over the next few days. If so, I'll wait and commit (assuming you sign off). Otherwise, I'm inclined to sign off.

Revision history for this message
Terran McCanna (tmccanna) wrote :

I won't likely have any time to do any testing until next week during bug squashing, but I'm not opposed to you (Galen) signing off.

Revision history for this message
Galen Charlton (gmc) wrote :

OK. I've completed my testing and pushed a signoff branch: user/gmcharlt/lp1999282_signoff

tags: added: signedoff
Changed in evergreen:
status: New → Confirmed
Revision history for this message
Jane Sandberg (sandbergja) wrote :

Merged to rel_3_10 and above. Thanks, Stephanie, Terran, and Galen!

Changed in evergreen:
status: Confirmed → Fix Committed
milestone: none → 3.10.1
Revision history for this message
Jane Sandberg (sandbergja) wrote :

Just pushed a one-character follow-up commit to fix a CSS selector.

Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.