Ever need to trap the focus of the browser to a modal, a tour guide, or something else while trying to balance accessibility?
<span tabindex="0" aria-hidden="true" style="opacity: 0" onfocus="document.getElementById('element_id').focus()" ></span>
Add this to the end of the desired focused content.
It collects the next "tab" entry and loops back up to the first item in your desired focusable content via its id.
You could also go the Vue route with
I am not an accessibility expert, but this appears to be valid! Please let me know if I am missing something.
Thanks Shane! Saved me a ton of effort!