Skip to content

[Bug]: Regression ARIA snapshot controls/selection appear behind Angular Material Dialog (cannot see what is snapshotted) #39095

@terradek

Description

@terradek

Version

1.58.1

Steps to reproduce

When using the Playwright VS Code extension to capture an ARIA snapshot on a page with an Angular Material MatDialog open, the extension’s ARIA snapshot UI (buttons, selection overlay/feedback) appears behind the modal. As a result, it’s not possible to see which element/region is being snapshotted while the dialog is visible.
This is reproducible on Angular Material’s official dialog examples page.
Navigate to Angular Material dialog examples: https://material.angular.dev/components/dialog/examples.
Click “Open dialog without animation” (or any “Open dialog”) to show a modal dialog.
In the Playwright extension’s Locators/ARIA panel, attempt to pick or preview an ARIA snapshot for the dialog content (or for body).
Actual: the ARIA snapshot UI (buttons/selection highlighting) appears behind the modal dialog, making it unclear what aria tree is being captured, and preventing practical use.

chrome_GoGRVRy3yt.mp4

Expected behavior

The Playwright VS Code extension’s ARIA snapshot UI and selection/highlight overlays should remain visible and on top of application UI (including modals), so users can see which node/region is being snapshotted and operate the controls.

Actual behavior

With MatDialog open, the extension’s ARIA snapshot UI/overlay appears behind the dialog. The snapshot may still be captured, but users cannot see what is selected or interact reliably with the UI.

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 14.79 GB / 31.73 GB
  Binaries:
    Node: 24.10.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.7.0 - C:\nvm4w\nodejs\npm.CMD
  IDEs:
    VSCode: 1.108.2 - C:\Progs\Microsoft VS Code\bin\code.CMD
    Claude Code: 2.1.17 - C:\nvm4w\nodejs\claude.CMD

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions