You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
MenuToggle does not derive accessible name from visible text children #12615
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
Render <MenuToggle>Actions</MenuToggle> without an aria-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.
Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.
Create Plan
🧪 Issue enrichment is currently in open beta.
You can configure auto-planning by selecting labels in the issue_enrichment configuration.
To disable automatic issue enrichment, add the following to your .coderabbit.yaml:
issue_enrichment:
auto_enrich:
enabled: false
💬 Have feedback or questions? Drop into our discord!
Activity
coderabbitai commentedon Aug 6, 2026
🔗 Related PRs
#12549 - feat(MenuToggle): add aria-haspopup prop [merged]
📝 Issue Planner
Check the box below or use the
@coderabbitai plancommand to generate an implementation plan and prompts that you can use with your favorite coding assistant.🧪 Issue enrichment is currently in open beta.
You can configure auto-planning by selecting labels in the issue_enrichment configuration.
To disable automatic issue enrichment, add the following to your
.coderabbit.yaml:💬 Have feedback or questions? Drop into our discord!
github-actions commentedon Oct 9, 2026
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.