[a11y] Prevent interaction with the background when modal is open

[flarnie-chegg]

What: Prevent the user for focusing, clicking, or otherwise interacting with background elements while the modal is open.
Why: Keyboard users navigate the page by hitting 'tab' to skip through focusable elements, and screen reader users also jump around based on elements like headers, links, lists, etc. So they could jump into the "background" outside of the modal, which creates confusion and possibly gets the focus "stuck" in the background.
How:
This one is a bit tricky. Here are some ideas -

• Implement a "focus trap". This is the most common approach. Listen for 'tab' and 'shift + tab' keypress when the modal is open, and if the focus is on the last focusable element inside the modal, then move event.preventDefault and manually move the focus back to the first focusable element in the modal. We can get the list of focusable elements using something like const focusableChildren = modal.querySelectorAll('a, button, input, select, textarea, [contenteditable]');
  Note that focusableChildren is a nodeList, not an array, so it does not have all the Array methods like 'map' or 'forEach'. You can deal with that by converting it into an array or calling Array.prototype.forEach.call(nodeList, callback).
• Find all the elements that are focusable and not in the modal, and set tabindex=-1 and aria-hidden on them. Then once the modal closes, remove the tabindex=-1. I have made this work but it is tricky, because a mistake can leave some elements on the page un-clickable if the modal closes and we don't remove the tabindex=-1 and that is bad.
• We could use the new 'inert' attribute, setting that attibute on all content that is outside the modal. It's not supported in browsers yet, but there is a polyfill. but that would make this library less slim - it would have to include the polyfill. This is my least favorite option; I found this polyfill did not play well with React. https://github.com/WICG/inert
  https://github.com/WICG/inert