MenuToggle does not derive accessible name from visible text children
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 55/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Tranquilla
- Stack tecnologico
- react, typescript
- Ambito
- accessibility, frontend
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.
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
- Lingua principale
- TypeScript
- Stelle
- 862
- Fork
- 392
- Merge medio
- 4g 8h
- PR unite (30g)
- 9
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.
Altre issue di patternfly/patternfly-react
-
PF Team
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
patternfly/patternfly-react#12651 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
patternfly/patternfly-react#12637 ·
-
PF Team
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
patternfly/patternfly-react#12617 · 1 commento ·
-
PF Team
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
patternfly/patternfly-react#12610 · 1 commento · 1 reazione ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
patternfly/patternfly-react#12600 ·
Tutte le issue di patternfly/patternfly-react
Issue simili
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100
-
Mend: dependency security vulnerability untriaged
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100