fix(material/form-field): failing color contrast text to bg color ratio

[essjay05]

trafficstars

Removes :hover and .mat-focused opacity changes to .form-field-focus-overlay which was causing a low color contrast ratio between the text and form-field input background fill color.

[essjay05]

Googlers: see [internal discussion] (b/186036229)

[zarend]

Does this affect only "fill" appearance? or does it affect "outline" appearance to?

I added dev-app-preview tag, so that automation will deploy a test site of this PR.

[github-actions[bot]]

Deployed dev-app for c9b4ae328532d31d4a32fbc32054442a2c8a98d2 to: https://ng-dev-previews-comp--pr-angular-components-28274-dev-q2hl34ba.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

[essjay05]

Does this affect only "fill" appearance? or does it affect "outline" appearance to?

I added dev-app-preview tag, so that automation will deploy a test site of this PR.

Just the fill color I believe. The "outline" color change is still visible on focus: Before:

Current:

[essjay05]

Here are some screenshots comparing the perceived original colors failing as well as the updated perceived colors passing.

[simSmulders]

when will this be merged? I now have to overwrite the css variable --mat-form-field-focus-state-layer-opacity manually and set it to 0. This seems to work, however locally I saw it happen that the opacity is set by the private _form-field-focus-overlay.scss file and then the css variable does not work ...

[zarend]

Hello @simSmulders ,

Thank you for reaching out and letting us know that you're affected.

Our process requires the google-internal-tests check to pass before we can merge this. Since many components use form field, this affects a relatively large surface area. It could take some time.

This issue is actively being worked on, and I think it will land within the next week.

Best Regards,

Zach

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}