patternfly / patternfly/patternfly-react
MenuToggle does not derive accessible name from visible text children
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 862
- Fork
- 392
- Merge medio
- 4g 8h
- PR unite (30g)
- 9
Descrizione
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
MenuToggledoesn't derive its accessible name from its children, speech-input users who say "click Actions" may not activate the correct control.
Steps to Reproduce
- Render
<MenuToggle>Actions</MenuToggle>without anaria-label - Inspect the element's computed accessible name in browser DevTools or a screen reader
- 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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia dal componente MenuToggle e verifica come viene calcolato il suo nome accessibile quando riceve elementi figli di testo visibili senza un aria-label. Confronta questo comportamento con quello di un pulsante standard e determina come devono comportarsi le etichette esplicite per i toggle composti solo da icone. Il lavoro è completato quando gli elementi figli di testo forniscono il nome accessibile per impostazione predefinita, mentre i valori espliciti di aria-label restano disponibili per l’uso con i toggle composti solo da icone.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- accessibility, frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 55/100