data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Nolan Lawson 2021-05-14 17:54:22 -07:00 committed by GitHub
parent 69e3582157
commit c4e8d772dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/build/template.html
View file

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

5
src/routes/_store/observers/focusRingObservers.js
View file

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

7
src/routes/_utils/supportsFocusVisible.js
View file

@ -1,7 +1,8 @@
import { thunk } from './thunk' import { thunk } from './thunk'
import { supportsSelector } from './supportsSelector' 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 // 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')))

17
src/routes/_utils/userAgent/isFirefoxPre88.js
View file

@ -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
}
})