refactor: update confirm-dialog to not use dialog extension (#6166)

packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js

@@ -5,11 +5,13 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { Dialog } from '@vaadin/dialog/src/vaadin-dialog.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
 import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
 import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 const confirmDialogOverlay = css`
  :host {
@@ -87,18 +89,14 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerEl
 customElements.define(ConfirmDialogOverlay.is, ConfirmDialogOverlay);
 
 /**
- * An extension of `<vaadin-dialog>` used internally by `<vaadin-confirm-dialog>`.
- * Not intended to be used separately.
+ * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
  * @private
  */
-class ConfirmDialogDialog extends Dialog {
+class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
  static get is() {
  return 'vaadin-confirm-dialog-dialog';
  }
 
- /**
- * Override template to provide custom overlay tag name.
- */
  static get template() {
  return html`
  <style>
@@ -109,13 +107,15 @@ class ConfirmDialogDialog extends Dialog {
 
  <vaadin-confirm-dialog-overlay
  id="overlay"
+ opened="[[opened]]"
  on-opened-changed="_onOverlayOpened"
  on-mousedown="_bringOverlayToFront"
  on-touchstart="_bringOverlayToFront"
  theme$="[[_theme]]"
  modeless="[[modeless]]"
  with-backdrop="[[!modeless]]"
  resizable$="[[resizable]]"
+ aria-label$="[[ariaLabel]]"
  restore-focus-on-close
  focus-trap
  ></vaadin-confirm-dialog-overlay>
@@ -124,6 +124,16 @@ class ConfirmDialogDialog extends Dialog {
 
  static get properties() {
  return {
+ /**
+ * Set the `aria-label` attribute for assistive technologies like
+ * screen readers. An empty string value for this property (the
+ * default) means that the `aria-label` attribute is not present.
+ */
+ ariaLabel: {
+ type: String,
+ value: '',
+ },
+
  /**
  * Height to be set on the overlay content.
  */
@@ -137,11 +147,6 @@ class ConfirmDialogDialog extends Dialog {
  contentWidth: {
  type: String,
  },
-
- /** @private */
- _overlayElement: {
- type: Object,
- },
  };
  }
 
@@ -152,13 +157,6 @@ class ConfirmDialogDialog extends Dialog {
  ];
  }
 
- /** @protected */
- ready() {
- super.ready();
-
- this._overlayElement = this.$.overlay;
- }
-
  /** @private */
  __updateDimension(overlay, dimension, value) {
  const prop = `--_vaadin-confirm-dialog-content-${dimension}`;