Bug 38519 - Improve contrast of Bootstrap alerts and text background classes
Summary: Improve contrast of Bootstrap alerts and text background classes
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal
Assignee: Owen Leonard
QA Contact: Martin Renvoize (ashimema)
URL:
Keywords: rel_24_11_candidate
Depends on: 35402
Blocks: 39000
  Show dependency treegraph
 
Reported: 2024-11-22 15:29 UTC by Owen Leonard
Modified: 2025-03-08 17:45 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This updates the staff interface CSS to improve the visibility and contrast in Bootstrap alerts and text with background classes. (This is related to the OPAC and staff interface Bootstrap 5 upgrade in Koha 24.11.)
Version(s) released in:
25.05.00
Circulation function:


Attachments
Screenshot showing examples of Bootstrap alerts and text with background (58.36 KB, image/png)
2024-11-22 15:29 UTC, Owen Leonard
Details
Screenshot showing proposed updated colors (59.96 KB, image/png)
2024-11-22 15:29 UTC, Owen Leonard
Details
Bug 38519: Improve contrast of Bootstrap alerts and text background classes (17.05 KB, patch)
2024-11-22 16:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 38519: Improve contrast of Bootstrap alerts and text background classes (17.10 KB, patch)
2024-11-27 06:05 UTC, David Nind
Details | Diff | Splinter Review
Bug 38519: Improve contrast of Bootstrap alerts and text background classes (17.18 KB, patch)
2024-12-16 19:06 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2024-11-22 15:29:05 UTC
Created attachment 174934 [details]
Screenshot showing examples of Bootstrap alerts and text with background

Some of the built-in Bootstrap alert and text background classes aren't working very well in terms of visibility and contrast. The "info" alert should stand out more, and the text background classes don't all have usable contrast. 

See the attached screenshot.
Comment 1 Owen Leonard 2024-11-22 15:29:49 UTC
Created attachment 174935 [details]
Screenshot showing proposed updated colors
Comment 2 Owen Leonard 2024-11-22 16:28:30 UTC
Created attachment 174936 [details] [review]
Bug 38519: Improve contrast of Bootstrap alerts and text background classes

This patch updates staff interface CSS in order to improve visibility
and contrast in Bootstrap alerts and text with background classes.

Some of these changes are made via our custom _variables.scss file which
sets overrides of default Bootstrap classes. I was not able to figure
out a good way to customize the .text-bg-* classes via that method so
I've inserted those changes into staff-global.scss.

The patch also removes our custom .note class because it can be replaced
with .alert.alert-info.

To test, apply the patch and rebuild the staff interface CSS.

- Clear your browser cache if necessary.
- View places where the updated classes can be found:
  - For example: Administration -> Authorized values. Click a
    category which has no saved values, e.g. Asort1. There should be two
    "info" classed alerts: One showing "NOTE: If you changed an
    authorized value..." and one showing "There are no authorized
    values..."
- Other examples of pages which are updated to use "alert alert-info"
  instead of the "note" class:
  - Patron search where the search is limited by permissions, e.g.
    Acquisitions -> Vendor -> Basket -> Add user.
  - Administration -> Search engine configuration: "Warning: Any changes
    to the configuration will only take effect..."
- See also pages where a count of something uses the text-bg-info class:
  - Bibliographic detail page when the record has holds
  - Patron module home page when there are pending modifications
  - Tools home page when there are tags or comments pending approval
  - A patron checkout screen when the Claims tab is present (
    BundleLostValue or ClaimReturnedLostValue prefs are set).

Sponsored-by: Athens County Public Libraries
Comment 3 Owen Leonard 2024-11-22 16:30:03 UTC
One way of getting a quick look at these changes: Add this markup to the IntranetMainUserBlock HTML customization:


<div class="text-bg-primary p-3">Primary (text-bg-primary)</div>
<div class="text-bg-secondary p-3">Secondary (text-bg-secondary)</div>
<div class="text-bg-success p-3">Success (text-bg-success)</div>
<div class="text-bg-danger p-3">Danger (text-bg-danger)</div>
<div class="text-bg-warning p-3">Warning (text-bg-warning)</div>
<div class="text-bg-info p-3">Info (text-bg-info)</div>

<div class="alert alert-primary" role="alert">
  Primary alert (alert alert-primary)
</div>
<div class="alert alert-secondary" role="alert">
  Secondary alert (alert alert-primary)
</div>
<div class="alert alert-success" role="alert">
  Success alert (alert alert-primary)
</div>
<div class="alert alert-danger" role="alert">
  Danger alert (alert alert-primary)
</div>
<div class="alert alert-warning" role="alert">
  Warning alert (alert alert-primary)
</div>
<div class="alert alert-info" role="alert">
  Info alert (alert alert-primary)
</div>
<div class="alert alert-light" role="alert">
  Light alert (alert alert-primary)
</div>
<div class="alert alert-dark" role="alert">
  Dark alert (alert alert-primary)
</div>
Comment 4 David Nind 2024-11-27 06:05:20 UTC
Created attachment 174996 [details] [review]
Bug 38519: Improve contrast of Bootstrap alerts and text background classes

This patch updates staff interface CSS in order to improve visibility
and contrast in Bootstrap alerts and text with background classes.

Some of these changes are made via our custom _variables.scss file which
sets overrides of default Bootstrap classes. I was not able to figure
out a good way to customize the .text-bg-* classes via that method so
I've inserted those changes into staff-global.scss.

The patch also removes our custom .note class because it can be replaced
with .alert.alert-info.

To test, apply the patch and rebuild the staff interface CSS.

- Clear your browser cache if necessary.
- View places where the updated classes can be found:
  - For example: Administration -> Authorized values. Click a
    category which has no saved values, e.g. Asort1. There should be two
    "info" classed alerts: One showing "NOTE: If you changed an
    authorized value..." and one showing "There are no authorized
    values..."
- Other examples of pages which are updated to use "alert alert-info"
  instead of the "note" class:
  - Patron search where the search is limited by permissions, e.g.
    Acquisitions -> Vendor -> Basket -> Add user.
  - Administration -> Search engine configuration: "Warning: Any changes
    to the configuration will only take effect..."
- See also pages where a count of something uses the text-bg-info class:
  - Bibliographic detail page when the record has holds
  - Patron module home page when there are pending modifications
  - Tools home page when there are tags or comments pending approval
  - A patron checkout screen when the Claims tab is present (
    BundleLostValue or ClaimReturnedLostValue prefs are set).

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>
Comment 5 David Nind 2024-11-27 06:11:48 UTC
Thanks for the easy way to show all the changes in one place!

All the changed colours have a WCAG rating of AAA for the colour contrast, except from Dark alert (alert alert-primary), which is AA.

For me personally, the info and info alert boxes are greatly improved - I find them much easier to read.
Comment 6 Marcel de Rooy 2024-12-13 09:01:34 UTC
This is an enh, right ?
Comment 7 David Nind 2024-12-13 09:16:20 UTC
(In reply to Marcel de Rooy from comment #6)
> This is an enh, right ?

I think it is more an accessibility bug rather than an enhancement - it fixes the contrast ratios for WCAG 2 compliance (W3C's Web Content Accessibility Guidelines).
Comment 8 Martin Renvoize (ashimema) 2024-12-16 19:06:51 UTC
Created attachment 175570 [details] [review]
Bug 38519: Improve contrast of Bootstrap alerts and text background classes

This patch updates staff interface CSS in order to improve visibility
and contrast in Bootstrap alerts and text with background classes.

Some of these changes are made via our custom _variables.scss file which
sets overrides of default Bootstrap classes. I was not able to figure
out a good way to customize the .text-bg-* classes via that method so
I've inserted those changes into staff-global.scss.

The patch also removes our custom .note class because it can be replaced
with .alert.alert-info.

To test, apply the patch and rebuild the staff interface CSS.

- Clear your browser cache if necessary.
- View places where the updated classes can be found:
  - For example: Administration -> Authorized values. Click a
    category which has no saved values, e.g. Asort1. There should be two
    "info" classed alerts: One showing "NOTE: If you changed an
    authorized value..." and one showing "There are no authorized
    values..."
- Other examples of pages which are updated to use "alert alert-info"
  instead of the "note" class:
  - Patron search where the search is limited by permissions, e.g.
    Acquisitions -> Vendor -> Basket -> Add user.
  - Administration -> Search engine configuration: "Warning: Any changes
    to the configuration will only take effect..."
- See also pages where a count of something uses the text-bg-info class:
  - Bibliographic detail page when the record has holds
  - Patron module home page when there are pending modifications
  - Tools home page when there are tags or comments pending approval
  - A patron checkout screen when the Claims tab is present (
    BundleLostValue or ClaimReturnedLostValue prefs are set).

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 9 Martin Renvoize (ashimema) 2024-12-16 19:07:26 UTC
Kinda shocked bootstrap doesn't get this right to start with.. anywho, I like the change, thanks.

Passing QA
Comment 10 Owen Leonard 2024-12-16 19:51:45 UTC
(In reply to Martin Renvoize (ashimema) from comment #9)
> Kinda shocked bootstrap doesn't get this right to start with...

It wasn't Bootstrap's fault, it was mine!
Comment 11 Katrin Fischer 2024-12-23 09:37:39 UTC
Pushed for 25.05!

Well done everyone, thank you!
Comment 12 Alex Buckley 2025-02-20 20:53:27 UTC
not backporting to 24.05.x unless requested - dependency not in 24.05
Comment 13 Laura Escamilla 2025-03-08 17:45:02 UTC
Thanks for your work on this Owen!

Can we get this backported to 24.11?