fix(dialog): ensure :focus-visible polyfill availability

adobe · Jan 21, 2021 · b50e396 · b50e396
1 parent 4eaf6a2
commit b50e396
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
@@ -28,7 +28,10 @@ import crossStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.c
 import '@spectrum-web-components/icon/sp-icon.js';
 import { Cross500Icon } from '@spectrum-web-components/icons-ui';
 import { AlertIcon } from '@spectrum-web-components/icons-workflow';
-import { ObserveSlotPresence } from '@spectrum-web-components/shared';
+import {
+    ObserveSlotPresence,
+    FocusVisiblePolyfillMixin,
+} from '@spectrum-web-components/shared';
 
 import styles from './dialog.css.js';
 
@@ -37,11 +40,13 @@ import styles from './dialog.css.js';
  *
  * @fires close - Announces that the dialog has been closed.
  */
-export class Dialog extends ObserveSlotPresence(SpectrumElement, [
-    '[slot="hero"]',
-    '[slot="footer"]',
-    '[slot="button"]',
-]) {
+export class Dialog extends FocusVisiblePolyfillMixin(
+    ObserveSlotPresence(SpectrumElement, [
+        '[slot="hero"]',
+        '[slot="footer"]',
+        '[slot="button"]',
+    ])
+) {
     public static get styles(): CSSResultArray {
         return [styles, crossStyles];
     }

diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts
@@ -26,6 +26,7 @@ import '@spectrum-web-components/button/sp-button.js';
 import '../sp-dialog.js';
 import styles from '@spectrum-web-components/modal/src/modal.css.js';
 import { Dialog } from './Dialog.js';
+import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
 
 /**
  * @element sp-dialog-wrapper
@@ -35,7 +36,7 @@ import { Dialog } from './Dialog.js';
  * @fires confirm - Announces that the "confirm" button has been clicked.
  * @fires close - Announces that the dialog has been closed.
  */
-export class DialogWrapper extends SpectrumElement {
+export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static get styles(): CSSResultArray {
         return [styles];
     }