Dialog clips the focus ring of first and last focusable content children in base styles and Aura #12880

Description

The dialog's content area clips the focus ring of its first and last focusable children, in base styles and Aura. Lumo is unaffected.

[part='content'] is a clipping box whose block padding is removed as soon as the dialog has a header or footer, so the first and last child sit flush against the clip edge — and any part of the focus ring painted outside the element's border box is cut off (vaadin-dialog-overlay-base-styles.js):

[part='content'] {
  overflow: auto;
  clip-path: border-box;
}
:host(:is([has-header], [has-title])) [part='content'] { padding-top: 0; }
:host([has-footer]) [part='content'] { padding-bottom: 0; }

Measured with a 1px vertical pixel scan through the focused button, Chrome 141 / macOS:

Notes:

• Lumo escapes only because dialog-overlay.css re-declares padding: var(--lumo-space-l), keeping 24px at the bottom despite the footer.
• The content does not need to scroll — overflow and clip-path clip either way. scrollHeight === clientHeight throughout these measurements.
• The top edge clips the same way: as the first child with a header present, the button's top ring drops to 1px in Aura.

Expected outcome

The focus ring is fully visible on all edges, in all themes. Clipping it is an accessibility problem (WCAG 2.2 SC 2.4.11 Focus Not Obscured), and it hits the common case of a button or field as the last element of a dialog that has a footer.

Minimal reproducible example

<vaadin-dialog></vaadin-dialog>

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

  const dialog = document.querySelector('vaadin-dialog');
  dialog.headerTitle = 'Title';
  dialog.renderer = (root) => {
    if (!root.firstChild) root.innerHTML = '<vaadin-button>Open dialog 2</vaadin-button>';
  };
  dialog.footerRenderer = (root) => {
    if (!root.firstChild) root.innerHTML = '<vaadin-button>Action</vaadin-button>';
  };
  dialog.opened = true;
</script>

Here the button is the only child of the content area, so it is flush at both edges and loses the top and bottom of its ring — only the left and right arcs survive. The existing dev/dialog.html page also reproduces it as-is.

Steps to reproduce

1. Open dev/dialog.html?theme=aura:light and click Open dialog 1
2. Press Tab twice to focus the Open dialog 2 button
3. Notice the focus ring is cut off along the bottom edge
4. Repeat with no theme parameter (base — bottom edge missing entirely) and with ?theme=lumo:light (all four edges drawn)

Possible fixes

• Keep a few pixels of padding-block on [part='content'] instead of collapsing it to 0.
• Give base styles a non-positive outline-offset on buttons, as Aura has. This reduces but does not remove the clipping — a 2px outline at -1px still paints 1px outside the border box.
• Drop clip-path: border-box and rely on overflow alone, if the clip-path is only there for the corner radius.

Environment

Vaadin version(s): main (25.4.0-alpha1)
OS: macOS 15 (Darwin 25.6.0)

Browsers

Chrome