From c4e8d772ddb1054512508276c57193257d1b70d8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 14 May 2021 17:54:22 -0700
Subject: [PATCH] fix: fully disable focus-visible for firefox for now (#2041)

---
 src/build/template.html                         |  6 +++---
 .../_store/observers/focusRingObservers.js      |  5 ++++-
 src/routes/_utils/supportsFocusVisible.js       |  7 ++++---
 src/routes/_utils/userAgent/isFirefoxPre88.js   | 17 -----------------
 4 files changed, 11 insertions(+), 24 deletions(-)
 delete mode 100644 src/routes/_utils/userAgent/isFirefoxPre88.js

diff --git a/src/build/template.html b/src/build/template.html
index 382a215a..f9f906ea 100644
--- a/src/build/template.html
+++ b/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 */
diff --git a/src/routes/_store/observers/focusRingObservers.js b/src/routes/_store/observers/focusRingObservers.js
index 2dfa3e9b..8f2ac00f 100644
--- a/src/routes/_store/observers/focusRingObservers.js
+++ b/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
   })
diff --git a/src/routes/_utils/supportsFocusVisible.js b/src/routes/_utils/supportsFocusVisible.js
index c2393384..3d8c428b 100644
--- a/src/routes/_utils/supportsFocusVisible.js
+++ b/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')))
diff --git a/src/routes/_utils/userAgent/isFirefoxPre88.js b/src/routes/_utils/userAgent/isFirefoxPre88.js
deleted file mode 100644
index 5828e7ea..00000000
--- a/src/routes/_utils/userAgent/isFirefoxPre88.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { isFirefox } from './isFirefox'
-import { thunk } from '../thunk'
-
-export const isFirefoxPre88 = thunk(() => {
-  if (!isFirefox()) {
-    return false
-  }
-  try {
-    // https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/88#javascript
-    // https://github.com/tc39/proposal-regexp-match-indices
-    // eslint-disable-next-line no-invalid-regexp,prefer-regex-literals
-    RegExp('', 'd')
-    return false
-  } catch (e) {
-    return true
-  }
-})