Focusing with Tab iterates each radio button when in modal dialog

[web-padawan]

Description

When vaadin-radio-group is placed inside vaadin-dialog, the focus trap logic iterates over all vaadin-radio-button elements on Tab instead of leaving the group as expected (arrow keys are supposed to be used).

Expected outcome

Expected the focus to leave the group on first Tab similarly to how it's used outside the dialog.

Minimal reproducible example

<vaadin-dialog></vaadin-dialog>

<vaadin-button>Open dialog</vaadin-button>

<script type="module">
  import '@vaadin/dialog';
  import '@vaadin/button';
  import '@vaadin/radio-group';

  const dialog = document.querySelector('vaadin-dialog');

  dialog.renderer = (root) => {
    if (root.firstChild) {
      return;
    }
    root.innerHTML = `
      <vaadin-radio-group label="Travel class">
        <vaadin-radio-button value="economy" label="Economy"></vaadin-radio-button>
        <vaadin-radio-button value="business" label="Business"></vaadin-radio-button>
        <vaadin-radio-button value="firstClass" label="First Class"></vaadin-radio-button>
      </vaadin-radio-group>
    `
  };

  // Open first dialog
  const btn = document.querySelector('vaadin-button');
  btn.addEventListener('click', () => {
    dialog.opened = true;
  });
</script>

Steps to reproduce

1. Open the dialog
2. Press Tab multiple times

Environment

Vaadin version(s): v24

Browsers

Issue is not browser related