Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

クローズ
  • 何か問題がありますか？
#43,315 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

関連するプルリクエストがすでにマージされています。

  • #43317 @pavelfeldman による — マージ済み

評価

難易度
4/5
見積もり時間
1〜2日
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
playwright, typescript
領域
accessibility, testing-qa

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
TypeScript
スター
97.4k
フォーク
6.6k
平均マージ
18時間 15分
マージ済み PR（30日）
318

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

microsoft/playwright のほかの issue

microsoft/playwright の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。