Skip to content

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

@ebenshoshan

Description

@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:

Image Image Image

Expected Behavior

The icon should be visible and have good contrast in all supported themes.

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.

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions