Modal dialogs are not accessible

[clapierre]

From web4all hackathon diagram-codesprint#3
Describe the bug
Modal dialogs are not accessible. When a modal dialog is displayed and a screen reader is used, the web page is visible to the screen reader (only the modal dialog should be).

To Reproduce

1. Launch Jupyter
2. Select Kernel > Restart Kernel... (to bring a sample modal dialog)

Expected behavior
The modal dialog should appear as modal to a screen reader

@sinabahram
Initial fix is to add aria-modal="true" and role="dialog" on the containing element for the modal. Because modals are created/destroyed in the DOM upon usage, this should work fine. We then need to examine accessible ways of closing hte modal. There must be an accessible close button, and the escape key needs to also trigger this close button. Lastly, we need to make sure that focus is returned to where it originally was when the modal is closed. This means that jupyterlab needs to remember the last focussed element, and then upon modal close, this element needs to regain focus e.g. by calling .focus() on the reference to that element.

[tonyfast]

this relates to focus issues in #9399

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

[jasongrout]

Perhaps the new dialog HTML element is a natural way to gain accessibility and other desirable behaviors?

• https://www.stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

[tonyfast]

dialog is most likely the best semantics for the container. its probably worth referencing the WAI-ARIA pattern that describes the expectations for a dialog modal with assistive technology.

• https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

[krassowski]

Closing as resolved by #14560.