Comment form save button has incorrect background color and contrast ratio violation on hover

Seems these buttons are inheriting hover & focus styles from jQuery UI

.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc/*{borderColorHover}*/;
  background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
  font-weight: normal/*{fwDefault}*/;
  color: #2b2b2b/*{fcHover}*/;
}

core/assets/vendor/jquery.ui/themes/base/theme.css

Feels like we need to declare these properties in the button:hover/button:focus rulesets.

Something like the attached patch.

I've checked this with both a button, and primary button inside a dialog and it seems to be OK - the background: none gets overridden by the button--primary:hover/focus rule.

@aaron.ferris Thanks for the patch, it applied successfully and looks good to me. I have attached video here.

marking as RTBC.

Patch works! Things are looking good after a patch.

Before patch:

After patch:

RTBC +1

Thanks!

Would be great to have one of the subsystem maintainers review this change since it impacts all buttons using this variation.

Patch applied cleanly for me and resolved the issue of save button state on hover.

Verified and tested patch #3.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: admin/content
# Create an article node.
# Add a comment.
# Click on the add link icon
# Add link there, hover on save button.
# On hover, button becomes a little small

Can be a move to RTBC.

Moving back to needs review to address #8.

I didn't check with tooling, but looking at the videos and screenshots, I strongly suspect the current behavior shows a contrast ratio violation. That makes this a major bug, an accessibility gate violation, and a stable blocker.

Patch #3 looks perfect. RTBC

This seems like a really nice improvement! I checked the color contrast of the color used on hover, and it seems like it's not sufficient. We should probably wait until #3211616: Olivero: a11y color contrast test fail for primary button on hover has landed and use the color from there on the hover.

On hover button is using --color--blue-50 variable, Updated it with newly added variable color --color--blue-10 Please review.

Added interdiff for #3. Please review

Hi @Gauravmahlawat
Patch applied successfully but Some test cases are getting failed on patch #23

Testing Steps:
# Goto: admin/content
# Create an article node.
# Add a comment.
# Click on the add link icon
# Add link there, hover on save button.
# On hover, the button becomes a little small

Also, I have checked the variation which is addressed in #8
On hover button is using --color--blue-50 variable, Updated it with newly added variable color --color--blue-10

Please refer attached screenshots for the same.
test cases are getting failed on patch #23 so moving to needs work as the patch needs to be re-rolled again.

New patch is sort of a reroll of #20. Non-reroll changes include:

1. Removed the change to variables.pcss.css as it's not needed since #3211616: Olivero: a11y color contrast test fail for primary button on hover
2. Removed changes to node-teaser.pcss.css as they are not related to this issue

It tends to help when you actually upload the patch.

Tests failed :(

Patch #28, resolved the jerk and color accessibility issue of the save button state on hover.

Adding after patch screen recording. Moving to RTBC.

Committed 8c2a124 and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!