| Summary: | Improve contrast of Bootstrap alerts and text background classes | ||
|---|---|---|---|
| Product: | Koha | Reporter: | Owen Leonard <oleonard> |
| Component: | Templates | Assignee: | Owen Leonard <oleonard> |
| Status: | Pushed to main --- | QA Contact: | Martin Renvoize (ashimema) <martin.renvoize> |
| Severity: | normal | ||
| Priority: | P5 - low | CC: | david, m.de.rooy, martin.renvoize, pedro.amorim |
| Version: | Main | ||
| Hardware: | All | ||
| OS: | All | ||
| See Also: | https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 | ||
| 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: | |||
| Bug Depends on: | 35402 | ||
| Bug Blocks: | |||
| Attachments: |
Screenshot showing examples of Bootstrap alerts and text with background
Screenshot showing proposed updated colors Bug 38519: Improve contrast of Bootstrap alerts and text background classes Bug 38519: Improve contrast of Bootstrap alerts and text background classes Bug 38519: Improve contrast of Bootstrap alerts and text background classes |
||
Created attachment 174935 [details]
Screenshot showing proposed updated colors
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 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> 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> 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. This is an enh, right ? (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). 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> Kinda shocked bootstrap doesn't get this right to start with.. anywho, I like the change, thanks. Passing QA (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! Pushed for 25.05! Well done everyone, thank you! |
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.