[4.2] Override Check quick Icon

[brianteeman]

Several users have expressed the view that the red error styling on th quickicon when there are overrides to check is too "scary".

This pr introduces a separate warning class for "warning" and updates the js to use this warning instead of the error

To test either run npm ci or use a prebuilt build

[N6REJ]

how can we trigger the update warning during testing?

[Kostelano]

When hovering the cursor, the color of the icon merges with the background, which was not (as far as I remember) in the danger type.

[RickR2H]

I have tested this item ✅ successfully on 8d5e28e

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[viocassel]

I have tested this item ✅ successfully on 8d5e28e

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[RickR2H]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[brianteeman]

this can not possibly be rtc

[RickR2H]

@brianteeman what's wrong with the PR?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[brianteeman]

#38813 (comment)

[RickR2H]

Back to pending

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[brianteeman]

Please retest

[RickR2H]

I have tested this item ✅ successfully on 333b2f6

Hover icon now working. Thanks Brian!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[Kostelano]

I have tested this item ✅ successfully on 333b2f6

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[alikon]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38813.}

[coolcat-creations]

I think that the colors used have not enough contrast:


(I took them from the screens posted here)

[brianteeman]

Suggested colours welcome

[coolcat-creations]

What about this combinations?
https://medium.com/handsome-perspectives/a-guide-to-color-accessibility-in-product-design-aa3e8919be0
The second row AAA looks good to me

[brianteeman]

The background colour is NOT being defined in this PR. It is using the one defined globally in the atum template variables

[coolcat-creations]

I remember I researched accessible colors and set them up but it was reverted by someone else :-(

[brianteeman]

As this PR is about using the warning instead of the error I would really like to see this merged as it is and then the JAT can make sure that the core template colours are all accessible. Or the JAT can actually submit a PR

[coolcat-creations]

I would suggest to merge the colors first so that your PR does not bring any accessibility issues on the front dashboard.

[RickR2H]

@coolcat-creations could you make a PR? Happy to test as I agree with this PR...

[coolcat-creations]

I try, I don't have a dev environment because composer and npm does not work on my computer but I try to create the PR "blind" - maybe I can see then in the prebuild packages if I changed it in the correct file.

[coolcat-creations]

I just had a look in the github files and it's slightly more then just changing the warning color because the featured state is using warning as well, which is strange. I need a buddy to get composer running on my computer then I can do this with pleasure and fix some of the colors.

[N6REJ]

I try, I don't have a dev environment because composer and npm does not work on my computer but I try to create the PR "blind" - maybe I can see then in the prebuild packages if I changed it in the correct file.

Run my program and your worries will go away :D https://bearsampp.com/get-started Takes about 5 minutes to setup and zero "install"

[coolcat-creations]

I try, I don't have a dev environment because composer and npm does not work on my computer but I try to create the PR "blind" - maybe I can see then in the prebuild packages if I changed it in the correct file.

Run my program and your worries will go away :D https://bearsampp.com/get-started Takes about 5 minutes to setup and zero "install"

Thank you but I am on a Mac :) When I try to install Composer it's always complaining about missing libraries.

[N6REJ]

Thank you but I am on a Mac :) When I try to install Composer it's always complaining about missing libraries.

well darn.

[coolcat-creations]

Appreciate help and feedback on #38885

[crystalenka]

The WCAG 2.0 contrast checker is famously inaccurate for white-on-orange text; it's calculating pure contrast instead of perceived contrast.

While not technically WCAG 2.0, it is more accurate to test the colors in the upcoming WCAG 3.0 checker for these particular combos. (More here)[https://www.myndex.com/APCA/]

Here are the APCA results for the hover state:
(contrast okay for spot and non-text elements only)

And for the default state:
(contrast insufficient)

So the contrast definitely needs to be improved. However, I don't think that we don't have to change the colors as drastically as in #38885 in order to get it there :)

I'll comment over there also with some ideas.

[brianteeman]

So the contrast definitely needs to be improved. However, I don't think that we don't have to change the colors as drastically as in #38885 in order to get it there :)

Thanks and agreed.

I'll comment over there also with some ideas.

And/or submit a pr to this branch

[HLeithner]

if I understood this correctly this pr is not RTC right or is it better then nothing?

[coolcat-creations]

It will place a not accessible warning on the home dashboard. I will rework the color change PR now.

[brianteeman]

It is better than nothing and the PR proposed by @coolcat-creations is a seperate thing that will require considerable testing on its own

[coolcat-creations]

Please test #38885 :-)

[coolcat-creations]

But you introduce here to break accessibility @brianteeman ? I think the color needs to be fixed and then your PR can be merged without breaking a11y

[chmst]

Please also test with setting "monochrome" and changing the hue value for atum

[brianteeman]

Please also test with setting "monochrome" and changing the hue value for atum

Before and after this PR the monochrome setting makes all the icon shades so close together they cannot be differentiated

Before and after this PR the atum hue settings have zero impact on the quickicons

[brianteeman]

Not wasting my time on this.