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.
Example implementation
8253
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.
Proposed Alternatives
No response
Organization
UI5
Additional Context
No response
Priority
None
Privacy Policy
[X] I’m not disclosing any internal or sensitive information.
ilhan007
commented
8 months ago
Feature Request Description
According to the latest visual and interaction designs, the focus should behave like this:
Input elements remain unchanged - they always show focus as additional attention is needed.
To be clarified:
Example implementation
8253
Proposed Solution
A pure CSS solution is possible by using
:focus-visiblewhich 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-withinif 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 viafocusinandfocusouthandlers is discouraged and should be clarified additionally.Proposed Alternatives
No response
Organization
UI5
Additional Context
No response
Priority
None
Privacy Policy