Proper Tabbing to Interactive Elements in Firefox on macOS

Recently, I encountered a frustrating focus issue in Firefox on macOS. A user reported unexpected scroll behavior when tabbing through a CodePen embed—the page would jump to the top! Investigating this, I discovered some bizarre tabbing inconsistencies.

My initial testing revealed erratic focus behavior: some elements were tabbable, others weren't. Incredibly, links ( tags) were sometimes inaccessible via the tab key. This seemed fundamentally wrong.

After some research and community inquiries, the culprit emerged: a macOS system preference affecting Firefox's tab order. Enabling this preference (and restarting Firefox) resolved the issue, making expected elements like links tabbable.

The original scroll-to-top bug stemmed from a "Skip Results Iframe" link within the CodePen embed. This link, designed to bypass the iframe, only appeared when focused. My initial (and admittedly clumsy) attempt to hide it using position: absolute; top: -9999px; left: -9999px caused Firefox to jump the page to the top, even though the focus style repositioned the element. This appears to be a race condition within Firefox.

I replaced this method with a more robust and accessible hiding technique. I also found it illogical that Firefox would affect the parent page's scroll position when the problematic link resided within an iframe. The updated solution addresses this as well.

The above is the detailed content of Proper Tabbing to Interactive Elements in Firefox on macOS. For more information, please follow other related articles on the PHP Chinese website!