? a11y NPM Resource Changed ? ? Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
22 Sep 2022

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

avatar brianteeman brianteeman - open - 22 Sep 2022
avatar brianteeman brianteeman - change - 22 Sep 2022
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 22 Sep 2022
Category JavaScript Repository NPM Change
avatar brianteeman brianteeman - change - 22 Sep 2022
Labels Added: NPM Resource Changed ?
avatar N6REJ
N6REJ - comment - 22 Sep 2022

how can we trigger the update warning during testing?

avatar Kostelano
Kostelano - comment - 22 Sep 2022

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.

Screenshot_1

avatar RickR2H
RickR2H - comment - 23 Sep 2022

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.

avatar RickR2H RickR2H - test_item - 23 Sep 2022 - Tested successfully
avatar viocassel
viocassel - comment - 23 Sep 2022

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.

avatar viocassel viocassel - test_item - 23 Sep 2022 - Tested successfully
avatar RickR2H RickR2H - change - 23 Sep 2022
Status Pending Ready to Commit
avatar RickR2H
RickR2H - comment - 23 Sep 2022

RTC


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

avatar brianteeman
brianteeman - comment - 23 Sep 2022

this can not possibly be rtc

avatar RickR2H
RickR2H - comment - 23 Sep 2022

@brianteeman what's wrong with the PR?


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

avatar brianteeman
brianteeman - comment - 23 Sep 2022
avatar RickR2H RickR2H - change - 23 Sep 2022
Status Ready to Commit Pending
avatar RickR2H
RickR2H - comment - 23 Sep 2022

Back to pending


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

333b2f6 23 Sep 2022 avatar brianteeman tweak
avatar brianteeman
brianteeman - comment - 23 Sep 2022

Please retest

image

image

avatar RickR2H
RickR2H - comment - 23 Sep 2022

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.

avatar RickR2H RickR2H - test_item - 23 Sep 2022 - Tested successfully
avatar Kostelano
Kostelano - comment - 23 Sep 2022

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.

avatar Kostelano Kostelano - test_item - 23 Sep 2022 - Tested successfully
avatar alikon alikon - change - 23 Sep 2022
Status Pending Ready to Commit
avatar alikon
alikon - comment - 23 Sep 2022

RTC


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

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

I think that the colors used have not enough contrast:
grafik
grafik
(I took them from the screens posted here)

avatar brianteeman
brianteeman - comment - 30 Sep 2022

Suggested colours welcome

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

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

avatar brianteeman
brianteeman - comment - 30 Sep 2022

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

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

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

avatar brianteeman
brianteeman - comment - 30 Sep 2022

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

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

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

avatar RickR2H
RickR2H - comment - 30 Sep 2022

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

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

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.

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

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.

avatar N6REJ
N6REJ - comment - 30 Sep 2022

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"

avatar coolcat-creations
coolcat-creations - comment - 30 Sep 2022

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.

avatar N6REJ
N6REJ - comment - 30 Sep 2022

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

well darn.

avatar coolcat-creations
coolcat-creations - comment - 1 Oct 2022

Appreciate help and feedback on #38885

avatar crystalenka
crystalenka - comment - 4 Oct 2022

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)

Screen Shot 2022-10-04 at 11 29 58

And for the default state:
(contrast insufficient)

Screen Shot 2022-10-04 at 11 31 34

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.

avatar brianteeman
brianteeman - comment - 4 Oct 2022

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

avatar HLeithner
HLeithner - comment - 15 Oct 2022

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

avatar coolcat-creations
coolcat-creations - comment - 15 Oct 2022

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

avatar brianteeman
brianteeman - comment - 15 Oct 2022

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

avatar coolcat-creations
coolcat-creations - comment - 15 Oct 2022

Please test #38885 :-)

avatar coolcat-creations
coolcat-creations - comment - 15 Oct 2022

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

avatar chmst
chmst - comment - 15 Oct 2022

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

avatar brianteeman
brianteeman - comment - 15 Oct 2022

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

avatar brianteeman
brianteeman - comment - 15 Oct 2022

Not wasting my time on this.

avatar brianteeman brianteeman - close - 15 Oct 2022
avatar brianteeman brianteeman - change - 15 Oct 2022
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2022-10-15 11:40:07
Closed_By brianteeman
Labels Added: ? a11y ?

Add a Comment

Login with GitHub to post a comment