Controls in mobile: some show outline, some don't
@stephania87 is already working on this.
Since Jan 8, 2021.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 1.3k
- PR merge metrics
- No merged PRs in 30d
Description
Please correct me if I'm wrong but afaik UI5 controls in mobile devices aren't supposed display the dotted outline at all (such as in sap.m.Button, .CheckBox, etc..) since there is no keyboard navigation.
However, there are controls that do show the outline in mobile regardless:
sap.m.RadioButtonsap.ui.core.Icon(touch the stethoscope icon)- List items from
sap.m.Selectand.ComboBox, but the same doesn't apply to.MultiComboBox. - Input based controls including
sap.m.StepInputand.MaskInput... But.SearchFielddoesn't. sap.m.Breadcrumbsshows browser's native outline whereas.Linkworks as intended (no outline).sap.ui.unified.Menuitemssap.tnt.NavigationListitems- Panel's expand icon (probably due to
sap.ui.core.Iconhaving the same problem?) - Dots in the footer of
sap.ui.layout.ResponsiveSplitter - And more ...
What are the criteria for displaying / hiding the outline in mobile? I believe showing outline in input-based controls is by design. But then, shouldn't SearchField also display the outline too when the user touches it?
What is the expected result?
Improved consistency according to specification.
What happens instead?
Inconsistency, confusing communication; mobile users don't know what to expect when touching a focusable control.
Any other information? (attach screenshot if possible)
E.g. in Chrome's device mode:

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.