search

webcompat / webcompat.com

Source code for webcompat.com
https://webcompat.com
360 stars 191 forks source link

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

Open softvision-oana-arbuzov opened 4 years ago

softvision-oana-arbuzov commented 4 years ago

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.

image

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

Watchers: @softvision-oana-arbuzov @cipriansv

miketaylr commented 4 years ago

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