fix: fully disable focus-visible for firefox for now (#2041)

src/build/template.html

@@ -31,8 +31,7 @@
     }
   </style>
 
-  <style id="theFocusVisibleStyle" media="all">
-    /*  :focus-visible styles */
+  <style id="theFocusVisiblePolyfillStyle" media="only x">
     /* polyfill */
     /* Note we have to use [data-focus-visible-added] rather than .focus-visible because
      * Svelte overrides classes */
@@ -42,7 +41,8 @@
     .js-focus-visible :focus:not([data-focus-visible-added]).focus-after::after {
       display: none;
     }
-
+  </style>
+  <style id="theFocusVisibleStyle" media="only x">
     /* standard version */
     :focus:not(:focus-visible) {
       outline: none !important; /* important to win the specificity war */

src/routes/_store/observers/focusRingObservers.js

@@ -1,10 +1,13 @@
-const style = process.browser && document.getElementById('theFocusVisibleStyle')
+import { supportsFocusVisible } from '../../_utils/supportsFocusVisible'
 
 export function focusRingObservers (store) {
   if (!process.browser) {
     return
   }
 
+  const styleId = supportsFocusVisible() ? 'theFocusVisibleStyle' : 'theFocusVisiblePolyfillStyle'
+  const style = document.getElementById(styleId)
+
   store.observe('alwaysShowFocusRing', alwaysShowFocusRing => {
     style.setAttribute('media', alwaysShowFocusRing ? 'only x' : 'all') // disable or enable the style
   })

src/routes/_utils/supportsFocusVisible.js

@@ -1,7 +1,8 @@
 import { thunk } from './thunk'
 import { supportsSelector } from './supportsSelector'
-import { isFirefoxPre88 } from './userAgent/isFirefoxPre88'
+import { isFirefox } from './userAgent/isFirefox'
 
-// Firefox pre-88 had a focus-visible bug:
+// Disabling for now in Firefox due to bugs:
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1699154
-export const supportsFocusVisible = thunk(() => (!isFirefoxPre88() && supportsSelector(':focus-visible')))
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1711057
+export const supportsFocusVisible = thunk(() => (!isFirefox() && supportsSelector(':focus-visible')))