Modal with focus handling and aria-modal="..."

The button will launch a modal dialog.

Uses aria-modal="true" on the dialog, to avoid assistive technology users from straying out of the modal (e.g. using heading navigation). The attribute explicitly tells assistive technologies that the content outside of the modal should be hidden (so there's no need to apply aria-hidden="true"). Some assistive technologies may also prevent focus from moving outside of the dialog. However, this wouldn't work for non-AT keyboard users...so we still need some other mechanism to keep keyboard focus inside the modal.

One advantage of aria-modal="...": (once supported everywhere) it allows for the modal dialog container to be a child element of the regular page, as we're not having to apply aria-hidden="true" to the page, so don't have issues with needing to have the dialog outside of the now hidden branch in the accessibility tree.