Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Regression]: AI aria snapshot drops a button's name when its icon wrapper has whitespace or a CSS-sized SVG

Closed
  • Is something wrong?
#43,315 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #43317 by @pavelfeldman — merged

Assessment

Difficulty
4/5
Estimated time
1-2 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
playwright, typescript
Domain
accessibility, testing-qa

Research direction

Start with the supplied TypeScript reproduction in tests/repro.spec.ts and compare AI aria snapshots for the whitespace and CSS-sized SVG cases against the control. The report identifies ariaSnapshotDistiller and removeRedundantNames as possible investigation points. Done means both failing cases retain button "New survey" in the AI snapshot; an open linked pull request is already addressing the issue.

Written by the indexing model from the issue text.

Description

Last Good Version

1.61.0

First Bad Version

1.62.0

Steps to reproduce

Single spec, no app or dependencies beyond @playwright/test:

  1. npm init playwright@latest repro (or any project with @playwright/test 1.62.0 or later)
  2. Save this as tests/repro.spec.ts:
import { test, expect } from '@playwright/test';

const icon = '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"></path></svg>';

const cases = {
  'icon span with whitespace': `<button><span>\n  ${icon}</span>New survey</button>`,
  'icon styled like MUI SvgIcon': `<button><span><svg aria-hidden="true" viewBox="0 0 24 24" style="width:1em;height:1em;display:inline-block;font-size:1.5rem"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"></path></svg></span>New survey</button>`,
  'control: no whitespace, unstyled icon': `<button><span>${icon}</span>New survey</button>`,
};

for (const [name, html] of Object.entries(cases)) {
  test(name, async ({ page }) => {
    await page.setContent(`<main>${html}</main>`);
    await expect(page.getByRole('button', { name: 'New survey' })).toHaveCount(1);
    const snapshot = await page.locator('main').ariaSnapshot({ mode: 'ai' });
    console.log(`${name}:\n${snapshot}`);
    expect(snapshot).toContain('button "New survey"');
  });
}
  1. npx playwright test tests/repro.spec.ts --reporter=list
Version whitespace MUI-styled icon control
1.60.0 pass pass pass
1.61.0 pass pass pass
1.62.0 fail fail pass
1.63.0 fail fail pass
1.64.0 fail fail pass
1.65.0-alpha-2026-10-12 fail fail pass
Expected behavior

The button keeps its accessible name in the ai snapshot, as it does in 1.61.0 and as getByRole('button', { name: 'New survey' }) resolves it in every version:

- main [ref=e1]:
  - button "New survey" [ref=e2]
Actual behavior

Both the name and the text are gone, leaving a bare button:

- main [ref=e1]:
  - button [ref=e2]

The same happens in Playwright MCP's browser_snapshot, so an agent sees an unlabeled button [ref=…] and can't find it by its label. The code MCP generates for a click on that ref is still correct (getByRole('button', { name: 'New survey' })), so only the snapshot loses the name.

Additional context

Related to #41985, which reports the same symptom for text nested in spans beside an aria-hidden SVG, but its fix (#41988) doesn't cover these cases: they still fail on 1.64.0 and on today's 1.65 alpha, which include that fix.

Two triggers, found by reducing a real page (an MUI <Button startIcon={<AddIcon />}>):

  • A whitespace-only text node inside the icon's wrapper span.
  • The icon being sized by CSS, as MUI's SvgIcon is (width: 1em; height: 1em; display: inline-block; font-size: 1.5rem). This is the trigger on the real page: removing the SVG's class restores the name.

From reading the bundled ariaSnapshotDistiller, it looks like removeRedundantNames clears the button's name because its text is a name-from-content contributor that will be rendered, and a later pass then collapses that contributor away, so neither survives. That's a guess at the cause; the repro above is the evidence.

Environment
System:
  OS: macOS 26.5.1
  CPU: (18) arm64 Apple M5 Pro
Binaries:
  Node: 24.14.1
  npm: 11.11.0
npmPackages:
  @playwright/test: 1.64.0
Dominant language
TypeScript
Stars
97.4k
Forks
6.6k
Avg merge
22h 17m
Merged PRs (30d)
278

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/playwright

All issues in microsoft/playwright

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.