
Interactive controls must not have focusable descendants.

## Why it matters

Certain interactive controls such as `button`, `checkbox`, `img`, `scrollbar`or `slider` can't have interactive children.
Assistive technologies, such as screen readers, might ignore or respond unexpectedly to such nested controls.

## How to fix

Ensure interactive controls don't have focusable descendants by separating nested interactive components or styling a single element.

## Example

<PassFailGrid>
<FailSection>

An element with `role="button"` has a link as part of the text. Screen readers will not read the link.

</FailSection>
<FailExample example={`<div role ="button"> <a href=foo.bar>Download or click here to learn more</a></div>
`} />
<PassSection>

The link is now outside the button. All users can interact with the button and the link.

</PassSection>
<PassExample example={`<div role ="button">Download</div>
 <a href=foo.bar>Learn more about your download</a>`} />
</PassFailGrid>

## About this rule

This rule passes if:

-   There are no focusable elements nested in controls that don't allow interactive children

## More examples

<Links>
    <HyperLink href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html">
        Understanding Success Criterion 4.1.2: Name, Role, Value
    </HyperLink>
</Links>


nested-interactive

Why it matters

How to fix

Example

Fail

Pass

About this rule

More examples