[kavyansh18]

Issue number: resolves #31141

---

What is the current behavior?

When an ion-input has clear-input enabled and the clear button receives keyboard focus, the clear button opacity is reduced to 0.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:focus style in core/src/components/input/input.scss, which explicitly sets the opacity to 0.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.5 to 1, 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:

• The clear button can receive keyboard focus.
• The clear button remains focused after keyboard navigation.
• The clear button has an opacity of 1 when focused.

Does this introduce a breaking change?

• Yes
• No

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.

[vercel]

@kavyansh18 is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

[kavyansh18]

hey @thetaPC can you please review the PR

[SandraCaci]

With this fix, it is my understanding that with this fix it won't be visible to the user that the clear icon has focus. That would violate https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html . If you agree that this is the case, can you please include a fix for that? Suggested solution is to use the approach of https://web.dev/articles/style-focus :
border: 1px solid black;
outline: 2px solid white;

And another WCAG accessibility rule that relates to this clear icon is https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html . It should have an understandable aria-label, which means that in a non-English application it should have a non-English aria-label, but currently it is hardcoded as "reset" without any means to override that. Could that please be fixed as well?

[kavyansh18]

Thanks for the review @SandraCaci , I've added a visible focus indicator for the clear button and made its accessible label customizable. I've also added tests for keyboard focus and the default/custom labels.