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.

[E-landstrom]

@splashdust I got back to this now since it was time to add a button in my UI again :-) I verified that it works in Firefox now (running 132.0.2 on Windows) with focus() and CDK Trap Focus as well 🎉But as written above it requires consumers of gds-button to set tabindex="0". I have no clue why it did not work when I tested it last time. Anyway, have you decided if you were going to add tabindex="0" to all components on your side?

[splashdust]

@E-landstrom Good to know! No decision yet, need to investigate a bit more to make sure there are no other unintended side-effects. I'll leave this issue open in the meantime.

[E-landstrom]

@splashdust ok! From my perspective it has only been an issue when I need to programmatically set focus on buttons (or using the CDK trap focus) when going into / leaving a modal. But it is really a gotcha :-)