The Easiest Way to Trap Focus

Search for a command to run...

No comments yet. Be the first to comment.
In this series, expect some detailed blogs on useful snippets or coding procedures that I find useful for my day-to-day life as a web developer!
The Intro We had a dilemma today of an issue found in our code that needed to be fixed. After some time hunting I was able to find a distinct "this is good" reference in time and a distinct "this is not good" reference - but had no idea which commit ...
In the world of web development using C#, the Response.Redirect method is a common way to guide users to different pages within a web application. However, there's a glaring issue that we need to address: the second parameter, which introduces unnece...

The Intro We had a dilemma today of an issue found in our code that needed to be fixed. After some time hunting I was able to find a distinct "this is good" reference in time and a distinct "this is not good" reference - but had no idea which commit ...

Introduction Ideally - we want our components to be kinda "dumb". Mostly just displaying data or gathering input from the user - the front end components shouldn't be smart enough to know what to do with said info once they have it. Usually this mea...

Before I Start You can find the podcast episode around this topic below! Introduction I shall begin with a quick story of something I went through this past week. I had a task to create analytics events for a few new key features that we wanted to ...

Ever need to trap the focus of the browser to a modal, a tour guide, or something else while trying to balance accessibility?
I am far from an expert, but one thing I found on StackOverflow that helped me was this snippet from Shane McCurdy from this StackOverflow discussion:
<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
refsand events!
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!