fix(react): show TextField reveal button in Edge - #36484
Draft
AKnassa wants to merge 1 commit into
Draft
Conversation
TextField suppressed its own password reveal button on Edge via a UA sniff (added when the feature shipped, to avoid doubling up with Edge's native ::-ms-reveal widget). That leaves Edge users with the native control, which cannot be themed, fails contrast in Windows contrast themes (Dark, Aquatic, Desert), and is mouse-only. Drop the Edge carve-out (IE 11 keeps its unhideable native button) and hide ::-ms-reveal on the field when the custom button renders, matching the existing ::-ms-clear idiom. Give the reveal button a resting forced-colors color (ButtonText) so the icon stays visible in contrast themes; hover already used Highlight. Password fields without canRevealPassword keep Edge's native reveal. The now-focusable button also helps microsoft#35657. Fixes microsoft#35656
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previous Behavior
In Edge, the password TextField (v8) hid Fluent's own "show password" eye button and relied on Edge's built-in one. That built-in eye can't be themed, is invisible in Windows contrast themes (Dark, Aquatic, Desert), and can't be reached with the keyboard.
New Behavior
Edge users get the same Fluent eye button as Chrome, Firefox, and Safari users: it follows the theme, stays visible in Windows contrast themes, and is keyboard-focusable. Edge's built-in eye is hidden so there aren't two buttons. IE 11 is untouched (its native button can't be hidden), and password fields that never opted into
canRevealPasswordkeep behaving exactly as before.What changed
ButtonText).Note: this is an intentional behavior change on Edge — the Fluent button stays toggled until clicked again, same as every other browser already gets. It also happens to help the keyboard-access issue #35657.
How to verify
Open the TextField "password with reveal button" example in Edge with a Windows contrast theme on — the eye is now visible and tabbable.
Related Issue(s)