Fixed screen reader narration of dialogs on Mac.

* Add h tag to dialog headers

Added h1 tag to the title in the dialogs and added a new style for this headers

* Update dialog component to use h1 tag for heading

* Update changelog with solve PR

* Added newline

CHANGELOG.md

@@ -75,6 +75,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1933](https://github.com/microsoft/BotFramework-Emulator/pull/1933)
   - [1934](https://github.com/microsoft/BotFramework-Emulator/pull/1934)
   - [1935](https://github.com/microsoft/BotFramework-Emulator/pull/1935)
+  - [1936](https://github.com/microsoft/BotFramework-Emulator/pull/1936)
 
  - [client] Fixed an issue with the transcripts path input inside of the resource settings dialog in PR [1836](https://github.com/microsoft/BotFramework-Emulator/pull/1836)
  - [client] Implemented HTML app menu for Windows in PR [1893](https://github.com/microsoft/BotFramework-Emulator/pull/1893) 

packages/sdk/ui-react/src/widget/dialog/dialog.scss

@@ -90,3 +90,11 @@
     outline-color: var(--global-focus-outline-color);
   }
 }
+
+.dialog-header {
+  font-family: var(--default-font-family);
+  font-size: 22px;
+  font-weight: 200;
+  margin: 0px 4px 0px 0px;
+  padding: 0;
+}

packages/sdk/ui-react/src/widget/dialog/dialog.scss.d.ts

@@ -4,3 +4,4 @@ export const dialog: string;
 export const footer: string;
 export const cancelButton: string;
 export const cancelButtonOutline: string;
+export const dialogHeader: string;

packages/sdk/ui-react/src/widget/dialog/dialog.tsx

@@ -60,11 +60,11 @@ export class Dialog extends Component<ModalProps, {}> {
           onKeyDown={this.bodyKeyDownHandler}
           role="dialog"
         >
+          <h1 id="dialog-heading" className={`${titleClassName} ${styles.dialogHeader}`}>
+            {title}
+          </h1>
           <button className={styles.cancelButton} aria-label="Close" onClick={this.props.cancel} />
           <div className={styles.cancelButtonOutline} role="presentation"></div>
-          <header className={`${titleClassName}`} id="dialog-heading">
-            {title}
-          </header>
           {filterChildren(children, child => hmrSafeNameComparison(child.type, DialogFooter, true))}
           {filterChildren(children, child => hmrSafeNameComparison(child.type, DialogFooter))}
         </div>