[dialog] Header and footer are accessible to mouse interactions when another modal overlay is open

[vursen]

Description

When a modal overlay component, such as a combo-box, is opened in a dialog, the dialog's header and footer content remains accessible to mouse interactions, while the dialog's content does not.

Screen.Recording.2024-09-24.at.10.34.44.mov

Expected outcome

Modal overlay components, when opened, should prevent interaction with any content under their backdrop.

Minimal reproducible example

<vaadin-dialog></vaadin-dialog>

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

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

  const dialog = document.querySelector('vaadin-dialog');
  dialog.headerTitle = 'Title';
  dialog.renderer = (root) => {
    if (root.firstChild) {
      return;
    }

    const container = document.createElement('div');
    container.style.width = '400px';

    const comboBox = document.createElement('vaadin-combo-box');
    comboBox.label = 'Country';
    comboBox.items = ['Finland', 'France', 'Germany', 'Italy', 'Spain', 'United Kingdom', 'United States'];
    container.appendChild(comboBox);

    const closeButton = document.createElement('vaadin-button');
    closeButton.textContent = 'Close from content';
    closeButton.addEventListener('click', () => {
      dialog.opened = false;
    });
    container.appendChild(closeButton);

    root.appendChild(container);
  };

  dialog.headerRenderer = (root) => {
    if (root.firstChild) {
      return;
    }
    const closeButton = document.createElement('vaadin-button');
    closeButton.textContent = 'Close from header';
    closeButton.addEventListener('click', () => {
      dialog.opened = false;
    });
    root.append(closeButton);
  };

  dialog.footerRenderer = (root) => {
    if (root.firstChild) {
      return;
    }
    const closeButton = document.createElement('vaadin-button');
    closeButton.textContent = 'Close from footer';
    closeButton.addEventListener('click', () => {
      dialog.opened = false;
    });
    root.append(closeButton);
  };

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

Steps to reproduce

1. Click "Open Dialog"
2. Click on the combo-box to open it
3. Observe that "Close from header" and "Close from footer" buttons respond to hover and clicks while "Close from content" does not.

Environment

Vaadin version(s): 24.4 and possibly earlier
OS: Mac OS

Browsers

No response

[lakshyeahh]

im interested please assign me, ill share my proposed solution as soon as u ping me