​

// Grab the elements we need to interact with

var openButton = document.getElementById('open-dialog');

var dialog = document.getElementById('dialog');

var closeButton = document.getElementById('close-dialog');

​

// Data filled by openDialog() and later used by closeDialog()

var keyHandle;

var tabHandle;

var disabledHandle;

var hiddenHandle;

var focusedElementBeforeDialogOpened;

​

function openDialog() {

  // Remember the focused element before we opened the dialog

  // so we can return focus to it once we close the dialog.

  focusedElementBeforeDialogOpened = document.activeElement;

​

  // We're using a transition to reveal the dialog,

  // so wait until the element is visible, before

  // finding the first keyboard focusable element

  // and passing focus to it, otherwise the browser

  // might scroll the document to reveal the element

  // receiving focus

  ally.when.visibleArea({

    context: dialog,

    callback: function(context) {

      // the dialog is visible on screen, so find the first

      // keyboard focusable element (giving any element with

      // autofocus attribute precendence). If the dialog does

      // not contain any keyboard focusabe elements, focus will

      // be given to the dialog itself.

      var element = ally.query.firstTabbable({

        context: context, // context === dialog

        defaultToContext: true,

      });

      element.focus();

    },

  });

​

  // Make sure that no element outside of the dialog

  // can be interacted with while the dialog is visible.

  // This means we don't have to handle Tab and Shift+Tab,

  // but can defer that to the browser's internal handling.

  disabledHandle = ally.maintain.disabled({

    filter: dialog,

  });

​

  // Make sure that no element outside of the dialog

  // is exposed via the Accessibility Tree, to prevent

  // screen readers from navigating to content it shouldn't

  // be seeing while the dialog is open. See example:

  // https://marcysutton.com/slides/mobile-a11y-seattlejs/#/36

  hiddenHandle = ally.maintain.hidden({

    filter: dialog,

  });

​

  // Make sure that Tab key controlled focus is trapped within

  // the tabsequence of the dialog and does not reach the

  // browser's UI, e.g. the location bar.

  tabHandle = ally.maintain.tabFocus({

    context: dialog,

  });

​

  // React to enter and escape keys as mandated by ARIA Practices

  keyHandle = ally.when.key({

    escape: closeDialogByKey,

    // Note: in non-interactive content you would also bind the enter

    // key to close the dialog. In our example the form's submit event

    // will cover that instead. The enter handler would be executed

    // for *every* press of the enter key, even if the focused element

    // is a button (which would invoke the default action). Try using

    // a <form> for interactive content to get around that problem.

    // enter: closeDialogByKey,

  });

​

  // Show the dialog

  dialog.hidden = false;

}

​

function closeDialogByKey() {

  // we need to let the keyboard event handlers finish,

  // before actually closing the dialog. Otherwise the

  // keydown of <kbd>enter</kbd> will close the dialog,

  // focus is passed back to the open-dialog-button and

  // the keyup of <kbd>enter</kbd> will open the dialog

  // again.

  setTimeout(closeDialog);

  // alternatively we could've called event.preventDefault()

  // and then run closeDialog() synchronously

}

​

function closeDialog() {

  // undo listening to keyboard

  keyHandle.disengage();

  // undo trapping Tab key focus

  tabHandle.disengage();

  // undo hiding elements outside of the dialog

  hiddenHandle.disengage();

  // undo disabling elements outside of the dialog

  disabledHandle.disengage();

  // return focus to where it was before we opened the dialog

  focusedElementBeforeDialogOpened.focus();

  // hide or remove the dialog

  dialog.hidden = true;

}

​

function saveDialog(event) {

  // do not submit the form

  event.preventDefault();

​

  // do something with the entered data

  var name = dialog.querySelector('input').value;

  console.log('entered name', name);

​

  closeDialog();

}

​

// wire up showing/hiding the dialog

openButton.addEventListener('click', openDialog, false);

closeButton.addEventListener('click', closeDialog, false);

dialog.addEventListener('submit', saveDialog, true);

​