Difference between revisions of "Dialog Focus: Keep it modal"

From Level Access Web Labs
Jump to navigation Jump to search
(Demo how to retain focus within modal dialog until dismissed)
 
m
 
(4 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
     <a href="#swag">A control before the dialog</a>
 
     <a href="#swag">A control before the dialog</a>
 
     <a class="modal-launcher" href="javascript:openDialog();">Open the dialog</a>
 
     <a class="modal-launcher" href="javascript:openDialog();">Open the dialog</a>
     <div class="modal closed">
+
     <div class="modal closed" tabindex="-1">
 
         <a id="0" href="javascript:closeDialog();" class="closer modal-control">Close</a>
 
         <a id="0" href="javascript:closeDialog();" class="closer modal-control">Close</a>
 
         <h2>Try to tab out of the dialog</h2>
 
         <h2>Try to tab out of the dialog</h2>
Line 32: Line 32:
 
     var controls = modal.getElementsByClassName('modal-control');
 
     var controls = modal.getElementsByClassName('modal-control');
  
     function shifty(e,f,g){
+
     function modalShift(e,f,g){
 
     //handle focus between modal elements
 
     //handle focus between modal elements
 
         //e - current element
 
         //e - current element
Line 59: Line 59:
 
     //middle controls
 
     //middle controls
 
     for (var i=1,j=controls.length-1;i < j; i++){
 
     for (var i=1,j=controls.length-1;i < j; i++){
         shifty(controls[i], controls[i+1], controls[i-1]);
+
         modalShift(controls[i], controls[i+1], controls[i-1]);
 
     }
 
     }
 
     //first control
 
     //first control
     shifty(controls[0], controls[1], controls[controls.length-1]);
+
     modalShift(controls[0], controls[1], controls[controls.length-1]);
 
     //last control
 
     //last control
     shifty(controls[controls.length-1], controls[0], controls[controls.length-2]);
+
     modalShift(controls[controls.length-1], controls[0], controls[controls.length-2]);
 
      
 
      
 
     function closeDialog() {
 
     function closeDialog() {
Line 78: Line 78:
 
</script>
 
</script>
 
</div>
 
</div>
 +
<h2>The Javascript</h2>
 +
<pre><code>
 +
   
 +
    var modal = document.getElementsByClassName('modal')[0];
 +
    var controls = modal.getElementsByClassName('modal-control');
 +
 +
    function modalShift(e,f,g){
 +
    //handle focus between modal elements
 +
        //e - current element
 +
        //f - next element
 +
        //g - previous element
 +
        e.onblur = function (event) {//in case user clicks out of dialog
 +
            //important that all modal controls have this class 'modal-control'
 +
            setTimeout(function () {
 +
                if (!document.activeElement.classList.contains('modal-control')) {
 +
                    event.target.focus();
 +
                }
 +
            },10);
 +
        }
 +
        e.onkeydown = function (event){
 +
            if (event.keyCode === 9) {//tab key
 +
                event.preventDefault();
 +
                if (event.shiftKey) {
 +
                    g.focus();//previuos control
 +
                } else {
 +
                    f.focus();//next control
 +
                }
 +
            }
 +
        };
 +
    }
 +
   
 +
    //middle controls
 +
    for (var i=1,j=controls.length-1;i < j; i++){
 +
        modalShift(controls[i], controls[i+1], controls[i-1]);
 +
    }
 +
    //first control
 +
    modalShift(controls[0], controls[1], controls[controls.length-1]);
 +
    //last control
 +
    modalShift(controls[controls.length-1], controls[0], controls[controls.length-2]);
 +
   
 +
    function closeDialog() {
 +
        modal.className = 'modal closed modal-control';
 +
        document.getElementsByClassName('modal-launcher')[0].focus();
 +
    }
 +
   
 +
    function openDialog() {
 +
        modal.className = 'modal open modal-control';
 +
        modal.setAttribute('tabindex','-1');
 +
        modal.focus();
 +
    }
 +
</code></pre>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 16:32, 18 May 2016

Dialog Focus - Keeping focus inside modal dialogs.

Dialog Focus - Keeping focus inside modal dialogs.

While the dialog is open, focus cannot move out of the dialog.

A control before the dialog Open the dialog A control after dialog

The Javascript


    
    var modal = document.getElementsByClassName('modal')[0];
    var controls = modal.getElementsByClassName('modal-control');

    function modalShift(e,f,g){
    //handle focus between modal elements
        //e - current element
        //f - next element
        //g - previous element
        e.onblur = function (event) {//in case user clicks out of dialog
            //important that all modal controls have this class 'modal-control'
            setTimeout(function () {
                if (!document.activeElement.classList.contains('modal-control')) {
                    event.target.focus();
                }
            },10);
        }
        e.onkeydown = function (event){
            if (event.keyCode === 9) {//tab key
                event.preventDefault();
                if (event.shiftKey) {
                    g.focus();//previuos control
                } else {
                    f.focus();//next control
                }
            }
        };
    }
    
    //middle controls
    for (var i=1,j=controls.length-1;i < j; i++){
        modalShift(controls[i], controls[i+1], controls[i-1]);
    }
    //first control
    modalShift(controls[0], controls[1], controls[controls.length-1]);
    //last control
    modalShift(controls[controls.length-1], controls[0], controls[controls.length-2]);
    
    function closeDialog() {
        modal.className = 'modal closed modal-control';
        document.getElementsByClassName('modal-launcher')[0].focus();
    }
    
    function openDialog() {
        modal.className = 'modal open modal-control';
        modal.setAttribute('tabindex','-1');
        modal.focus();
    }