feat(ui5-button): provide focus support for mobile

[didip1000]

Button elements can now receive focus when using keyboards on mobile devices. Focus outline is now displayed via CSS pseudo-classes and no longer relies on using the[focused] attribute.

The following components were updated:

• ui5-button
• ui5-toggle-button
• ui5-segmented-button
• ui5-split-button

Fixes: #8178
Related to: #8322

[unazko]

Works as expected and according to the task description.

[vladitasev]

Why hasn't the focused property been removed from Button.ts? Is it still used by the component/its descendents?

[didip1000]

Why hasn't the focused property been removed from Button.ts? Is it still used by the component/its descendents?

There was a misunderstanding between the team, we will remove it :)

[pskelin]

I was wondering why all the focus handlers in the split button are still necessary?
Did you check if you can use :focus-within on the split button to find out exactly if the focus is on an internal button?

Ideally, there should be no focus handlers on the split button hbs, but in case something is wrong with the focus, we are working on a framework change that will allow you to use delegatesFocus

delegatesFocus Optional
A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling. Its default value is false.

This will be a solution for #8437, so please check if it will improve the split button implementation.

You can set it manually in UI5Element.ts

this.attachShadow({ mode: "open", delegatesFocus: true });

[didip1000]

I was wondering why all the focus handlers in the split button are still necessary? Did you check if you can use :focus-within on the split button to find out exactly if the focus is on an internal button?

Ideally, there should be no focus handlers on the split button hbs, but in case something is wrong with the focus, we are working on a framework change that will allow you to use delegatesFocus

delegatesFocus Optional
A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling. Its default value is false.

This will be a solution for #8437, so please check if it will improve the split button implementation.

You can set it manually in UI5Element.ts

this.attachShadow({ mode: "open", delegatesFocus: true });

Hey Peter,

We are using the focus handlers to manage which element gets focus, depending on if we get focus through mouse or keyboard.

From what I understand, "delegatesFocus" will make it so that whenever the inner buttons are focused, the focus goes to the entire split button. However, we only want focus on the entire split button when navigating with a keyboard. Otherwise, the focus should remain on the inner buttons if they were focused by a mouse click.

If you have any ideas for how we could achieve this without focus handlers, I appreciate your feedback!

[pskelin]

My point is that it is very strange to attach a focus handler on an element and then call e.target.focus() - this is already the handler triggered by the focus action. It should be possible to find out if the focus is on an element or on a child by the :focus and :focus-within selectors.

I commented both .focus() calls in SplitButton.ts in _onInnerButtonFocusIn and _onFocusIn and everything seems to work like expected if I add delegatesFocus: true for the button (otherwise the text button slot click doesn't focus). Makes me wonder if the focushandlers are necessary at all - I expect the inner buttons will focus themselves.

Please check if this can be simplified, otherwise you can go ahead with the change if I don't understand all details why this is necessary.

[didip1000]

Hey @pskelin , you're right the focus() in the onFocusIn handler is unnecessary and I removed it. The focus in _onInnerButtonFocusIn is needed for the text button since focus doesn't show if the text itself is clicked.

As discussed seperately, the handlers will be removed at a later time.

[pskelin]

wdio.js file has Whitespace-only changes.
can you please remove it?

Also the tests will pass after a rebase from main.