Modal and ModalHeader components - Trap Focus in Modal when Modal is Visible

[natalynyu]

This pull request adds an optional forwardRef prop to the Modal and ModalHeader. The props specifies the ref of the modal, which is used to direct the focus. When the user clicks on the button to open the Modal, the focus should shift to the modal's header for accessibility purposes. This PR adds logic to redirect the focus to the first focusable element in the modal when the modal is visible, and it also traps the focus in the modal when the modal is visible.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] I have run eslint on the code
• [x] I have added JSDoc for all of my code (where applicable)
• [x] I have added tests to cover my changes.

Priority:

• [x] Normal
• [ ] High

Related Issues:

Addresses #235

[codecov[bot]]

Codecov Report

Merging #68 into develop will decrease coverage by 1.78%. The diff coverage is 94.62%.

@@             Coverage Diff             @@
##           develop      #68      +/-   ##
===========================================
- Coverage   100.00%   98.21%   -1.79%     
===========================================
  Files           34       37       +3     
  Lines          429      392      -37     
  Branches        50       58       +8     
===========================================
- Hits           429      385      -44     
- Misses           0        5       +5     
- Partials         0        2       +2     

Impacted Files	Coverage Δ
src/Modals/Modal.tsx	86.84% <64.28%> (-13.16%)	:arrow_down:
src/Buttons/BorderlessButton.tsx	100.00% <100.00%> (ø)
src/Buttons/Button.tsx	100.00% <100.00%> (ø)
src/Forms/Dropdown.tsx	100.00% <100.00%> (ø)
src/Forms/Label.tsx	100.00% <100.00%> (ø)
src/Forms/TextInput.tsx	100.00% <100.00%> (ø)
src/Forms/ValidationErrorMessage.tsx	100.00% <100.00%> (ø)
src/Icons/IconLink.tsx	100.00% <100.00%> (ø)
src/Layout/Header.tsx	100.00% <100.00%> (ø)
src/Layout/Logo.tsx	100.00% <100.00%> (ø)
... and 29 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9427da5...e25e0d5. Read the comment docs.

[natalynyu]

Can you add a comment here about why are those the only focusable elements. Good idea, I added this through 4c8109d.