patternfly / patternfly/patternfly-react

MenuToggle does not derive accessible name from visible text children

Offen
#12,615 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
TypeScript
Sterne
862
Forks
392
Ø Merge
4 T. 8 Std.
Gemergte PRs (30 T.)
9

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der MenuToggle-Komponente und untersuche, wie ihr zugänglicher Name berechnet wird, wenn sie sichtbare Text-Children ohne ein aria-label erhält. Vergleiche dieses Verhalten mit einem standardmäßigen Button und bestimme, wie explizite Labels für Nur-Icon-Toggles funktionieren sollten. Als abgeschlossen gilt dies, wenn Text-Children standardmäßig den zugänglichen Namen bereitstellen, während explizite aria-label-Werte weiterhin für die Verwendung mit Nur-Icon-Toggles verfügbar bleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.