Appropriate Tabbing to Interactive Components in Firefox on macOS

I simply needed to debug a concern with focusable components in Firefox. Somebody reported to me that when tabbing to a particular aspect within a CodePen embed, it shot the scroll position to the top of the page (WTF?!). I went to go debug the issue by tabbing through an example page in Firefox, and this is what I saw:

I didn’t even know understand to make of that. It resembled some aspects you could tab to however not others? You can tab to < s however not < s? Uhhhhh, that does not appear right that you can't tab to links in Firefox?

After browsing and asking around, it ends up it's this choice at the OS level on macOS.

< img loading ="lazy"width="1709"height="1565"src= "" alt class ="wp-image-332511"srcset= " 1709w, 300w, 1024w, 768w, 1536w, 1000w"sizes="(min-width: 735px) 864px, 96vw"data-recalc-dims="1">

System Preferences > Keyboard > Faster Ways > User keyboard navigation to move focus in between controls You likewise have to reboot Firefox if you have to turn that on. Then as soon as you have you can tab to things you 'd anticipate to be able to tab to, like links.

About that bug with the scrolling to the top of the page. See that "Avoid Outcomes Iframe" link that appears when tabbing through the CodePen Embed? It just appears when : focus-ed (as the point of it is to avoid over the < instead of being required to tab through it). I "concealed" it by doing a position: outright; top: -9999 px; left: -9999 px thing (old muscle memory), then getting rid of those worths when in focus. For some factor, when tabbed to, Firefox would see those worths and quickly leap the page up, although the focus design moved it back into a typical location. Need to have been some sort of race condition thing.

I likewise discovered it really silly that Firefox would do that to the moms and dad When that link was inside an iframe, page. I repaired it up utilizing a more vetted available hiding method.

Leave a Reply

Your email address will not be published. Required fields are marked *