Accessibility: Modals

[cjcenizal]

We need to make sure our modals are keyboard- and screen-reader-accessible. For the full breakdown, see https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/.

Here's an example of some of the markup we need:

<div role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
  <div id="modalTitle">Save "untitled" document?</div>
  <div id="modalDescription">You have made changes to "untitled.txt" that have not been saved. What do you want to do?</div>
  <button type="button">Save changes</button>
  <button type="button">Discard changes</button>
  <button type="button">Cancel</button>
</div>

Here are the crib notes:

• Add role="dialog" to the Modal root element.
• Use aria-labelledby and aria-describedby to point screen readers to the title and body text of the modal.
• When the modal is opened, focus on the first tabbable element.
• Use JS to trap tabbing within the modal. Add keypress handlers to the first and last tabbable elements so that tabbing from the last element focuses on the first one, and shift-tabbing from the first element focuses on the last one.
• Add an ESC keypress handler, so hitting escape closes the modal.
• When the modal is closed, use JS to restore focus to the element which was last focused (this should be the button which was clicked to open the modal).

[stacey-gammon]

Will also need to update the new clone modal to be accessible: #10925

Tagging here just to keep track.

[cjcenizal]

Moved to elastic/eui#502