[Bug] [Accessibility]: TextField component contrast issue with eye Icon in Dark, Aquatic and Desert theme

[ebenshoshan]

Package

react

Package version

8.115.6

React version

17.0.2

Environment

Didn't work. Issue is also on fluent ui webpage:
https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield:~:text=Password%20with%20reveal%20button

Current Behavior

Contrast issues and visibility issues in Desert, Aquatic and Dark themes. Can't see the eye icon:

Also the reveal/hide icon is not accessible through keyboard actions or voice command to enable/disable the show/hidden features through eye icon button.

Expected Behavior

The icon should be visible and have good contrast in all supported themes.
The icon should be keyboard/voice command accessible.

Reproduction

https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield#feedback:~:text=Password%20with%20reveal%20button

Steps to reproduce

1. Go to link.
2. Enable dark/aquatic/desert mode themes and see that button isn't visible in at least 1 of the 2 modes and that you can't transition to reveal button through keyboard or voice command.

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[ebenshoshan]

After further investigation, I believe this happens because of this

The textfield component enforces use of Edge's built in password reveal which doesn't hold up to accessibility standards.

[ebenshoshan]

Updated with explanation of other bug