A11Y-014
Interactive elements nested inside each other
MediumDefault severity · Accessibility · Accessibility (WCAG 2.2 AA)
Last reviewed
What it checks
Buttons, links and form controls placed inside a link or a button.
Why it matters
Nested controls are announced unpredictably and the inner one is often unreachable by keyboard; browsers may also split the markup apart (WCAG 4.1.2).
Recommended fix
Use one control, or place the two side by side.
How to verify
Run axe and confirm no nested-interactive issues; tab through the component and confirm each action is reachable.
Example fix prompt
Generic prompt (your report adds the evidence)
Please fix this production issue in my app.
Issue A11Y-014: Interactive elements nested inside each other
Site: https://your-app.example
First confirm the issue in the code or live config. If it is not present, say so and change nothing.
Task: Un-nest the controls in the evidence: a link must not contain a button or another link, and a button must not contain a link or input. Keep one clickable element, or put them next to each other.
Constraints: make the smallest change that fixes this, keep the current design and behaviour, never paste secret values into code or chat, and tell me which files you changed.
Done when: Run axe and confirm no nested-interactive issues; tab through the component and confirm each action is reachable.