From ab10657f3444cd2e34c33cf1e7ed1e3046ea6a1c Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Mon, 17 Jul 2023 14:15:55 +0300
Subject: [PATCH] refactor: update confirm-dialog to not use dialog extension
 (#6166)

---
 .../src/vaadin-confirm-dialog-overlay.js      | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js b/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js
index d1cf070251..c04332df10 100644
--- a/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js
+++ b/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,6 +107,7 @@ class ConfirmDialogDialog extends Dialog {
 
       <vaadin-confirm-dialog-overlay
         id="overlay"
+        opened="[[opened]]"
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
@@ -116,6 +115,7 @@ class ConfirmDialogDialog extends Dialog {
         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}`;