[A11Y] Multiple "Tab" keys needed to navigate to "Next" button from “What is a web compatibility issue” popup

[softvision-oana-arbuzov]

Browser / Version: Firefox Nightly 81.0a1 (2020-07-27) Operating System: Windows 10 Pro

Steps to Reproduce:

1. Navigate to https://webcompat.com/issues/new
2. Using "Tab" key, navigate to the URL field and fill it in.
3. Using "Tab" key, navigate to "Confirm" button.
4. Using "Tab" key, navigate to "Learn more about web compatibility" link.
5. Using "Enter" key, activate the popup.
6. Using "Tab" key, try to navigate to "Next" button.
7. Observe behavior.

Expected Behavior: "Next" button becomes active after a few "Tab" keys (after "X" and navigation dots are passed).

Actual Behavior: Multiple "Tab" keys are needed to navigate to "Next" button.

Notes:

1. Screenshot attached.

2. The same behavior is encountered for "Home" button (after navigating from "Report anonymously").

Watchers: @softvision-oana-arbuzov @cipriansv

[miketaylr]

To properly handle this, we'll need to implement some kind of "focus trap":

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex https://medium.com/@islam.sayed8/trap-focus-inside-a-modal-aa5230326c1b