fix: dynamically import focus-visible polyfill for emoji picker (#1870)
This commit is contained in:
parent
7803bdf797
commit
37711ee17e
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
])
|
||||
}
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
import { thunk } from './thunk'
|
||||
import { supportsSelector } from './supportsSelector'
|
||||
|
||||
export const supportsFocusVisible = thunk(() => supportsSelector(':focus-visible'))
|
Loading…
Reference in New Issue