Fixed focus order a11y issue with resources dialog.

microsoft · Sep 26, 2019 · 2eaf596 · 2eaf596
1 parent 1c1c498
commit 2eaf596
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -61,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1877](https://github.com/microsoft/BotFramework-Emulator/pull/1877)
   - [1879](https://github.com/microsoft/BotFramework-Emulator/pull/1879)
   - [1880](https://github.com/microsoft/BotFramework-Emulator/pull/1880)
+  - [1883](https://github.com/microsoft/BotFramework-Emulator/pull/1883)
 
  - [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)
 

diff --git a/packages/sdk/ui-react/src/widget/dialog/dialog.tsx b/packages/sdk/ui-react/src/widget/dialog/dialog.tsx
@@ -60,11 +60,11 @@ export class Dialog extends Component<ModalProps, {}> {
           onKeyDown={this.bodyKeyDownHandler}
           role="dialog"
         >
+          <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>
-          <button className={styles.cancelButton} aria-label="Close" onClick={this.props.cancel} />
-          <div className={styles.cancelButtonOutline} role="presentation"></div>
           {filterChildren(children, child => hmrSafeNameComparison(child.type, DialogFooter, true))}
           {filterChildren(children, child => hmrSafeNameComparison(child.type, DialogFooter))}
         </div>