1611404 - Tab focus skips focusable elements if they have a descendant that is focusable

Status: RESOLVED INVALID

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

Description

[Andy Earnshaw]

Attachment: firefox-tab-order-bug.html

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

Steps to reproduce:

We are using a card-style UX pattern where each card in a list is a link (wrapped with a <a href> tag). The cards also have a <button> inside each to mark them as favourites. After creating this pattern, tabbing through the document showed unexpected results.

This is demonstrated at a very basic level in the attached HTML file.

Actual results:

When pressing the tab key to navigate the document, the <a> elements are skipped and focus just moves between the descendant <button> elements instead.

Expected results:

Focus should move to the <a>, then its descendant <button>, then the next <a>, then its descendant <button>, and so on. This is observable in Chrome, Internet Explorer 11 and Edge (EdgeHTML). Safari's results seem worse than Firefox's: it doesn't allow any of the elements to be focused with the tab key.

Comment 1

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(PTO: 9/8)]

Enn: Could you take a look?

Comment 2

[Neil Deakin (away until Sept 6)]

That's the correct behaviour. You need to enable Keyboard Navigation in System Preferences to tab between non-input controls.

Comment 3

[Andy Earnshaw]

I had no idea this was down to a system preference. It looks like Chrome and other browsers override it.

https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox

Thanks for the clarification.