Fix for focus trapping in modal/dialog components

[stalgiag]

Overview

This PR adds a FocusTrapper component that traps focus in children regardless of whether those children are rendered in a portal. This component side steps browser restrictions on modifying focus during events that would lead to browser interface elements becoming focused. It does this by adding focusable divs before and after the child element. Focus events that would lead to focusing on the barrier divs are used to wrap the focus around to the correct focusable element within the child.

This component is added directly into the BasicModal component that extends the React Bootstrap modal component.

Unit tests are added for FocusTrapper.

Problems addressed

• From Keyboard and focus related accessibility issues in report status dialog #757
  • Focus is initially placed on the dialog.
  • You can't tab backward through the dialog.
  • Tab is not fully trapped; it leaves the dialog and goes into browser chrome, e.g., address bar.
• From Dialog for changing candidate review completion target date has several critical problems #785
  • Accessibility issue: Like several of the other dialogs, the tab sequence is broken. Tabbing from the save button should move focus to the date input. Back tabbing from the date input should move focus to the save button.

Testing

Since this modifies a common component, the potential for side effects are substantial with this PR. I have done a pass of testing for all of the instances of BasicModal use listed below. In all instances focus wrapped to interactive elements as expected. I'd greatly appreciate any additional testing during review.

• TestPlanReportStatusDialog
• 'Are you sure you want to exit?' Test Plan Run
• Candidate Review Completion Date Edit Dialog
• UpdateTargetDateModal
• Advancing Test Plan Dialog
• UpdateVersionModal
• "Start Over?" Dialog

closes #805
closes #757
partially addresses #785

[alflennik]

Thanks for implementing these fixes, I verified they are working. I tested different access methods like mouse, keyboard, VoiceOver and NVDA. As always, it's great to see some new tests appearing 🙏 Code looks good! I'm glad this fix will apply to all modals going forward.