refactor: move dialog role to CRUD dialog (#9806)

* refactor: move dialog role to CRUD dialog

* Revert "refactor: move dialog role to CRUD dialog"

This reverts commit 15880a2.

* refactor: move dialog role to CRUD dialog

Author: sissbruecker

packages/crud/src/vaadin-crud-dialog.js

@@ -128,10 +128,6 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
 
   static get properties() {
     return {
-      ariaLabel: {
-        type: String,
-      },
-
       fullscreen: {
         type: Boolean,
       },
@@ -150,7 +146,6 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
         popover="manual"
         .owner="${this.crudElement}"
         .opened="${this.opened}"
-        aria-label="${ifDefined(this.ariaLabel)}"
         @opened-changed="${this._onOverlayOpened}"
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
@@ -160,7 +155,6 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
         ?fullscreen="${this.fullscreen}"
-        role="dialog"
         focus-trap
         exportparts="backdrop, overlay, header, content, footer"
       >
@@ -173,6 +167,13 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
     `;
   }
 
+  /** @protected */
+  firstUpdated(props) {
+    super.firstUpdated(props);
+
+    this.role = 'dialog';
+  }
+
   /** @private **/
   __cancel() {
     this.dispatchEvent(new CustomEvent('cancel'));

packages/crud/src/vaadin-crud.js

@@ -243,14 +243,14 @@ class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
         ? html`
             <vaadin-crud-dialog
               id="dialog"
+              aria-label="${ifDefined(this.__dialogAriaLabel)}"
+              theme="${ifDefined(this._theme)}"
+              exportparts="backdrop, overlay, header, content, footer"
               .crudElement="${this}"
               .opened="${this.editorOpened}"
               .fullscreen="${this._fullscreen}"
-              .ariaLabel="${this.__dialogAriaLabel}"
               .noCloseOnOutsideClick="${this.__isDirty}"
               .noCloseOnEsc="${this.__isDirty}"
-              theme="${ifDefined(this._theme)}"
-              exportparts="backdrop, overlay, header, content, footer"
               @cancel="${this.__cancel}"
             >
               <slot name="header" slot="header"></slot>

packages/crud/test/a11y.test.js

@@ -309,22 +309,22 @@ describe('a11y', () => {
       await nextRender();
     });
 
-    it('should set correct role attribute to the dialog overlay', async () => {
+    it('should set correct role attribute to the dialog', async () => {
       newButton.click();
       await nextRender();
-      expect(dialog.$.overlay.getAttribute('role')).to.equal('dialog');
+      expect(dialog.getAttribute('role')).to.equal('dialog');
     });
 
     it('should set correct aria-label to the new item dialog', async () => {
       newButton.click();
       await nextRender();
-      expect(dialog.$.overlay.getAttribute('aria-label')).to.equal('New item');
+      expect(dialog.getAttribute('aria-label')).to.equal('New item');
     });
 
     it('should set correct aria-label to the edit item dialog', async () => {
       editButtons[0].click();
       await nextRender();
-      expect(dialog.$.overlay.getAttribute('aria-label')).to.equal('Edit item');
+      expect(dialog.getAttribute('aria-label')).to.equal('Edit item');
     });
   });
 

packages/crud/test/dom/__snapshots__/crud.test.snap.js

@@ -261,7 +261,7 @@ snapshots["vaadin-crud host default"] =
 `;
 /* end snapshot vaadin-crud host default */
 
-snapshots["vaadin-crud shadow default"] =
+snapshots["vaadin-crud shadow default"] = 
 `<div id="container">
   <div id="main">
     <slot name="grid">
@@ -280,6 +280,7 @@ snapshots["vaadin-crud shadow default"] =
 <vaadin-crud-dialog
   exportparts="backdrop, overlay, header, content, footer"
   id="dialog"
+  role="dialog"
 >
   <slot
     name="header"