Open Bug 1548325 Opened 2 years ago Updated 2 years ago

button elements with tabindex="0" aren't focused when tabbing (on Windows)

Categories

(Core :: DOM: UI Events & Focus Handling, defect, P3)

66 Branch
Unspecified
Windows
defect

Tracking

()

UNCONFIRMED
Tracking Status
firefox-esr60 --- affected
firefox66 --- affected
firefox67 --- affected
firefox68 --- affected

People

(Reporter: rtopol, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Steps to reproduce:

  1. Go to alpha-dot-rutgers-campus-map-dev.appspot.com (on Windows)
  2. Click on the map (to focus it) and attempt to tab forward to the next tabbable element (doesn't work)
  3. Shift-tab to see that you can tab to / focus "SHOW OFF-CAMPUS FACILITIES"
  4. Tab forward again multiple times (it will never tab further than the map div that has the tabindex="0" attribute)

Actual results:

Tabbing gets stuck and won't focus the next button element with tabindex="0". It won't even tab to the beginning of the tab order. It just keeps focus on the div for the map.

After some zooming/panning the map, some of the other buttons with tabindex="0" become tabbable, but this behavior is inconsistent. It appears to be an issue with these buttons being rendered to the DOM after initial load and Firefox is not properly adding these elements to its internal list of tabbable elements.

Expected results:

Be able to tab to (and focus) "Camden", "Newark", and "New Brunswick" text. Be able to toggle on "Off Campus Facilities" and then be able to tab to numbered marker clusters on the map. This works fine on Firefox for MacOS and all other browsers.

Component: Untriaged → Keyboard Navigation
OS: Unspecified → Windows
Component: Keyboard Navigation → DOM: Core & HTML
Product: Firefox → Core
Component: DOM: Core & HTML → User events and focus handling

Odd, it's just last <button> which has tabindex="0". I.e., other buttons also has it. And I cannot reproduce this with simple testcase.

According to comment 0, if this is only the problem on the website and only with Firefox for Windows, it may be a bug of the website.

I'm the lead developer on this website and I worked extensively to try to rectify this issue prior to submitting this bug.

We're not doing any weird changing of tabindex's or anything like that so I feel like, even though some of the elements on the map appear after initial load, the browser should still be able to detect them and be able to tab to them. You can run document.querySelectorAll('[tabindex="0"]') to see these elements have a tabindex of "0".

The biggest clue I've found is that the tabbing gets stuck and won't allow you to tab any further to other tabbable elements. I have not been able to find any other culprit other than the browser, especially since all other evergreen browsers for both Windows and MacOS have been handling this just fine.

Happy to answer any questions regarding the application if it means we can find a fix for this.

Thank you for any help you can provide.

You need to log in before you can comment on or make changes to this bug.