feat: support SSR in dialog, drawer, field, slider, textarea

packages/web-components/src/dialog/dialog.template.ts

@@ -8,11 +8,8 @@ import { DialogType } from './dialog.options.js';
  */
 export const template: ElementViewTemplate<Dialog> = html`
   <dialog
-    role="${x => (x.type === DialogType.alert ? 'alertdialog' : 'dialog')}"
-    type="${x => x.type}"
     class="dialog"
     part="dialog"
-    aria-modal="${x => (x.type === DialogType.modal || x.type === DialogType.alert ? 'true' : void 0)}"
     aria-describedby="${x => x.ariaDescribedby}"
     aria-labelledby="${x => x.ariaLabelledby}"
     aria-label="${x => x.ariaLabel}"

packages/web-components/src/dialog/dialog.ts

@@ -36,6 +36,29 @@ export class Dialog extends FASTElement {
    */
   @attr
   public type: DialogType = DialogType.modal;
+  protected typeChanged() {
+    if (!this.dialog) {
+      return;
+    }
+
+    if (this.type === DialogType.alert) {
+      this.dialog.setAttribute('role', 'alertdialog');
+    } else {
+      this.dialog.removeAttribute('role');
+    }
+
+    if (this.type !== DialogType.nonModal) {
+      this.dialog.setAttribute('aria-modal', 'true');
+    } else {
+      this.dialog.removeAttribute('aria-modal');
+    }
+  }
+
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+    this.typeChanged();
+  }
 
   /**
    * @public

packages/web-components/src/drawer/drawer.template.ts

@@ -10,16 +10,13 @@ export function drawerTemplate<T extends Drawer>(): ElementViewTemplate<T> {
     <dialog
       class="dialog"
       part="dialog"
-      role="${x => (x.type === 'modal' ? 'dialog' : x.role)}"
-      aria-modal="${x => (x.type === 'modal' ? 'true' : void 0)}"
       aria-describedby="${x => x.ariaDescribedby}"
       aria-labelledby="${x => x.ariaLabelledby}"
       aria-label="${x => x.ariaLabel}"
       size="${x => x.size}"
       position="${x => x.position}"
-      type="${x => x.type}"
       @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
-      @cancel="${(x, c) => x.hide()}"
+      @cancel="${x => x.hide()}"
       ${ref('dialog')}
     >
       <slot></slot>

packages/web-components/src/drawer/drawer.ts

@@ -32,13 +32,28 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @tag fluent-drawer
  */
 export class Drawer extends FASTElement {
+  private roleAttrObserver!: MutationObserver;
+
   /**
    * @public
    * Determines whether the drawer should be displayed as modal or non-modal
    * When rendered as a modal, an overlay is applied over the rest of the view.
    */
   @attr
   public type: DrawerType = DrawerType.modal;
+  protected typeChanged() {
+    if (!this.dialog) {
+      return;
+    }
+
+    this.updateDialogRole();
+
+    if (this.type === DrawerType.modal) {
+      this.dialog.setAttribute('aria-modal', 'true');
+    } else {
+      this.dialog.removeAttribute('aria-modal');
+    }
+  }
 
   /**
    * @public
@@ -77,6 +92,19 @@ export class Drawer extends FASTElement {
   @observable
   public dialog!: HTMLDialogElement;
 
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+    this.typeChanged();
+    this.observeRoleAttr();
+  }
+
+  /** @internal */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.roleAttrObserver.disconnect();
+  }
+
   /**
    * @public
    * Method to emit an event after the dialog's open state changes
@@ -140,4 +168,26 @@ export class Drawer extends FASTElement {
     }
     return true;
   }
+
+  private observeRoleAttr() {
+    if (this.roleAttrObserver) {
+      return;
+    }
+
+    this.roleAttrObserver = new MutationObserver(() => {
+      this.updateDialogRole();
+    });
+    this.roleAttrObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ['role'],
+    });
+  }
+
+  private updateDialogRole() {
+    console.log(this.role);
+    if (!this.dialog) {
+      return;
+    }
+    this.dialog.role = this.type === DrawerType.modal ? 'dialog' : this.role;
+  }
 }