wishlist: better way to ID funds at warning or stop percentages

[Andrea Neiman]

Currently in Dojo as well as in the rewritten Angular Acquisitions interfaces, funds dropdowns can show a fund that is color coded yellow (if a fund is at or above its warning level) or red (if a fund is at or above its stop level).

This is problematic on two fronts:
1) Communicating information via color alone is an accessibility issue.
2) Having to look up each fund's balance when an page using that dropdown is opened is not-great from a performance standpoint and systems with large amounts of funds might notice minor lag in pages which load this dropdown.

Anyway, so here's a wishlist bug to (waves hands vaguely) do better here, from an accessibility as well as a performance standpoint.

[Stephanie Leary (stephanieleary)]

Branch with new stop and warning styles:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1984007-funds-dropdown-warnings

[Tiffany Little (tslittle)]

Hi Stephanie, I am very untutored in color accessibility issues, so possibly take this worth a grain of salt. Could we make the color for the stop limit more...aggressive? I think the yellow is great, but I think it would be helpful if the stop limit color looked very definite, rather than a pink/red pastel. If the normal red color that we have currently is accessibility-friendly, I'd prefer that (or something closer to it).

[Stephanie Leary (stephanieleary)]

Hi, Tiffany! I'll walk through my thought process on this...

The two WCAG rules in play here are 1.4.1, color can't be the only thing used to convey meaning, and 1.4.3, minimum color contrast. I am also imposing a rule of consistency: if one warning has a background color, both should. This is more of a UI best practice, although something like it might end up in the next version of WCAG, which will formalize a lot of usability guidelines related to cognitive ease.

As Andrea noted, currently the red text color is the only thing distinguishing the dangerous funds. Making the text bold and adding icons solves that issue.

Color contrast is a thornier problem. Yellow text doesn't work at all unless it's darkened to the point where it's a burnt orange/brown color that becomes hard to distinguish from red. Stripe's design team did a deep dive on Bootstrap colors: https://stripe.com/blog/accessible-color-systems and determined that the best solution was to use very dark hues for text, paired with the lightest shade as a background color. They demonstrated with badges (at the end of the article, just above the "Conclusion" heading), as does the book Refactoring UI, excerpted here: https://twitter.com/steveschoger/status/1045371124274483200

To meet contrast requirements and still make the difference between warning and stop funds readily apparent, the warning funds need a pale yellow background. For consistency's sake, that means the stop funds need a pink background as well.

The .less-intense-alert CSS style, currently the last one in the main styles.css file, includes a comment that white-on-red alerts are very intense and hard to read when stacked--as funds in this dropdown are very likely to be. This style also uses a pink background.

The color scheme I've used is consistent with my PR on badge contrast, based on the same sources: https://bugs.launchpad.net/evergreen/+bug/1999282 I've been sticking with Bootstrap 5 color tints, but I'm open to fiddling with the exact colors as long as the final result passes WebAIM's contrast checker.

[Stephanie Leary (stephanieleary)]

I've adjusted the text colors based on Tiffany's feedback. The branch has been updated, and you can preview the colors in this CodePen if that's easier to test:
https://codepen.io/stephanieleary/pen/KKBpNRp

[Christine Morgan (cmorgan-z)]

Tested on bugsquash.mobiusconsortia.org.

I created 2 funds, one with a 90% warning percentage set and one with a 90% stop percentage set. Then expended money from each fund to trigger the warning and stop percentage.

Looking at the fund dropdown in the PO batch updater and in the item details, the 2 funds displayed as black text on a white background with a badge at the beginning of the text. I did not see the pink and yellow colors that Stephanie previewed in the CodePen.

An image of the dropdown I saw is attached.

[Jane Sandberg (sandbergja)]

I'm seeing the same as what Christine reported. The icons appear, but the colors do not. I don't understand why, from a quick glance at the patch, some styles are appearing and others are not.

Also noting that this patch doesn't provide the warning or stop percentage information to screen readers. If that is not done as part of this ticket, we should open a separate ticket for it.

[Stephanie Leary (stephanieleary)]

I finally found the problem with my CSS selectors (while looking at something else, as one does). I have updated and rebased the branch: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1984007-funds-dropdown-warnings

You should see color and icons in fund dropdowns, the top of the PO details box, and PO line items (expanded). Let me know if I have overlooked any other areas where funds appear.

[Mary Llewellyn (mllewell)]

I'm seeing icons, bold type messages, and color highlights for the warning and stop percents (yellow and pink, respectively)

I have tested this code and consent to signing off on it with my name, Mary Llewellyn and my email address, <email address hidden>.

[Jane Sandberg (sandbergja)]

Thanks, Stephanie and Mary! I see this as an accessibility bugfix, rather than a new feature. Therefore, I pushed it to rel_3_10 and above.