Button: Cannot set focus method in Firefox

[E-landstrom]

gds-button: cannot set focus on gds-button using HTMLElement focus method in Firefox

Bug already reported?

• I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

Angular

Component name

gds-button

Description

It does not work to set focus on a gds-button in Firefox using the HTMLElement focus method. It works in Chrome, Edge and Safari. One use case is to set focus on a modal close button for an example upon entering a modal. Also when using the Angular CDK Trap Focus Directive it is not recognized as the first focusable element.

Steps To Reproduce

1. Open storybook button page in Firefox
2. Open dev console and execute setTimeout(() => {document.querySelector('gds-button').focus()}, 3000); (remember to click in the story book page after setting the timeout).

Current Behaviour

The button is not focused / recognized as a focusable element.

Expected Behaviour

The button should receive focus and be recognized as a focusable element.

[splashdust]

Does it work if you set tabindex="0" on the <gds-button>?

It seems like Firefox will not honor the delegatesFocus setting of the shadow root unless the host is explicitly set as focusable.

[E-landstrom]

@splashdust Thx for looking into this. I will try with tabindex="0" tomorrow and get back to you.

[E-landstrom]

@splashdust tried setting attribute tabindex="0" on gds-button but it did not help. I could still not get focus.

[EldRoos]

We also noticed some tab order helper tools ignore button focus - like Silktide. But it helps setting tabindex="0".

[splashdust]

tabindex="0" does make focus() work in Firefox as well, so at least that would be a solution for this issue statement. Just need to make sure that there are no other downsides of adding that automatically to components.

I don't know why it wouldn't work with the CDK Trap Focus Directive though. I checked the source code in their repo, and it does seem like it's looking for tabindex="0", among other things. But there's a lot going on there, so it could simply be that the directive can't handle custom elements, in which case there's not much we can do on our end. I guess events could be a culprit too. I will try to set upp a test app with CDK and see if I can figure it out.