New focus handling behaviour

[pskelin]

Feature Request Description

According to the latest visual and interaction designs, the focus should behave like this:

• on desktop, always show a focus outline, no matter if the focus was received via mouse or keyboard
• on mobile, show focus outline only when focus is received via external keyboard and never show focus when the element is receiving focus via touch.

Input elements remain unchanged - they always show focus as additional attention is needed.

To be clarified:

• Select receives focus via keyboard on mobile, has an outline and can be opened with enter. The same is not the case for MultiCombobx and will be tacked separately.

Proposed Solution

A pure CSS solution is possible by using :focus-visible which will match only when focus is received via keyboard. This is sufficient for mobile.

For desktop, the :focusselector should be used with an additional attribute on the host manually set by the component. Use :focus-within if a nested component can receive focus, such as a button with avatar, the avatar will get the focus when touched.

The manual attributes [focused] and setting them via focusin and focusout handlers is discouraged and should be clarified additionally.

Example implementation

8253

[hristop]

Internal BLI created: BGSOFUIRILA-3812

[dobrinyonkov]

Internal Reference: BGSOFUIPIRIN-6469