[Topic P] All components - display focus outline via keyboard only

[ilhan007]

Feature Request Description

As part of the Fiori Next initiative, along with the Horizon theme family, we would like to change the focus outline behaviour as follows: focus should be present only on pressing keyboard keys. Currently we apply focus upon mouse interaction (click) as well. So, we would have to distinguish between these two cases and apply focus outline only in the first case.

Origin issue: #3986

Proposed Solution

There is a native solution, you can make use of :focus-visible pseudo class to set the focus only via keyboard navigation.

When switching to the CSS solution, the focused state and the event handlers that update it should be removed.

Additional Context

For use-cases when the focus outline should be displayed on another HTML element other than the focused one, the ":focus-visible" won't work as it matches the actual focused element.

Example

:host([focused]) .ui5-button-root:after {

}
will become
.ui5-button-root:focus-visible.ui5-button-root:after {

}

Support

Contact UI5 Web Components Core team for all cases that the CSS solution won't work to discuss how to
handle them.

Priority

• Low
• Medium
• High
• Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: SAP UX

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-p this is a new Feature Request that needs to be evaluated, and eventually planned.

Thanks,
ilhan

[dobrinyonkov]

Internal reference: BGSOFUIPIRIN-5891

[ilhan007]

Closed in favour of: #8250