[Bug]: Embedded number/range inputs contribute their `value` attribute, not their current value, to accessible names

Abierto
  • ¿Algo no está bien?
#43,984 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@lazerg ya está trabajando en esto.

Desde el 7/11/2026.

  • #43985 de @lazerg — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
playwright, typescript
Área
accessibility, testing

Línea de trabajo

Start in packages/injected/src/roleUtils.ts at the progressbar/scrollbar/slider/spinbutton/meter branch of getTextAlternativeInternal; compare its value handling with the textbox branch above. Reproduce with the supplied test and check existing accessible-name tests for the right place to add coverage. Done means embedded number and range inputs contribute their current values to the containing checkbox names; an open linked pull request (#43985) is already addressing this issue.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Version

1.65.0 (also 1.66.0-alpha-1793916328000)

Steps to reproduce
  1. Clone https://github.com/trackoor/playwright-accname-range-number-repro
  2. npm install && npx playwright install chromium
  3. npm test

The test:

import { test, expect } from '@playwright/test';

test('embedded number/range inputs use their current value in accessible names', async ({ page }) => {
  await page.setContent(`
    <input type="checkbox" id="cb"><label for="cb">Remind me <input type="number" value="3" aria-label="count"> times</label>
    <input type="checkbox" id="v"><label for="v">Volume <input type="range" aria-label="vol"> percent</label>
    <input type="checkbox" id="w"><label for="w">Level <input type="range" max="10" value="70" aria-label="lvl"> of 10</label>
  `);
  await page.getByLabel('count').fill('5');

  const boxes = page.getByRole('checkbox');
  await expect(boxes.nth(0)).toHaveAccessibleName('Remind me 5 times');
  await expect(boxes.nth(1)).toHaveAccessibleName('Volume 50 percent');
  await expect(boxes.nth(2)).toHaveAccessibleName('Level 10 of 10');
});
Expected behavior

The checkbox names are Remind me 5 times, Volume 50 percent and Level 10 of 10. That is what Chromium itself computes (Accessibility.getFullAXTree over CDP), and the embedded spinbutton/slider in ariaSnapshot() already shows "5", "50" and "10".

Actual behavior
Expected: "Remind me 5 times"
Received: "Remind me 3 times"

page.locator('body').ariaSnapshot() shows all three:

- checkbox "Remind me 3 times"
- text: Remind me
- spinbutton "count": "5"
- text: times
- checkbox "Volume percent"
- text: Volume
- slider "vol": "50"
- text: percent
- checkbox "Level 70 of 10"
- text: Level
- slider "lvl": "10"
- text: of 10
Additional context

In packages/injected/src/roleUtils.ts, the progressbar/scrollbar/slider/spinbutton/meter branch of getTextAlternativeInternal falls back to element.getAttribute('value'). For <input> it should use the .value property, like the textbox branch just above it does. Same line on main at 07c7069.

Environment
System:
  OS: Linux (x64)
Binaries:
  Node: 26.13.0
npmPackages:
  @playwright/test: 1.65.0

Credit: https://ucsbplse.github.io/

Lenguaje dominante
TypeScript
Estrellas
99.1k
Forks
6.8k
Merge medio
17 h 6 min
PR fusionados (30 d)
306

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/playwright

Todos los issues de microsoft/playwright

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.