{{ message }}
fix(input): improve clear button focus contrast - #31428
Open
kavyansh18 wants to merge 1 commit into
Open
Conversation
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.
Issue number: resolves #31141
What is the current behavior?
When an
ion-inputhasclear-inputenabled and the clear button receives keyboard focus, the clear button opacity is reduced to0.5.This makes the enabled clear button appear visually disabled when navigating to it using the keyboard. The reduced opacity also results in insufficient contrast for the clear button in its focused state.
The behavior comes from the
.input-clear-icon:focusstyle incore/src/components/input/input.scss, which explicitly sets the opacity to0.5.What is the new behavior?
The clear button now retains full opacity when it receives keyboard focus.
The focused clear button opacity has been changed from
0.5to1, keeping the control visually consistent with its enabled state and improving its contrast when keyboard-focused.A regression test has also been added to verify that:
1when focused.Does this introduce a breaking change?
This is a visual and accessibility-related bug fix only. No component APIs, properties, events, or existing interaction behavior have been changed.
Other information
The fix is limited to the existing focused-state opacity rule and a corresponding regression test.
No dependencies, configuration, component behavior, ARIA attributes, or other styles were changed.
The regression test passes across Mobile Chrome, Mobile Safari, and Mobile Firefox.