Interactive controls must not have focusable descendants.
Why it matters
Certain interactive controls such as
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.
role="button" has a link as part of the text. Screen readers will not read the link.
<a href=foo.bar>Learn more about your download</a>
About this rule
This rule passes if:
- There are no focusable elements nested in controls that don't allow interactive children