@fluentui/web-components 3.0.0-rc.18 → 3.0.0-rc.19

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 11 May 2026 04:08:54 GMT and should not be manually modified.
+This log was last generated on Wed, 13 May 2026 04:08:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-rc.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.19)
+
+Wed, 13 May 2026 04:08:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.18..@fluentui/web-components_v3.0.0-rc.19)
+
+### Changes
+
+- fix: remove hoisted peer dependency entries ([PR #36184](https://github.com/microsoft/fluentui/pull/36184) by 863023+radium-v@users.noreply.github.com)
+- fix: enhance accessibility attributes for drawer component ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
+- fix keyboard navigation regressions for tree and menu-list ([PR #36118](https://github.com/microsoft/fluentui/pull/36118) by machi@microsoft.com)
+- fix: synchronize compound-button template with button template ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
+- fix: enhance accessibility attributes for dialog component ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
+
 ## [3.0.0-rc.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.18)
 
-Mon, 11 May 2026 04:08:54 GMT 
+Mon, 11 May 2026 04:09:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.17..@fluentui/web-components_v3.0.0-rc.18)
 
 ### Changes

package/custom-elements.json

@@ -13402,11 +13402,6 @@
               "privacy": "public",
               "description": "The dialog element"
             },
-            {
-              "kind": "method",
-              "name": "dialogChanged",
-              "privacy": "protected"
-            },
             {
               "kind": "field",
               "name": "ariaDescribedby",
@@ -13448,32 +13443,13 @@
             },
             {
               "kind": "method",
-              "name": "typeChanged",
-              "privacy": "protected",
+              "name": "emitBeforeToggle",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "prev",
-                  "type": {
-                    "text": "DialogType | undefined"
-                  }
-                },
-                {
-                  "name": "next",
-                  "type": {
-                    "text": "DialogType"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "emitBeforeToggle",
-              "privacy": "public",
               "description": "Method to emit an event before the dialog's open state changes\nHTML spec proposal: https://github.com/whatwg/html/issues/9733"
             },
             {
@@ -13894,14 +13870,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "roleAttrObserver",
-              "type": {
-                "text": "MutationObserver"
-              },
-              "privacy": "protected"
-            },
             {
               "kind": "field",
               "name": "type",
@@ -13914,11 +13882,6 @@
                 "text": "'inline' | 'modal' | 'non-modal'"
               }
             },
-            {
-              "kind": "method",
-              "name": "typeChanged",
-              "privacy": "protected"
-            },
             {
               "kind": "field",
               "name": "ariaLabelledby",
@@ -13949,6 +13912,14 @@
                 "text": "'start' | 'end'"
               }
             },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -14027,16 +13998,6 @@
               "name": "cancelHandler",
               "privacy": "public",
               "description": "Handles cancel events on the drawer."
-            },
-            {
-              "kind": "method",
-              "name": "observeRoleAttr",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "updateDialogRole",
-              "privacy": "protected"
             }
           ],
           "events": [

package/dist/esm/compound-button/compound-button.template.d.ts

@@ -2,12 +2,14 @@ import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { CompoundButton } from './compound-button.js';
 import type { CompoundButtonOptions } from './compound-button.options.js';
 /**
- * The template for the Compound Button component.
+ * Generates a template for the Button component.
+ *
  * @public
  */
 export declare function buttonTemplate<T extends CompoundButton>(options?: CompoundButtonOptions): ElementViewTemplate<T>;
 /**
  * The template for the Button component.
+ *
  * @public
  */
 export declare const template: ElementViewTemplate<CompoundButton>;

package/dist/esm/compound-button/compound-button.template.js

@@ -1,12 +1,16 @@
 import { html, slotted } from '@microsoft/fast-element';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/start-end.js';
 /**
- * The template for the Compound Button component.
+ * Generates a template for the Button component.
+ *
  * @public
  */
 export function buttonTemplate(options = {}) {
     return html `
-    <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}">
+    <template
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keypress="${(x, c) => x.keypressHandler(c.event)}"
+    >
       ${startSlotTemplate(options)}
       <span class="content" part="content">
         <slot ${slotted('defaultSlottedContent')}></slot>
@@ -18,6 +22,7 @@ export function buttonTemplate(options = {}) {
 }
 /**
  * The template for the Button component.
+ *
  * @public
  */
 export const template = buttonTemplate();

package/dist/esm/compound-button/compound-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;2BACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC;QAC3F,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;mBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAEhE,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}

package/dist/esm/dialog/dialog.d.ts

@@ -14,7 +14,6 @@ export declare class Dialog extends FASTElement {
      * @public
      */
     dialog: HTMLDialogElement;
-    protected dialogChanged(): void;
     /**
      * The ID of the element that describes the dialog
      *
@@ -39,14 +38,49 @@ export declare class Dialog extends FASTElement {
      * @public
      */
     type: DialogType;
-    protected typeChanged(prev: DialogType | undefined, next: DialogType): void;
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby(): string | undefined;
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel(): string | null | undefined;
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby(): string | undefined;
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal(): boolean | undefined;
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole(): string | undefined;
+    connectedCallback(): void;
     /**
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
      *
      * @public
      */
-    emitBeforeToggle: () => void;
+    emitBeforeToggle(): void;
     /**
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
@@ -74,10 +108,4 @@ export declare class Dialog extends FASTElement {
      * @returns boolean
      */
     clickHandler(event: Event): boolean;
-    /**
-     * Updates the internal dialog element's attributes based on its type.
-     *
-     * @internal
-     */
-    protected updateDialogAttributes(): void;
 }

package/dist/esm/dialog/dialog.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
 import { DialogType } from './dialog.options.js';
 /**
  * A Dialog Custom HTML Element.
@@ -11,24 +11,6 @@ import { DialogType } from './dialog.options.js';
 export class Dialog extends FASTElement {
     constructor() {
         super(...arguments);
-        /**
-         * The type of the dialog modal
-         *
-         * @public
-         */
-        this.type = DialogType.modal;
-        /**
-         * Method to emit an event before the dialog's open state changes
-         * HTML spec proposal: https://github.com/whatwg/html/issues/9733
-         *
-         * @public
-         */
-        this.emitBeforeToggle = () => {
-            this.$emit('beforetoggle', {
-                oldState: this.dialog.open ? 'open' : 'closed',
-                newState: this.dialog.open ? 'closed' : 'open',
-            });
-        };
         /**
          * Method to emit an event after the dialog's open state changes
          * HTML spec proposal: https://github.com/whatwg/html/issues/9733
@@ -42,11 +24,78 @@ export class Dialog extends FASTElement {
             });
         };
     }
-    dialogChanged() {
-        this.updateDialogAttributes();
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby() {
+        if (this.dialog) {
+            return this.ariaDescribedby;
+        }
+    }
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel() {
+        if (this.dialog) {
+            return this.ariaLabel;
+        }
     }
-    typeChanged(prev, next) {
-        this.updateDialogAttributes();
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby() {
+        if (this.dialog) {
+            return this.ariaLabelledby;
+        }
+    }
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal() {
+        if (this.dialog && this.type !== DialogType.nonModal) {
+            return true;
+        }
+    }
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole() {
+        if (this.dialog && this.type === DialogType.alert) {
+            return 'alertdialog';
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        Updates.enqueue(() => {
+            this.type = this.type ?? DialogType.modal;
+        });
+    }
+    /**
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
+     */
+    emitBeforeToggle() {
+        this.$emit('beforetoggle', {
+            oldState: this.dialog.open ? 'open' : 'closed',
+            newState: this.dialog.open ? 'closed' : 'open',
+        });
     }
     /**
      * Method to show the dialog
@@ -88,28 +137,6 @@ export class Dialog extends FASTElement {
         }
         return true;
     }
-    /**
-     * Updates the internal dialog element's attributes based on its type.
-     *
-     * @internal
-     */
-    updateDialogAttributes() {
-        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');
-        }
-    }
 }
 __decorate([
     observable
@@ -126,4 +153,19 @@ __decorate([
 __decorate([
     attr
 ], Dialog.prototype, "type", void 0);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogDescribedby", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogLabel", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogLabelledby", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogModal", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogRole", null);
 //# sourceMappingURL=dialog.js.map

package/dist/esm/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}

package/dist/esm/dialog/dialog.template.js

@@ -7,9 +7,11 @@ export const template = html `
   <dialog
     class="dialog"
     part="dialog"
-    aria-describedby="${x => x.ariaDescribedby}"
-    aria-labelledby="${x => x.ariaLabelledby}"
-    aria-label="${x => x.ariaLabel}"
+    aria-modal="${x => x.dialogModal}"
+    aria-describedby="${x => x.dialogDescribedby}"
+    aria-labelledby="${x => x.dialogLabelledby}"
+    aria-label="${x => x.dialogLabel}"
+    role="${x => x.dialogRole}"
     @click="${(x, c) => x.clickHandler(c.event)}"
     @cancel="${x => x.hide()}"
     ${ref('dialog')}

package/dist/esm/dialog/dialog.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;wBAIjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;uBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;kBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}
+{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;kBAIvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;uBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;YACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}

package/dist/esm/drawer/drawer.d.ts

@@ -32,7 +32,6 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @tag fluent-drawer
  */
 export declare class Drawer extends FASTElement {
-    protected roleAttrObserver: MutationObserver;
     /**
      * 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.
@@ -40,7 +39,6 @@ export declare class Drawer extends FASTElement {
      * @public
      */
     type: DrawerType;
-    protected typeChanged(): void;
     /**
      * The ID of the element that labels the drawer.
      *
@@ -60,6 +58,7 @@ export declare class Drawer extends FASTElement {
      * @defaultValue start
      */
     position: DrawerPosition;
+    role: string | null;
     /**
      * @public
      * @defaultValue medium
@@ -72,10 +71,42 @@ export declare class Drawer extends FASTElement {
      * @public
      */
     dialog: HTMLDialogElement;
-    /** @internal */
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby(): string | undefined;
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel(): string | null | undefined;
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby(): string | undefined;
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal(): boolean | undefined;
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole(): string | null;
     connectedCallback(): void;
-    /** @internal */
-    disconnectedCallback(): void;
     /**
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
@@ -115,6 +146,4 @@ export declare class Drawer extends FASTElement {
      * @public
      */
     cancelHandler(): void;
-    protected observeRoleAttr(): void;
-    protected updateDialogRole(): void;
 }