Tabulación adecuada de elementos interactivos en Firefox en macOS

Solo tuve que depurar un problema con elementos enfocables en Firefox. Alguien me informó que al pasar a un determinado elemento dentro de una inserción de CodePen, la posición de desplazamiento se disparaba a la parte superior de la página (¡¿WTF?!). Entonces, fui a depurar el problema navegando por una página de ejemplo en Firefox, y esto es lo que vi:

Ni siquiera sabía qué hacer con eso. ¿Era como si pudieras seleccionar algunos elementos pero no otros? ¿Puedes tabular a buttons pero no aa s? Uhhhhh, ¿no parece correcto que no puedas acceder a enlaces en Firefox?

Después de buscar y preguntar, resulta que es esta preferencia a nivel del sistema operativo en macOS.

Si tienes que activarlo, también debes reiniciar Firefox. Una vez que lo haya hecho, podrá acceder a las cosas que esperaría poder acceder, como enlaces.

Sobre ese error al desplazarse hacia la parte superior de la página. ¿Ves el enlace “Omitir resultados Iframe” que aparece al desplazarte por CodePen Embed? Solo aparece cuando :focusse escribe con – (ya que el objetivo es omitirlo iframeen lugar de verse obligado a pasar por tabulador). Lo “escondí” haciendo algo position: absolute; top: -9999px; left: -9999px(antigua memoria muscular) y luego eliminé esos valores cuando estaba enfocado. Por alguna razón, al acceder a la pestaña, Firefox veía esos valores y saltaba instantáneamente a la página, aunque el estilo de enfoque la movía de nuevo a su lugar normal. Debe haber sido algún tipo de condición de carrera.

También me pareció muy tonto que Firefox hiciera eso en la página principal cuando ese enlace estaba dentro de un iframe. Lo arreglé usando una técnica de ocultación accesible más examinada .