Controls in mobile: some show outline, some don't

[boghyon]

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.RadioButton
• sap.ui.core.Icon (touch the stethoscope icon)
• List items from sap.m.Select and .ComboBox, but the same doesn't apply to .MultiComboBox.
• Input based controls including sap.m.StepInput and .MaskInput... But .SearchField doesn't.
• sap.m.Breadcrumbs shows browser's native outline whereas .Link works as intended (no outline).
• sap.ui.unified.Menu items
• sap.tnt.NavigationList items
• Panel's expand icon (probably due to sap.ui.core.Icon having 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:

[gerym]

Hi @boghyon ,

Thank you for sharing this finding. I will discuss your question with the responsible designers, and will rise tickets if needed.

Thanks & Kind Regards, Gery

[PetyaMarkovaBogdanova]

Hi @boghyon, for additional clearification, can I, please, ask you to provide a list of devices you tested the focus on, and if there were external keyborad attached to some of it? That would be very helpful.

Thank you! Best regards, Petya Bogdanova (UI5 Dispatcher)

[boghyon]

Hi @PetyaMarkovaBogdanova,

The only physical device I tested with was XT1092 using Chrome Canary 78.0.3866.0, Android 7.1.2. No external keyboard attached. Other tests were done using Chrome's device mode in a standard Windows laptop, no touch-screen.

[stephania87]

Just to add https://openui5.hana.ondemand.com/#/topic/74b59efa0eef48988d3b716bd0ecc933.html

Tests with supported device (iPhone X), theme sap_fiori_3, and sap.m.RadioButton,sap.m.Button, sap.m.CheckBox, sap.m.Select, sap.m.ComboBox, sap.m.Panel, sap.m.StepInput,sap.tnt.NavigationList: https://jsbin.com/degaficeci/edit?html,output

Outline appears for inputs, and RadioButton and etc. I will forward this internally #1980390241

[boghyon]

About:

sap.m.Breadcrumbs shows browser's native outline [...].

This is no longer the case. But the current location text (value of currentLocationText prop) still does display an outline:

I'm not sure why that text even needs to be focusable at all even in desktop. It's just a plain text for display purpose only AFAIK. Does the text having focus have any a11y value?

[stephania87]

Happy New Year :)

The case is that the theme implementation has to be reviewed per control. There is a global item for the task (internal). If you want to report any control in particular, that bothers you now, please post separate inquiries.

[boghyon]

Thanks for the update and happy new year!

Currently, there is no specific control I want to be fixed. It's more the inconsistency that I'm complaining about which can be also seen as a documentation issue:

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?

I couldn't find any relevant guidelines in the doc. Or should keyboard-less devices avoid displaying focus ring altogether?

[flovogt]

This item will be covered in backlog item FIORITECHP1-17583.