We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how to solve this would be greatly appreciated.
<div class="container">
<div class="accordionContent">
<div class="accordionItem">
<button class="itemHeader itemQuestion">
Text
<span class="itemIcon">
<i class="bx bx-chevron-down"></i>
</span>
</button>
<div class="itemContent">
<p class="itemAnswer">
<button>Example</button>
</p>
</div>
</div>
</div>
</div>