Problem/Motivation
The color contrast for the skip to main content
display is too low for the hover as well as the active state and breaks SC 1.4.3
focus state (color contrast of 9.73:1)
https://contrast-ratio.com/#%23fff-on-%23444
hover state (color contrast of 1.0029790028808814:1)
https://contrast-ratio.com/#%230036b1-on-%23444
active state (color contrast of 1.11:1)
https://contrast-ratio.com/#%2300339a-on-%23444
Comment | File | Size | Author |
---|---|---|---|
#11 | 3273056-11-10.0.x.patch | 1.34 KB | mherchel |
| |||
#10 | hova.gif | 7.51 KB | mherchel |
#9 | active-2.png | 19.16 KB | kmonahan |
#9 | hover-2.png | 19.05 KB | kmonahan |
#9 | focus-2.png | 18.94 KB | kmonahan |
Issue fork drupal-3273056
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3273056-active-and-hover changes, plain diff MR !2105
Comments
Comment #4
kmonahan CreditAttribution: kmonahan at Forum One commentedOpened https://git.drupalcode.org/project/drupal/-/merge_requests/2105
After changes applied:
Focus
Hover
Active
Comment #5
ckrinaThanks @kmonahan! I've left a small feedback regarding how you defined the colors that applies to your code, but if you could update that too on the default
.skip-link
state colors too (line 13 and 15 inskip-link.pcss.css
) it would great.I'd just choose the closer color from the gray scale for grays.
Comment #6
Johnny Santos CreditAttribution: Johnny Santos at CI&T commentedMaybe I can give it a try?
I hope its ok
Comment #7
Johnny Santos CreditAttribution: Johnny Santos at CI&T commentedThere it goes as requested on comment #5 and #6
Comment #8
mherchel@Johnny Santos Thanks for the work.
The changes have a couple problems:
1) It removes the non-hover background styling
2) Per @ckrina comment, you should be using the CSS variables to color the background, not a one-off hex value.
3) The compiled output doesn't match what you uploaded. This means that you forgot to re-compile the CSS one last time. This is why it says "Custom Commands Failed"
Comment #9
kmonahan CreditAttribution: kmonahan at Forum One commentedAdded to @Johnny Santos's update to use Claro variables for all colors and build the CSS.
Updated screenshots:
Focus
Hover
Active
Comment #10
mherchelLatest changes look perfect. Tested focus, hover, and active states.
Comment #11
mherchelAttached is the Drupal 10 version of the same fix.
Comment #13
mherchelUnrelated failure.
Comment #17
lauriiiCommitted c3a73e9 and pushed to 10.0.x. Committed MR to 9.4.x and cherry-picked to 9.3.x. Thanks!