Focus trap focuses the wrong radio button if native radio button group is the first element in modal

[krryan]

If the first focus-able element in a modal is a group of (native element, not Material) radio buttons, and one tabs off the end of the modal (triggering the focus trap and returning the focus to the top of the modal), the first radio button is always focused, even if the selected radio button is one of the later ones.

The expected behavior—found when tabbing to a group of radio buttons in other cases—is for focus to go to the selected radio button.

For now, our workaround is just to ensure there is always some other focus-able element at the top of the modal. A close button works well for this.

I could not find any issues relating to this.

[crisbeto]

The problem is that focus trap tries to find the first interactive element by going through the elements as they appear in the DOM. Since the first radio button technically is tabbable, it gets picked up. I'll keep the issue open, but I don't think that there's a good way we can resolve this without making a lot of assumptions.

You should be able to resolve it on your end by telling the focus trap to jump to the selected radio button using the cdkFocusInitial attribute.