fix: fully disable focus-visible for firefox for now (#2041)
This commit is contained in:
parent
69e3582157
commit
c4e8d772dd
|
@ -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 */
|
||||
|
|
|
@ -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
|
||||
})
|
||||
|
|
|
@ -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')))
|
||||
|
|
|
@ -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
|
||||
}
|
||||
})
|
Loading…
Reference in a new issue