[Bug 38519] New: Improve contrast of Bootstrap alerts and text background classes
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Bug ID: 38519 Summary: Improve contrast of Bootstrap alerts and text background classes Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: normal Priority: P5 - low Component: Templates Assignee: oleonard@myacpl.org Reporter: oleonard@myacpl.org QA Contact: testopia@bugs.koha-community.org Depends on: 35402 Created attachment 174934 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174934&action=edit 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. Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=35402 [Bug 35402] Update the OPAC and staff interface to Bootstrap 5 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |ASSIGNED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 174935 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174935&action=edit Screenshot showing proposed updated colors -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch Status|ASSIGNED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #2 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 174936 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174936&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174936|0 |1 is obsolete| | --- Comment #4 from David Nind <david@davidnind.com> --- Created attachment 174996 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174996&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com Text to go in the| |This updates the staff release notes| |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.) --- Comment #5 from 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Bug 38519 depends on bug 35402, which changed state. Bug 35402 Summary: Update the OPAC and staff interface to Bootstrap 5 https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=35402 What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to main |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|normal |enhancement CC| |m.de.rooy@rijksmuseum.nl --- Comment #6 from Marcel de Rooy <m.de.rooy@rijksmuseum.nl> --- This is an enh, right ? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|enhancement |normal --- Comment #7 from David Nind <david@davidnind.com> --- (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). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |martin.renvoize@ptfs-europe | |.com QA Contact|testopia@bugs.koha-communit |martin.renvoize@ptfs-europe |y.org |.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174996|0 |1 is obsolete| | --- Comment #8 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Created attachment 175570 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=175570&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA --- Comment #9 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Kinda shocked bootstrap doesn't get this right to start with.. anywho, I like the change, thanks. Passing QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #10 from Owen Leonard <oleonard@myacpl.org> --- (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! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=38383 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Pedro Amorim <pedro.amorim@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |pedro.amorim@ptfs-europe.co | |m -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |25.05.00 released in| | Status|Passed QA |Pushed to main -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #11 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Pushed for 25.05! Well done everyone, thank you! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |39000 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39000 [Bug 39000] "Encoding errors" block on detail page hurt the eyes -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Alex Buckley <alexbuckley@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |alexbuckley@catalyst.net.nz --- Comment #12 from Alex Buckley <alexbuckley@catalyst.net.nz> --- not backporting to 24.05.x unless requested - dependency not in 24.05 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |rel_24_11_candidate CC| |Laura.escamilla@bywatersolu | |tions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #13 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Thanks for your work on this Owen! Can we get this backported to 24.11? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=39274 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords|rel_24_11_candidate | CC| |paul.derscheid@lmscloud.de Version(s)|25.05.00 |25.05.00,24.11.03 released in| | Status|Pushed to main |Pushed to stable --- Comment #14 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Nice work everyone! Pushed to 24.11.x for 24.11.03 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|25.05.00,24.11.03 |25.05.00,24.11.03,24.11.02 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 --- Comment #15 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Pushed to 24.11.02 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|25.05.00,24.11.03,24.11.02 |25.05.00,24.11.02 released in| | --- Comment #16 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- I scraped git and it highlighted a version mismatch between Pauls report here and the actual tag this was released in ;) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38519 Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |wainuiwitikapark@catalyst.n | |et.nz Status|Pushed to stable |Needs documenting --- Comment #17 from Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz> --- Depends on bug not in 22.11.x Not backporting to 22.11.x -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org