![]() This returns focus to the original trigger where the user can continue to Tab-navigate through the document. focus() on this reference before unsetting it. Then, when the user closes the modal window, I'm simply calling. consider this a request to close the modal (a common interaction model).Īs you can see, I have a global variable - previousElement - that stores the document.activeElement value at the time the modal window is opened. If the user is clicking directly on the backdrop of the modal, let's I handle top-level clicks on the modal. that the trigger so the user can pick-up where they left off.Ĭoup( "Restoring focus to previously-active element" ) If we have a reference to the original trigger, let's restore focus to I close the modal window and return focus to the previous element. PreviousElement = ( document.activeElement || document.body ) Ĭoup( "Taking focus away from trigger" ) so that we can restore focus to that element when the modal is closed. But, before we do that, we want to track which element triggered the modal We're about to open the modal window and draw focus into the modal panel. It is a permanent highlighter that retails for 17.00 and contains 0.21 oz. I open the modal window and draw focus into the modal container. MAC Soft Focus is a yellow with a cream finish. ![]() I keep track of element that triggered the modal window. focus the panel after we open the modal window. We're applying tabindex to the modal panel so that we can programmatically Restoring ActiveElement Focus After A User-Interaction In JavaScript This demo is intended to isolate the use of the. NOTE: For the sake of simplicity, I am not including the focus-trapping technique from yesterday's post. And, when the user closes the modal window, I'm going to restore focus to the original button reference. To see this in action, I've created a JavaScript demo with a bunch of button elements that all trigger a single modal window. This will make Tab-based navigation around the DOM much more fluid and accessible. focus() on our recorded value to restore focus the previously-active element. And then, when the user subsequently closes the modal window, we can call. In a modal window scenario, where we are drawing focus away from the "trigger" element and into the modal window context, we can use the document.activeElement property to record which element triggered the modal. focus() on another element within the DOM, we will implicitly cause said element to be assigned to the document.activeElement property. We cannot assign a value to this property however, if we call. The document.activeElement is a read-only property that contains the DOM (Document Object Model) element that currently has focus. This post is just me trying it out for myself. NOTE: A much more robust example of this technique can be seen in Inclusive Components by Heydon Pickering. View this code in my JavaScript Demos project on GitHub. Run this demo in my JavaScript Demos project on GitHub.
0 Comments
Leave a Reply. |