UI5Element: set focus on keyboard handling only

[ilhan007]

Feature Request Description

We would like to set focus over the focusable web components only on pressing keyboard keys. Currently we apply focus upon mouse interaction (click) as well. So, we would have to distinguish between these two cases and apply focus outline only in the first case.

Proposed Solution

Handle this on UI5Element level so all the components can benefit right away.

Priority

• Low
• Medium
• High
• Very High

[boghyon]

Is there a consideration to make use of the :focus-visible pseudo class for this? The :focus-visible would help improving the consistency of the indicator visibility across the web platform, since the UA decides when to show the focus indicator. I requested it originally at SAP/openui5#1289 (comment).

Browser support :focus-visible

• Firefox: ✔
• Chromium: ✔
• Safari: implemented but yet to be enabled by default (currently behind a flag) according to Igalia in May 2021. → Enabled by default since WebKit commit 286783 (2021-12-09) which was released with Safari 15.4 ✔
  See also the related blog post: The Focus-Indicated Pseudo-class :focus-visible.

Sample

1. Open https://jsbin.com/roputeb/edit?html,css,output on Windows or Android using a Chromium-based browser or Firefox.
2. We can see that elements styled with :focus-visible display the focus ring according to UA's heuristics which is basically:
   • Display the focus ring always if keyboard.
   • Otherwise, no focus indicator on click - unless the clicked element is <input> or <select>.

Any thoughts?

[ilhan007]

Hello @boghyon actually we will use :focus-visible pseudo class as suggested by you. Thanks for the interest. Finally, we are about to put this in progress.

[ilhan007]

After the initial research and the followed discussions , we decided to make use of the CSS :focus-visible solution and not implementing framework level solution, but implement the requirement in the components as much as possible.

The progress of the topic can be tracked in the following issues distributed by area of component ownership:
#5745
#5748
#5749
#5752

[boghyon]

@ilhan007 I enhanced the above JSBin sample (https://jsbin.com/roputeb/edit?html,css,output) with the case where users can move the focus programmatically but forcing the focus-visible style to apply (e.g. to immediately indicate the moved focus). This use case was first proposed in whatwg/html#7830 which landed on the HTML spec focus option focusVisible – HTML Standard (whatwg.org):

If the value of the focusVisible dictionary member of options is true, or is not present but in an implementation-defined way the user agent determines it would be best to do so, then indicate focus.

Browser Support myElement.focus({ focusVisible: true })

• Firefox: ✔
• Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1317039
• Safari: https://bugs.webkit.org/show_bug.cgi?id=242456