fix: dynamically import focus-visible polyfill for emoji picker (#1870)

This commit is contained in:
Nolan Lawson 2020-09-13 15:34:01 -07:00 committed by GitHub
parent 7803bdf797
commit 37711ee17e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 5 deletions

View File

@ -54,7 +54,6 @@
}
</style>
<script>
/* global applyFocusVisiblePolyfill */
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
import { insertEmoji } from '../../../_actions/emoji'
@ -63,10 +62,11 @@
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
import { isDarkTheme } from '../../../_utils/isDarkTheme'
import 'emoji-picker-element/picker'
import 'focus-visible'
import { registerShadowRoot, unregisterShadowRoot } from '../../../_thirdparty/a11y-dialog/a11y-dialog'
import { doubleRAF } from '../../../_utils/doubleRAF'
import { convertCustomEmojiToEmojiPickerFormat } from '../../../_utils/convertCustomEmojiToEmojiPickerFormat'
import { supportsFocusVisible } from '../../../_utils/supportsFocusVisible'
import { importFocusVisible } from '../../../_utils/asyncPolyfills'
export default {
async oncreate () {
@ -81,7 +81,6 @@
style.textContent = '.emoji { filter: grayscale(100%); }'
picker.shadowRoot.appendChild(style)
}
applyFocusVisiblePolyfill(picker.shadowRoot)
registerShadowRoot(picker.shadowRoot)
this.on('destroy', () => unregisterShadowRoot(picker.shadowRoot))
if (!isUserTouching) { // auto focus the input on desktop
@ -91,6 +90,11 @@
})
})
}
if (!supportsFocusVisible()) {
await importFocusVisible()
/* global applyFocusVisiblePolyfill */
applyFocusVisiblePolyfill(picker.shadowRoot)
}
},
components: {
ModalDialog

View File

@ -1,8 +1,8 @@
import { supportsSelector } from './supportsSelector'
import { importFocusVisible } from './asyncPolyfills'
import { supportsFocusVisible } from './supportsFocusVisible'
export function loadNonCriticalPolyfills () {
return Promise.all([
!supportsSelector(':focus-visible') && importFocusVisible()
!supportsFocusVisible() && importFocusVisible()
])
}

View File

@ -0,0 +1,4 @@
import { thunk } from './thunk'
import { supportsSelector } from './supportsSelector'
export const supportsFocusVisible = thunk(() => supportsSelector(':focus-visible'))