Accessibility · Senior · Question 8 of 75
Why might an extra wrapper break this widget?
<div role="tablist">
<div class="scroller">
<button role="tab">One</button>
</div>
</div>- 1
tabmust be owned bytablist, and a generic in between can break it - 2A
divisn't allowed inside any element that has an ARIA role at all - 3React removes
roleattributes from nested elements during hydration
Show the answer
Correct answer: tab must be owned by tablist, and a generic in between can break it
Explanation
Roles have required context. Assistive tech may not see the tabs correctly. Fix the DOM, or as a last resort use aria-owns.