<h1>Accessible dialog</h1>

<button type="button" id="btn-signin" class="btn">Click to see dialog</button>

<section role="dialog"
         aria-labelledby="signin-title"
         aria-describedby="signin-desc"
         class="dialog">
  
  <button type="button" class="btn-close" aria-label="Close"></button>
  
  <form class="signin-form">
    <fieldset>
      <legend id="signin-title">Sign in</legend>
      <p id="signin-desc">Sign in to take advantage of member-only benefits.</p>

      <p><label>Username <input type="text" id="username"></label></p>
      <p><label>Password <input type="password"></label></p>
      <input type="submit" id="btn-sigin" value="Sign in">
    </fieldset>
  </form>
  
</section>

*
  box-sizing: border-box
body
  font-size: 120%
  font-family: sans-serif

.dialog
  display: none
  width: 70%
  max-width: 25em
  border: 1px solid #ccc
  border-radius: 5px
  box-shadow: rgba(0, 0, 0, 0.3) 0 3px 7px 0
  position: absolute
  top: 20%
  left: 20%
  padding: 1em
  background: #eee
  legend
    font-size: 1.2em
  input[type="text"],
  input[type="password"]
    display: block
    width: 100%
  label
    display: block
      
.btn-close
  border: none
  background: none
  font-size: .7em
  position: absolute
  top: 0
  right: 0
  &:before
    content: "\2715"
    
.btn
  font-size: 1.5em
    

$(function() {
  $('#btn-signin, .btn-close').on('click', function() {
    var $dialog = $('[role="dialog"]');
    $dialog.toggle();
    if ($dialog.is(':visible')) {
      $('#username').focus();
    }
    
    // Ensure the tab order is contained within the dialog
    $('[role="dialog"]').on('keydown', '#btn-sigin', function(e) { 
    var keyCode = e.keyCode || e.which; 
    // Capture the tab key
    if (keyCode == 9) { 
      e.preventDefault(); 
      // Return focus to the first focusable element
      $(e.target).closest('[role="dialog"]').find("button, input").eq(0).focus();
    } 
  });
  });
});