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.
Sorry Ewa - logged you out now and logged back in as me!
Created attachment 174298 [details] [review] Bug 38383: [DO NOT PUSH] Dbrev for testing
Created attachment 174299 [details] [review] 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
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-a0db1eedc99d for a good discussion on this).
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 > Local use > Version. For some reason, searching for local use system preferences does not work. 3. I used the WAVE web accessibility evaluation tool (https://wave.webaim.org/extension/) to check for contrast.
Created attachment 174313 [details] [review] Bug 38383: [DO NOT PUSH] Dbrev for testing Signed-off-by: David Nind <david@davidnind.com>
Created attachment 174314 [details] [review] 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>
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.
Created attachment 174409 [details] [review] 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.
Created attachment 174411 [details] [review] 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>
Created attachment 174412 [details] [review] 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>
Created attachment 174413 [details] [review] 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>
Agree with distinct bug for this.. Passing QA on this one.
Pushed for 24.11! Well done everyone, thank you!
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?
(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.
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.
(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.
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.
Owen, Katrin, should we open a bug about this blue info color?
(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.
(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!