patternfly / patternfly/patternfly-react
MenuToggle does not derive accessible name from visible text children
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 862
- Forks
- 392
- Merge moyen
- 4 j 8 h
- PR mergées (30 j)
- 9
Description
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
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par le composant MenuToggle et examinez comment son nom accessible est calculé lorsqu’il reçoit des enfants de texte visibles sans aria-label. Comparez ce comportement à celui d’un bouton standard et déterminez comment les libellés explicites doivent se comporter pour les toggles composés uniquement d’une icône. C’est terminé lorsque les enfants de texte fournissent par défaut le nom accessible, tandis que les valeurs explicites de aria-label restent disponibles pour les toggles composés uniquement d’une icône.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- accessibility, frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 55/100