I wanted to make modal dialog accessible . I added two hidden focusable elements

<a href="javascript:void(0)" id="dialog-start">Dialog Start </a>
  Some focussable Dialog Elements  
<a href="javascript:void(0)" id="dialog-end" onblur="onblurevent()">Dialog end</a>


function onblurevent(){
   document.getElementById("dialog-start").focus(); 
}

When ever dialog-end element blur event happens i tried to move focus to dialog-start element calling focus() method but the focus is moving to address bar .dialog start and end anchor tags are hidden by using below style

#dialog-start{
  height:1px;
  left:-9999px; 
  overflow:hidden;
  position:absolute;
  top:0;
  width:1px;
}

Iam not sure if anchor styles are the reason or is the only way to make sure focus is inside the dialog is to get list of focusable elments and call focus() method in a keydown event handler on container.

I wanted to make modal dialog accessible . I added two hidden focusable elements

<a href="javascript:void(0)" id="dialog-start">Dialog Start </a>
  Some focussable Dialog Elements  
<a href="javascript:void(0)" id="dialog-end" onblur="onblurevent()">Dialog end</a>


function onblurevent(){
   document.getElementById("dialog-start").focus(); 
}

When ever dialog-end element blur event happens i tried to move focus to dialog-start element calling focus() method but the focus is moving to address bar .dialog start and end anchor tags are hidden by using below style

#dialog-start{
  height:1px;
  left:-9999px; 
  overflow:hidden;
  position:absolute;
  top:0;
  width:1px;
}

Iam not sure if anchor styles are the reason or is the only way to make sure focus is inside the dialog is to get list of focusable elments and call focus() method in a keydown event handler on container.

• javascript
• modal-dialog
• accessibility

Share Improve this question Follow edited Nov 23, 2012 at 7:52 Rajani asked Nov 23, 2012 at 7:15 RajaniRajani 1311 gold badge11 silver badge44 bronze badges 2

• where is the code for the onblurevent() call? It would be useful to have that. – Bruno Commented Nov 23, 2012 at 7:24
• Thanks for helping .I included onblurevent() code and also styles i used for anchor tag . – Rajani Commented Nov 23, 2012 at 7:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The problem occurs because you don't handle your keydown event. When you pressing Tab on last link browser automatically switches focus to address bar. So you just need to preventDefault() default browser behavior if Tab pressed.

The following code will work:

window.onload = function() {
    var firstAnchor = document.getElementById("dialog-start"),
        lastAnchor = document.getElementById("dialog-end");

    function keydownHandler(e) {
        var evt = e || window.event;
        var keyCode = evt.which || evt.keyCode;
        if(keyCode === 9) { // TAB pressed
            if(evt.preventDefault) evt.preventDefault();
            else evt.returnValue = false;
            firstAnchor.focus();
        }
    }

    if(lastAnchor.addEventListener) lastAnchor.addEventListener('keydown', keydownHandler, false);
    else if(lastAnchor.attachEvent) lastAnchor.attachEvent('onkeydown', keydownHandler);
}

(note that you dont need onblurevent function anymore)

$(document).ready(function () {
    //set focus on first field in Bootstrap modal when loaded
    $("#yourModal").on('shown.bs.modal', function () {
    $(this).find('#yourField').focus();
    });
});