Operate Dialog in open mode to ensure accessible focus behavior (#15502)

* operate dialog in open mode to ensure accessible focus behavior is supported

* Change files

change/@fluentui-web-components-2020-10-13-15-51-52-users-chhol-reset-dialog-to-open-mode.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "operate dialog in open mode to ensure accessible focus behavior is supported",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-13T22:51:52.037Z"
+}

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

@@ -1,5 +1,6 @@
 import { FluentDesignSystemProvider } from '../design-system-provider';
 import DialogTemplate from './fixtures/dialog.html';
+import DialogFastButtonsTemplate from './fixtures/dialog-button-test.html';
 import { FluentDialog } from './';
 
 // Prevent tree-shaking
@@ -11,3 +12,4 @@ export default {
 };
 
 export const Dialog = (): string => DialogTemplate;
+export const DialogButtonTest = (): string => DialogFastButtonsTemplate;

packages/web-components/src/dialog/fixtures/dialog-button-test.html

@@ -0,0 +1,7 @@
+<fluent-design-system-provider use-defaults>
+  <fluent-dialog id="foo" aria-label="Simple dialog" modal="true">
+    <h2>Dialog with text and fluent buttons. The first button should receive focus</h2>
+    <fluent-button tabindex="0" id="element">Button Text</fluent-button>
+    <fluent-button tabindex="0" id="element">Button Text</fluent-button>
+  </fluent-dialog>
+</fluent-design-system-provider>

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

@@ -15,9 +15,6 @@ import { DialogStyles as styles } from './dialog.styles';
   name: 'fluent-dialog',
   template,
   styles,
-  shadowOptions: {
-    mode: 'closed',
-  },
 })
 export class FluentDialog extends Dialog {}