axe-core no-focusable-content error: disclosure widget has no focusable content

axe-core no-focusable-content error: disclosure widget has no focusable content - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A disclosure widget (button controlling show/hide) points at content with nothing focusable inside, breaking the expected pattern. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core no-focusable-content error: disclosure widget has no focusable content

Fix it step by step

Step 1

Check what the disclosure button controls; its target should contain focusable content or be plain text.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

If the target is plain text, keep the button but make sure the expanded state is announced via aria-expanded.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

If the target should hold links or form fields, add the missing focusable content.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Re-run axe.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• A details/summary native element sidesteps this rule entirely and is often the simpler fix.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

axe-core 4.8+ (rule no-focusable-content).

Variant phrasings

axe no-focusable-content: disclosure widget has no focusable content

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

A disclosure widget (button controlling show/hide) points at content with nothing focusable inside, breaking the expected pattern. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_-iH0X9bquMMsPwRwrHytLQ