Review methods for trapping focus

[jgiardino]

Some suggestions for alternate methods were included in #1011:

• https://ui.reach.tech/dialog
  • Works in all 3: JAWS, VO, NVDA
  • Please note however that this example has not implemented the Esc key to dismiss the dialog, which is something we want.
• https://atlaskit.atlassian.com/packages/core/modal-dialog
  • JAWS and VO - Does not trap focus. It blocks me from moving forward, but when going backward, I can leave the dialog. I’m also able to pull up a list of links, headings, and other contents on the page.
  • NVDA - Traps focus, but only the Close button can receive focus, and other contents in dialog are neither announced nor accessible.

As part of this issue, I reviewed the examples above in all screen reader / browser combinations we support, and noted whether they are supported.

Some advantages of looking at an alternate solution include:

1. No required prop for the consumer to have to pass in. In my opinion, my implementation isn’t the most inconvenient thing in the world, but doing away with this particular requirement would be nice
2. It is a more robust solution. My implementation only hides the react root. While this is likely fine in most use cases, it is possible that in more complex UIs, the body may contain other elements. In this case, these won’t be hidden from screen readers

[rachael-phillips]

Issue has been resolved in #1011