MenuToggle does not derive accessible name from visible text children

Abierto
#12,615 1 comentario 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Comienza por el componente MenuToggle e inspecciona cómo se calcula su nombre accesible cuando recibe elementos hijos de texto visibles sin un aria-label. Compara este comportamiento con un botón estándar y determina cómo deberían comportarse las etiquetas explícitas en los toggles que solo tienen iconos. Se considera terminado cuando los elementos hijos de texto proporcionan el nombre accesible de forma predeterminada, mientras que los valores explícitos de aria-label siguen estando disponibles para usarlos en toggles que solo tienen iconos.

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

Descripción

Description

When MenuToggle renders with visible text children (e.g., <MenuToggle>Actions</MenuToggle>), it does not automatically derive its accessible name from that text. Consumers must manually duplicate the text in an aria-label prop, which is error-prone and violates WCAG 2.5.3 (Label in Name).

WCAG Impact

  • 2.5.3 Label in Name — For UI components with visible text labels, the accessible name must contain the visible text. If MenuToggle doesn't derive its accessible name from its children, speech-input users who say "click Actions" may not activate the correct control.

Steps to Reproduce

  1. Render <MenuToggle>Actions</MenuToggle> without an aria-label
  2. Inspect the element's computed accessible name in browser DevTools or a screen reader
  3. The accessible name may not match the visible "Actions" text

Expected Behavior

MenuToggle should derive its accessible name from its text children by default, similar to how a standard <button>Actions</button> does. An explicit aria-label should only be needed for icon-only toggles (kebab menus).

Current Behavior

Consumers must manually provide aria-label="Actions" even when the text "Actions" is already visible in the toggle. Our codebase (ansible/ansible-ui) has hardcoded fallback aria-label values like 'kebab dropdown toggle' and 'dropdown toggle' that don't match the visible text, precisely because the component doesn't handle this automatically.

Jira Issue: PF-4545

Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Guía de contribución

Abrir la guía de contribución

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 patternfly/patternfly-react

Todos los issues de patternfly/patternfly-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.