Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[overlay] Problem with focus / aria-hidden with multiple modeless overlays #7721

Open
web-padawan opened this issue Aug 30, 2024 · 1 comment
Labels
a11y Accessibility issue vaadin-overlay

Comments

@web-padawan
Copy link
Member

Description

When there are multiple modeless dialog overlays open at the same time, the focusTrap enabled by the one that was opened later always steals focus, event if the other dialog is now the topmost after bringToFront() on its overlay.

Expected outcome

There are two possible options here:

  1. Update OverlayFocusMixin logic in the overlay to respect the overlay stack so that only topmost overlay traps focus (this would require changes to how FocusTrapController and AriaModalController are handled)
  2. Do not apply focusTrap at all when the modeless property is set (this could be limited to vaadin-dialog).

Minimal reproducible example

<vaadin-dialog modeless id="dialog1" draggable></vaadin-dialog>
<vaadin-dialog modeless id="dialog2" draggable></vaadin-dialog>

<vaadin-button id="button1">Open dialog 1</vaadin-button>
<vaadin-button id="button2">Open dialog 2</vaadin-button>

<script type="module">
  const dialog1 = document.querySelector('#dialog1');
  const dialog2 = document.querySelector('#dialog2');

  dialog1.renderer = (root) => {
    if (root.firstChild) {
      return;
    }

    root.innerHTML = `
      <input placeholder="Input 1" />
      <input placeholder="Input 2" />
    `;
  };

  dialog2.renderer = (root) => {
    if (root.firstChild) {
      return;
    }

    root.innerHTML = `
      <input placeholder="Input 3" />
      <input placeholder="Input 4" />
    `;
  };

  document.querySelector('#button1').addEventListener('click', () => {
    dialog1.opened = true;
  });

  document.querySelector('#button2').addEventListener('click', () => {
    dialog2.opened = true;
  });
</script>

Steps to reproduce

  1. Open first dialog
  2. Open second dialog
  3. Drag the second dialog to make the first dialog visible
  4. Focus the input in the first dialog overlay
  5. Press Tab

Environment

Vaadin version(s): 24.x and earlier

Browsers

Issue is not browser related

@web-padawan web-padawan added a11y Accessibility issue vaadin-overlay labels Aug 30, 2024
@yuriy-fix
Copy link
Contributor

yuriy-fix commented Sep 5, 2024

Notes from the discussion:

  • We shouldn't probably have focusTrap on the modeless dialog enabled by default
  • Focusing anything with mouse outside of the dialog shouldn't lead into focusTrap after pressing Tab even if focusTrap is enabled
  • Autofocus should still work even with focusTrap disabled

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility issue vaadin-overlay
Projects
None yet
Development

No branches or pull requests

2 participants