title: trapping focus for a modal dialog
body: <p>I wanted to make modal dialog accessible . I added two hidden focusable elements  </p>
  
  <pre><code>&lt;a href="javascript:void(0)" id="dialog-start"&gt;Dialog Start &lt;/a&gt;
    Some focussable Dialog Elements  
  &lt;a href="javascript:void(0)" id="dialog-end" onblur="onblurevent()"&gt;Dialog end&lt;/a&gt;
  
  
  function onblurevent(){
     document.getElementById("dialog-start").focus(); 
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>#dialog-start{
    height:1px;
    left:-9999px; 
    overflow:hidden;
    position:absolute;
    top:0;
    width:1px;
  }
  </code></pre>
  
  <p>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.</p>