[fix]: Accessible name for dialog (#34519)

Author: eljefe223

change/@fluentui-web-components-bad3fcd8-7b1d-4f0f-85f6-157f57075cdc.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Accesible name and title for dialog",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -123,13 +123,13 @@ export const Default: Story = {
       </p>
     `,
 
-    titleSlottedContent: () => html` <div slot="title">Dialog Body</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Dialog Body</h2> `,
   },
 };
 
 export const Basic: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">Basic</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Basic</h2> `,
     slottedContent: () => html`
       <p>
         A dialog should have no more than
@@ -162,14 +162,14 @@ export const Actions: Story = {
     titleActionSlottedContent: () => html`
       <fluent-button appearance="transparent" icon-only slot="title-action"> ${info20Regular} </fluent-button>
     `,
-    titleSlottedContent: () => html` <div slot="title">Actions</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Actions</h2> `,
   },
 };
 
 export const NoClose: Story = {
   args: {
     closeSlottedContent: () => html``,
-    titleSlottedContent: () => html` <div slot="title">No Close Slot</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">No Close Slot</h2> `,
     slottedContent: () => html`
       <p>Omitting the close slot will prevent the default close button from being rendered in a non-modal dialog.</p>
     `,
@@ -181,7 +181,7 @@ export const CustomClose: Story = {
     slottedContent: () => html`
       <p>This dialog has a custom <code>close</code> slot that is rendered in place of the default close button.</p>
     `,
-    titleSlottedContent: () => html` <div slot="title">Custom Title Action</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Custom Title Action</h2> `,
 
     closeSlottedContent: () => html`
       <fluent-button slot="close" appearance="transparent" icon-only @click="${() => alert('This is a custom action')}">

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

@@ -79,6 +79,12 @@ export const styles = css`
     margin-inline-start: auto;
   }
 
+  ::slotted([slot='title']) {
+    font: inherit;
+    padding: 0;
+    margin: 0;
+  }
+
   /* align  title content to the end when there is no title*/
   :not(:has(:is([slot='title'], [slot='title-action']))) .title {
     justify-content: end;

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

@@ -57,7 +57,12 @@ const closeTemplate = html`
 
 const storyTemplate = html<StoryArgs<FluentDialog & FluentDialogBody>>`
   <fluent-button @click="${story => story.storyDialog?.show()}">Open Dialog</fluent-button>
-  <fluent-dialog id="dialog-default" type="${story => story.type}" ${ref('storyDialog')}>
+  <fluent-dialog
+    id="dialog-default"
+    type="${story => story.type}"
+    ${ref('storyDialog')}
+    aria-label="${story => story.ariaLabel}"
+  >
     <fluent-dialog-body>
       ${story => story.actionSlottedContent?.()} ${story => story.slottedContent?.()}
       ${story => story.titleActionSlottedContent?.()} ${story => story.closeSlottedContent?.()}
@@ -100,7 +105,8 @@ export default {
 
 export const Default: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">Default Dialog</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Default Dialog</h2> `,
+    ariaLabel: 'Default Dialog',
     slottedContent: () => html`
       <p>
         The dialog component is a window overlaid on either the primary window or another dialog window. Windows under a
@@ -114,7 +120,8 @@ export const Default: Story = {
 
 export const WithTitleAction: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">Title Action Slot</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Title Action Slot</h2> `,
+    ariaLabel: 'Title Action Slot',
     titleActionSlottedContent: () => html`
       <fluent-button appearance="transparent" icon-only slot="title-action"> ${info20Regular} </fluent-button>
     `,
@@ -126,7 +133,8 @@ export const WithTitleAction: Story = {
 export const ModalType: Story = {
   args: {
     type: DialogType.modal,
-    titleSlottedContent: () => html` <div slot="title">Modal</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Modal</h2> `,
+    ariaLabel: 'Model',
     slottedContent: () => html`
       <p>
         A modal is a type of dialog that temporarily halts the main workflow to convey a significant message or require
@@ -144,7 +152,8 @@ export const NonModalType: Story = {
   render: renderComponent(html<StoryArgs<FluentDialog>>` <div style="min-height: 300px">${storyTemplate}</div> `),
   args: {
     type: DialogType.nonModal,
-    titleSlottedContent: () => html` <div slot="title">Non-modal</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Non-modal</h2> `,
+    ariaLabel: 'Non-modal',
     slottedContent: () => html`
       <p>
         A non-modal dialog by default presents no backdrop, allowing elements outside of the dialog to be interacted
@@ -165,7 +174,8 @@ export const AlertType: Story = {
   args: {
     type: DialogType.alert,
     closeSlottedContent: () => html``,
-    titleSlottedContent: () => html` <div slot="title">Non-modal</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Alert</h2> `,
+    ariaLabel: 'Alert',
     actionSlottedContent: () => closeButtonTemplate,
     slottedContent: () => html`
       <p>
@@ -179,7 +189,8 @@ export const AlertType: Story = {
 
 export const Actions: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">Actions</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Actions</h2> `,
+    ariaLabel: 'Actions',
     actionSlottedContent: () => html`
       <fluent-button size="small" slot="action">Something</fluent-button>
       <fluent-button size="small" slot="action">Something Else</fluent-button>
@@ -215,13 +226,15 @@ export const CustomClose: Story = {
         and a custom icon. Clicking the button will trigger a JavaScript alert.
       </p>
     `,
-    titleSlottedContent: () => html` <div slot="title">Custom Close Slot</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Custom Close Slot</h2> `,
+    ariaLabel: 'Custom Close Slot',
   },
 };
 
 export const NoClose: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">No Close Slot</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">No Close Slot</h2> `,
+    ariaLabel: 'No Close Slot',
     closeSlottedContent: () => html``,
     slottedContent: () => html`
       <p>
@@ -236,13 +249,15 @@ export const NoClose: Story = {
 export const ModalWithNoTitleOrTitleActions: Story = {
   args: {
     type: DialogType.modal,
+    ariaLabel: 'No Title',
     slottedContent: () => html` <p>A dialog without a <code>title</code> slot or <code>title-action</code> slot</p> `,
   },
 };
 
 export const ModalWithNoTitle: Story = {
   args: {
     type: DialogType.modal,
+    ariaLabel: 'No Title',
     titleActionSlottedContent: () => html`
       <fluent-button appearance="transparent" icon-only slot="title-action"> ${info20Regular} </fluent-button>
     `,
@@ -273,7 +288,8 @@ export const AlertWithNoTitleOrActions: Story = {
 
 export const TwoColumnLayout: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">Two Column Layout</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Two Column Layout</h2> `,
+    ariaLabel: 'Two Column Layout',
     slottedContent: () => html<StoryArgs<FluentDialog>>`
       <div style="margin-bottom: 12px;">
         <fluent-text block>
@@ -317,7 +333,8 @@ export const TwoColumnLayout: Story = {
 
 export const ScrollingLongContent: Story = {
   args: {
-    titleSlottedContent: () => html` <div slot="title">Scrolling Long Content</div> `,
+    titleSlottedContent: () => html` <h2 slot="title">Scrolling Long Content</h2> `,
+    ariaLabel: 'Scrolling Long Content',
     slottedContent: () => html`
       <p>
         By default content provided in the default slot should grow until it fits viewport size. Overflow content will