[Bug 38383] New: say_info messages in web installer have bad contrast/font color
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Bug ID: 38383 Summary: say_info messages in web installer have bad contrast/font color Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: minor Priority: P5 - low Component: Installation and upgrade (web-based installer) Assignee: oleonard@myacpl.org Reporter: ewa.gozd@gmail.com QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com This might be another effect of the Bootstrap 5 upgrade. The font color of the say_info messages in the web installer are not well readable/lack contrast. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Ewa Gózd <ewa.gozd@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |rel_24_11_candidate -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #1 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Sorry Ewa - logged you out now and logged back in as me! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #2 from Emily Lamancusa (emlam) <emily.lamancusa@montgomerycountymd.gov> --- Created attachment 174298 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174298&action=edit Bug 38383: [DO NOT PUSH] Dbrev for testing -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #3 from Emily Lamancusa (emlam) <emily.lamancusa@montgomerycountymd.gov> --- Created attachment 174299 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174299&action=edit Bug 38383: Improve font color contrast on web installer Update the font colors for info, warning, and database errors on the web installer to meet WCAG accessibility guidelines for color contrast. For the yellow text, it is impossible to meet minimum contrast levels on a white background without losing the yellow-ness of the yellow. This patch opts for a dark text color with a light yellow highlight, to meet contrast standards while allowing the yellow to be easily distinguished from other message colors. To test: 1. Apply patch for test dbrev 2. Trigger a database update from the web installer In KTD this can be done by: i. Changing the Version system preference to a slightly lower number (for example, from 24.0600057 to 24.0600056) ii. Reload the staff client iii. Log in with koha_kohadev, password --> Note that the blue and yellow colors are very light 3. If possible, use browser tools to check the accessibility of the different colors of text (in Firefox, right click on the text and choose "Inspect accessibility properties") --> Note that some of the text does not meet WCAG accessibility standard 4. Apply this patch and yarn build 5. Clear browser cache and refresh the page --> Note that the blue and yellow text is more readable 6. If possible, repeat step 3 --> Note that all text now meets WCAG standards -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Emily Lamancusa (emlam) <emily.lamancusa@montgomerycountymd.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |emily.lamancusa@montgomeryc | |ountymd.gov CC| |emily.lamancusa@montgomeryc | |ountymd.gov, | |oleonard@myacpl.org Status|NEW |Needs Signoff --- Comment #4 from Emily Lamancusa (emlam) <emily.lamancusa@montgomerycountymd.gov> --- Taking a stab at this one...but feel free to submit an alternate patch, Owen (or whoever), if there's a better way to do this! say_warning and the raw database failure didn't meet WCAG accessbility standards for contrast either, so I addressed all three in the patch. The highlight I used for say_warning breaks with the design a bit, but I felt it was the best choice, as it's virtually impossible to darken yellow enough to be accessible on a white background without losing the "yellow-ness" of it (see https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-... for a good discussion on this). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Emily Lamancusa (emlam) <emily.lamancusa@montgomerycountymd.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=38385 -- You are receiving this mail because: You are watching all bug changes.
Local use > Version. For some reason, searching for local use system
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com Depends on| |35402 --- Comment #5 from David Nind <david@davidnind.com> --- This is wider than just the web installer, as this will affect all messages displayed in the staff interface. For example, to see an Info message after the patch is applied go to Koha administration: "Share with Mana DB" and "Share anonymous usage statistics with the Koha community?". This definitely needs fixing, and I've signed off. However, should there be another bug to check the contrast for all the different message types? I'm not sure what the colours should be, whether the current colours are okay, and how it fits with the default staff interface and OPAC design. Testing notes (using KTD) 1. To fix the web installer messages so that you can see the colors (instead of the span classes), apply bug 38385 first. 2. To change the version number go to Koha administration > System preferences preferences does not work. 3. I used the WAVE web accessibility evaluation tool (https://wave.webaim.org/extension/) to check for contrast. 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=38383 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=38383 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174298|0 |1 is obsolete| | --- Comment #6 from David Nind <david@davidnind.com> --- Created attachment 174313 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174313&action=edit Bug 38383: [DO NOT PUSH] Dbrev for testing 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=38383 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174299|0 |1 is obsolete| | --- Comment #7 from David Nind <david@davidnind.com> --- Created attachment 174314 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174314&action=edit Bug 38383: Improve font color contrast on web installer Update the font colors for info, warning, and database errors on the web installer to meet WCAG accessibility guidelines for color contrast. For the yellow text, it is impossible to meet minimum contrast levels on a white background without losing the yellow-ness of the yellow. This patch opts for a dark text color with a light yellow highlight, to meet contrast standards while allowing the yellow to be easily distinguished from other message colors. To test: 1. Apply patch for test dbrev 2. Trigger a database update from the web installer In KTD this can be done by: i. Changing the Version system preference to a slightly lower number (for example, from 24.0600057 to 24.0600056) ii. Reload the staff client iii. Log in with koha_kohadev, password --> Note that the blue and yellow colors are very light 3. If possible, use browser tools to check the accessibility of the different colors of text (in Firefox, right click on the text and choose "Inspect accessibility properties") --> Note that some of the text does not meet WCAG accessibility standard 4. Apply this patch and yarn build 5. Clear browser cache and refresh the page --> Note that the blue and yellow text is more readable 6. If possible, repeat step 3 --> Note that all text now meets WCAG standards 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=38383 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |RM_priority -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #8 from Owen Leonard <oleonard@myacpl.org> --- Although we do need to adjust the "info" color in the staff client--the alert background is too light IMO--I don't think this change is the right thing to do globally. I would much prefer that we add an override in installer.scss. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #9 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 174409 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174409&action=edit Bug 38383: (follow-up) Undo global text-info change Adding an !important override to installer.scss isn't ideal but it's an acceptable interim solution pending a more thorough review of how we customize Bootstrap's text-* classes. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |38385 CC| |martin.renvoize@ptfs-europe | |.com Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38385 [Bug 38385] DB updates not displayed properly on the UI -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- 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=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on|38385 | Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38385 [Bug 38385] DB updates not displayed properly on the UI -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174313|0 |1 is obsolete| | --- Comment #10 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Created attachment 174411 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174411&action=edit Bug 38383: [DO NOT PUSH] Dbrev for testing 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=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174314|0 |1 is obsolete| | --- Comment #11 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Created attachment 174412 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174412&action=edit Bug 38383: Improve font color contrast on web installer Update the font colors for info, warning, and database errors on the web installer to meet WCAG accessibility guidelines for color contrast. For the yellow text, it is impossible to meet minimum contrast levels on a white background without losing the yellow-ness of the yellow. This patch opts for a dark text color with a light yellow highlight, to meet contrast standards while allowing the yellow to be easily distinguished from other message colors. To test: 1. Apply patch for test dbrev 2. Trigger a database update from the web installer In KTD this can be done by: i. Changing the Version system preference to a slightly lower number (for example, from 24.0600057 to 24.0600056) ii. Reload the staff client iii. Log in with koha_kohadev, password --> Note that the blue and yellow colors are very light 3. If possible, use browser tools to check the accessibility of the different colors of text (in Firefox, right click on the text and choose "Inspect accessibility properties") --> Note that some of the text does not meet WCAG accessibility standard 4. Apply this patch and yarn build 5. Clear browser cache and refresh the page --> Note that the blue and yellow text is more readable 6. If possible, repeat step 3 --> Note that all text now meets WCAG standards 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=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #174409|0 |1 is obsolete| | --- Comment #12 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Created attachment 174413 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174413&action=edit Bug 38383: (follow-up) Undo global text-info change Adding an !important override to installer.scss isn't ideal but it's an acceptable interim solution pending a more thorough review of how we customize Bootstrap's text-* classes. 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=38383 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA --- Comment #13 from Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> --- Agree with distinct bug for this.. Passing QA on this one. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords|rel_24_11_candidate, | |RM_priority | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to main Version(s)| |24.11.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #14 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Pushed for 24.11! 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=38383 Pedro Amorim <pedro.amorim@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |pedro.amorim@ptfs-europe.co | |m --- Comment #15 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- Hi guys I'm using '.text-info' on a dev piece (bug 35604). When it was implemented a while ago (prior to bootstrap upgrade), it worked fine (good readable blue). Now it's barely visible. The first patch solves the issue. The 2nd patch isolates the fix to the installer only, why? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #16 from Owen Leonard <oleonard@myacpl.org> --- (In reply to Pedro Amorim from comment #15)
The 2nd patch isolates the fix to the installer only, why?
Because we need to review how the '.*-info' tag is used elsewhere to make sure we don't break something. For example, when I tested the first version of this patch the "Claims" tab on the checkout page was unreadable. When I was customizing variables for the Bootstrap 5 upgrade I did not test ALL of them because so many were unused. We need to make sure .text-info works well without making .text-bg-info unusable. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #17 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- Created attachment 174738 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174738&action=edit claims tab (In reply to Owen Leonard from comment #16)
(In reply to Pedro Amorim from comment #15)
The 2nd patch isolates the fix to the installer only, why?
Because we need to review how the '.*-info' tag is used elsewhere to make sure we don't break something. For example, when I tested the first version of this patch the "Claims" tab on the checkout page was unreadable.
When I was customizing variables for the Bootstrap 5 upgrade I did not test ALL of them because so many were unused. We need to make sure .text-info works well without making .text-bg-info unusable.
I feel like we need to file a follow-up bug with a test plan if this is the case.
From my testing, things ((alert-info boxes, etc) generally look better (more contrast) using: $info: $blue-500;
I don't see an issue on the claims tab, see attachment - other than the blue being darker - but I'm not familiar with that tab / feature and I'm possibly missing something. I don't fully agree with isolating the fix to the installer because it's not fixing the root issue and is specific styling when this should ideally be global. I think it'd be better if we adopt the correct color globally and then address individual issues as we stumble upon then, instead of having the *-info color be wrong everywhere except the installer. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #18 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- (In reply to Pedro Amorim from comment #17)
Created attachment 174738 [details] claims tab
(In reply to Owen Leonard from comment #16)
(In reply to Pedro Amorim from comment #15)
The 2nd patch isolates the fix to the installer only, why?
Because we need to review how the '.*-info' tag is used elsewhere to make sure we don't break something. For example, when I tested the first version of this patch the "Claims" tab on the checkout page was unreadable.
When I was customizing variables for the Bootstrap 5 upgrade I did not test ALL of them because so many were unused. We need to make sure .text-info works well without making .text-bg-info unusable.
I feel like we need to file a follow-up bug with a test plan if this is the case. From my testing, things ((alert-info boxes, etc) generally look better (more contrast) using: $info: $blue-500;
I don't see an issue on the claims tab, see attachment - other than the blue being darker - but I'm not familiar with that tab / feature and I'm possibly missing something.
I don't fully agree with isolating the fix to the installer because it's not fixing the root issue and is specific styling when this should ideally be global. I think it'd be better if we adopt the correct color globally and then address individual issues as we stumble upon then, instead of having the *-info color be wrong everywhere except the installer.
Not sure if that's the same spot. But I notice the Hea and ManaKB notes on the administration start page are also a bit pale. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #19 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- Created attachment 174739 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=174739&action=edit administration (In reply to Katrin Fischer from comment #18)
Not sure if that's the same spot. But I notice the Hea and ManaKB notes on the administration start page are also a bit pale.
Yes. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 Bug 38383 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=38383 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com Resolution|--- |FIXED Status|Pushed to main |RESOLVED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #20 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- Owen, Katrin, should we open a bug about this blue info color? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=38519 --- Comment #21 from David Nind <david@davidnind.com> --- (In reply to Pedro Amorim from comment #19)
Created attachment 174739 [details] administration
(In reply to Katrin Fischer from comment #18)
Not sure if that's the same spot. But I notice the Hea and ManaKB notes on the administration start page are also a bit pale.
Yes.
Bug 38519 fixes the colors and colour contrast for Bootstrap alerts and text background classes. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38383 --- Comment #22 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- (In reply to David Nind from comment #21)
Bug 38519 fixes the colors and colour contrast for Bootstrap alerts and text background classes.
Thanks David++ I wasn't aware of this one! Awesome! -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org