fundamental-styles bug(styles): focus outline

Describe the bug

Here is two big issues about the focus outline.

Focus outline cannot be rounded in Safari. It doesn't work like that.

In Fiori, Fiori HC, Horizon HC (7 of 9 themes in total) we should have rectangular focus outline. In Chromium-based & Firefox focus outline inherits border-radius from the element. Only in Horizon Evening & Morning focus should be rounded.

Fiori

Horizon

Horizon HC

Possible approach

Use pseudo elements (before/after) to create focus outlines that won't be relying on elements' border-radius and, also, these outlines may be rounded in Safari.

Pros:

Focus outline 100% per specs.
Safari issue solved.

Cons:

Somewhere both of the pseudo elements already in use.
A lot of work to do (incl. specific spacings).

Jun 06 '22 15:06 platon-rov

Can we list all the components which are affected? and which cannot rely on the pseudo-elements?

Jun 06 '22 18:06 droshev

See updated list below https://github.com/SAP/fundamental-styles/issues/3541#issuecomment-1153874478

Not per specs (rounded outline but should be rectangular in fiori, horizon hc):

Button

Calendar

Product Switch

Token

Per specs but broken in safari (outline cannot be rounded in Horizon):

Checkbox

Input Group

Input

Radio

Textarea

Select

Slider

Step Input

Not sure (no outline design specs found):

Avatar?

Avatar Group?

Busy indicator?

Carousel?

Rating Indicator?

Menu? First & Last

Micro Process Flow?

Object Marker?

User Menu?

Tree?

List?

Icon Tab Bar?

Tabs?

Status Indicator?

Side Navigation?

Vertical Navigation?

Horizontal Navigation?

Dynamic Page?

Under the "Not sure" section listed all the components for which outline specs not fully clear in Horizon, for example Avatar - its outline should be rectangular in Fiori & Horizon HC but should it be rectangular/rounded/circle in Horizon? Here is what said in the wiki:

In Horizon, unlike in the previous themes, focus visualisation varies between controls - in color and in placement. Please check individual controls for focus specifications.