ENTER
or SPACE
key must open lightbox dialog.TAB
and SHIFT-TAB
to focusable elements of child window.ESC
key must close lightbox dialog (unless the currently focussed element has existing ESC
key behaviour).aria-haspopup="true"
is not valid in this context).<dialog>
tag, but at the time of writing this tag does not have good cross browser support.data-dialog
. The value of this attribute references the ID of the dialog element and will be used by JavaScript (more on that later).hidden
to prevent it from being displayed on page load.hidden
attribute.aria-hidden="true"
to any non direct-ancestor nodes in the DOM.overflow:hidden
to the html body.ESC
key while focus is on the dismiss button, or any other interactive element that does not already have ESC
key behaviour, should close the dialog.ESC
event from bubbling.dialog-close
is a custom event fired by the lightbox dialog widget.