fix(input): improve clear button focus contrast

[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.