fix(select): remove item focus style when there are no selected items only at ionic mode

[joselrio]

Issue number: resolves #

---

This PR introduces improvements to the visual focus styling of Ionic items when inside a select modal.

What is the current behavior?

• The CSS variables --background-focused and --background-focused-opacity were missing from item.ionic.scss, which resulted in the native default outline focus style being applied to focused items.
• When no item is selected, the focus style is currently applied to the first list item by default, which we intend to change.

What is the new behavior?

• Added missing focus css variables
• Hide the default focus style when there is no item selected

NOTE

• This change will require an additional interaction to observe the focus behavior when navigating through keyboard, since tap-based navigation does not rely on focus styling.

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Oct 29, 2025 5:16pm

[thetaPC]

Few things as well:

1. Checks are failing. Please have those passing before asking for a review.
2. This is causing a regression. Notice how there's a border radius when opening a select popover:

next	ROU-12235
https://github.com/user-attachments/assets/a156e4da-2fbc-472b-9b33-b9aaa85db78c	https://github.com/user-attachments/assets/ff9d844d-ddbf-42b4-baf0-632ac8cf6053

I haven't checked the other interfaces but I assume that they have the same issue. Please check.

3. What's the ticket to add in the work for "This change will require an additional interaction to observe the focus behavior when navigating through keyboard, since tap-based navigation does not rely on focus styling."? Because the options are no longer showing the focus rings when navigating with keyboard.

[joselrio]

3. What's the ticket to add in the work for "This change will require an additional interaction to observe the focus behavior when navigating through keyboard, since tap-based navigation does not rely on focus styling."? Because the options are no longer showing the focus rings when navigating with keyboard.

Basically we must add this behaviour just when keyboard navigation is used to navigate through the elements, before this implementation it was defined on top of tap navigation which causes this visual issue, now focus style is missing when there are no pre-selected option when keyboard navigation is in use.

[thetaPC]

Just realized that we should add a test under select-modal to capture the focus states when an option is selected and when it's not.

[thetaPC]

3. What's the ticket to add in the work for "This change will require an additional interaction to observe the focus behavior when navigating through keyboard, since tap-based navigation does not rely on focus styling."? Because the options are no longer showing the focus rings when navigating with keyboard.

Basically we must add this behaviour just when keyboard navigation is used to navigate through the elements, before this implementation it was defined on top of tap navigation which causes this visual issue, now focus style is missing when there are no pre-selected option when keyboard navigation is in use.

@joselrio I understand that the behavior needs to be added for keyboard. What's the Jira ticket that implements it?

[joselrio]

Just realized that we should add a test under select-modal to capture the focus states when an option is selected and when it's not.

I agree, but let's do it under the context of the task I mentioned before since focus should be specially tackled under that context ;)

[joselrio]

3. What's the ticket to add in the work for "This change will require an additional interaction to observe the focus behavior when navigating through keyboard, since tap-based navigation does not rely on focus styling."? Because the options are no longer showing the focus rings when navigating with keyboard.

Basically we must add this behaviour just when keyboard navigation is used to navigate through the elements, before this implementation it was defined on top of tap navigation which causes this visual issue, now focus style is missing when there are no pre-selected option when keyboard navigation is in use.

@joselrio I understand that the behavior needs to be added for keyboard. What's the Jira ticket that implements it?

Task do not exist yet, but it will be created since we already aligned with @jessicamendesOS and @gnbm about it.

[thetaPC]

LGTM