Control contains another focusable control

Why does it matter?

WCAG 4.1.2 asks that every control exposes its own name and role; this kind of control flattens everything inside it into one name, so the focusable item inside has no role screen readers can announce.

Who it affects: Screen reader and keyboard users, who depend on ARIA and focus order being correct to understand and operate the page.

What does Lumtera flag?

A link, field or other focusable item inside a button, checkbox, tab or similar control.

Check ID nested-interactive — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Move the inner link or control out, so the two sit side by side. For a split button, use two separate buttons. If the inner element is only visual, add tabindex="-1" and role="none", or disable it.

Example

<button>Save <a href="/help">Help</a></button>

<button>Save</button> <a href="/help">Help</a>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Press Tab from the top of the page. Focus should move in reading order and never land on something invisible or silent.