[#1723, #1725, #1726, #1727, #1729] Fixed various dialog accessibility issues.

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [main] New Conversation: send a single conversation update activity including bot and user as members added [1709](https://github.com/microsoft/BotFramework-Emulator/pull/1709)
 - [app] Consolidated application state store and removed the need for explicit state synchronization between the main and renderer processes in PR [1721](https://github.com/microsoft/BotFramework-Emulator/pull/1721)
 - [main] Added logging to OAuth signin link generation flow in PR [1745](https://github.com/microsoft/BotFramework-Emulator/pull/1745)
+- [client] Added a context menu item and inspector button to allow copying an activity's JSON in PR [1801](https://github.com/microsoft/BotFramework-Emulator/pull/1801)
 
 ## Fixed
 - [main] Fixed bug where opening a chat via URL was sending two conversation updates in PR [1735](https://github.com/microsoft/BotFramework-Emulator/pull/1735)
@@ -26,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1787](https://github.com/microsoft/BotFramework-Emulator/pull/1787)
   - [1790](https://github.com/microsoft/BotFramework-Emulator/pull/1790)
   - [1791](https://github.com/microsoft/BotFramework-Emulator/pull/1791)
+  - [1828](https://github.com/microsoft/BotFramework-Emulator/pull/1828)
 
 ## v4.5.2 - 2019 - 07 - 17
 ## Fixed

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.scss

@@ -52,12 +52,66 @@
   }
 }
 
-.file-input {
-  position: absolute;
-  left: 0;
-  height: 100%;
-  z-index: 2;
-  opacity: 0;
+/* Imitates <PrimaryButton /> component styles */
+.browse-button {
+  & > input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    pointer-events: none;
+    opacity: 0;
+
+    &:focus ~ label {
+      outline: 1px solid var(--dialog-link-focus-color);
+      background-color: var(--p-button-bg-focus);
+
+      &::after {
+        border: var(--p-button-border-focus);
+      }
+    }
+  }
+
+  & > label {
+    display: block;
+    border: none;
+    position: relative;
+    margin-bottom: 1px;
+    min-width: 104px;
+    min-height: 21px;
+    line-height: 21px;
+    font-size: 12px;
+    text-align: center;
+    font-weight: bold;
+    color: var(--p-button-color);
+    background-color: var(--p-button-bg);
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 1;
+      border: var(--p-button-border);
+    }
+
+    &:hover {
+      background-color: var(--p-button-bg-hover);
+
+      &::after {
+        border: var(--p-button-border-hover);
+      }
+    }
+
+    &:active {
+      background-color: var(--p-button-bg-active);
+
+      &::after {
+        border: var(--p-button-border-active);
+      }
+    }
+  }
 }
 
 .multi-input-row {

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.scss.d.ts

@@ -3,7 +3,6 @@ export const browseButton: string;
 export const inputContainer: string;
 export const padded: string;
 export const inputContainerRow: string;
-export const fileInput: string;
 export const multiInputRow: string;
 export const themeOverrides: string;
 export const autoCompleteBar: string;

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.tsx

@@ -234,16 +234,17 @@ export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogSt
   private get browseButton(): React.ReactNode {
     if (!this.state.isAzureGov && !this.state.isDebug) {
       return (
-        <PrimaryButton className={openBotStyles.browseButton}>
-          Browse
+        <div className={openBotStyles.browseButton}>
           <input
             accept=".bot"
             className={openBotStyles.fileInput}
+            id="openBotBrowse"
             name="botUrl"
             onChange={this.onInputChange}
             type="file"
           />
-        </PrimaryButton>
+          <label htmlFor="openBotBrowse">Browse</label>
+        </div>
       );
     }
     return null;

packages/app/client/src/ui/editor/welcomePage/welcomePage.scss

@@ -22,7 +22,7 @@
   width: auto;
 
   a {
-    color: var(--focused-selected-list-item-bg);
+    color: var(--link-color);
     min-width: 0;
   }
 
@@ -62,7 +62,7 @@
 .cta-link {
   background-color: transparent;
   border: 1px solid transparent;
-  color: var(--focused-selected-list-item-bg);
+  color: var(--link-color);
   cursor: pointer;
   font-weight: 600;
   padding: 0;

packages/app/client/src/ui/styles/themes/dark.css

@@ -140,6 +140,9 @@ html {
   --dialog-bg: var(--neutral-2);
   --dialog-color: var(--neutral-14);
   --dialog-error-color: var(--error-text);
+  --dialog-close-icon-color: var(--neutral-14);
+  --dialog-link-color: #0E639C;
+  --dialog-link-focus-color: #0E639C;
 
   /* Services Explorer */
   --explorer-panel-bg: var(--neutral-14);

packages/app/client/src/ui/styles/themes/high-contrast.css

@@ -139,6 +139,9 @@ html {
   --dialog-bg: var(--neutral-16);
   --dialog-color: var(--neutral-4);
   --dialog-error-color: #F38518;
+  --dialog-close-icon-color: var(--neutral-4);
+  --dialog-link-color: var(--link-color);
+  --dialog-link-focus-color: var(--global-focus-outline-color);
 
   /* Services Explorer */
   --explorer-panel-bg: var(--neutral-16);

packages/app/client/src/ui/styles/themes/light.css

@@ -138,6 +138,9 @@ html {
   --dialog-bg: var(--neutral-2);
   --dialog-color: var(--neutral-14);
   --dialog-error-color: var(--error-text);
+  --dialog-close-icon-color: var(--neutral-14);
+  --dialog-link-color: #0E639C;
+  --dialog-link-focus-color: #0E639C;
 
   /* Services Explorer */
   --explorer-panel-bg: var(--neutral-3);
@@ -205,7 +208,7 @@ html {
   --status-bar-color: #FFFFFF;
 
   /* Links */
-  --link-color: #3062D6;
+  --link-color: #007ACC;
   --link-color-disabled: #C8C8C8;
 
   /* Split Button */

packages/sdk/ui-react/src/widget/autoComplete/autoComplete.spec.tsx

@@ -242,13 +242,15 @@ describe('<AutoComplete />', () => {
 
   it('should handle an escape key press', () => {
     const mockPreventDefault = jest.fn(() => null);
+    const mockStopPropagation = jest.fn(() => null);
     instance.setState({ selectedIndex: 2, showResults: true });
-    instance.onKeyDown({ key: 'Escape', preventDefault: mockPreventDefault });
+    instance.onKeyDown({ key: 'Escape', preventDefault: mockPreventDefault, stopPropagation: mockStopPropagation });
 
     expect(wrapper.state().currentInput).toBe('');
     expect(wrapper.state().selectedIndex).toBe(undefined);
     expect(wrapper.state().showResults).toBe(false);
     expect(mockPreventDefault).toHaveBeenCalled();
+    expect(mockStopPropagation).toHaveBeenCalled();
     expect(mockOnChange).toHaveBeenCalledWith('');
   });
 

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

@@ -265,6 +265,7 @@ export class AutoComplete extends Component<AutoCompleteProps, AutoCompleteState
       // clears the textbox, selection, and closes the listbox
       case 'Escape': {
         event.preventDefault();
+        event.stopPropagation();
         const currentInput = '';
         if (this.props.onChange && typeof this.props.onChange === 'function') {
           this.props.onChange(currentInput);

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

@@ -27,6 +27,14 @@
     font-size: 21px;
     font-weight: 100;
   }
+
+  a {
+    color: var(--dialog-link-color);
+
+    &:focus {
+      outline: 1px solid var(--dialog-link-focus-color);
+    }
+  }
 }
 
 .footer {
@@ -52,16 +60,31 @@
   }
 }
 
-.cancel-button {
+.cancel-button,
+.cancel-button-outline {
+  display: block;
   position: absolute;
   width: 21px;
   height: 21px;
   border: none;
   top: 12px;
   right: 12px;
+  outline: none;
+}
+
+.cancel-button-outline {
+  pointer-events: none;
+}
+
+.cancel-button {
   font: initial;
   -webkit-mask: url('../../media/ic_cancel.svg');
-  display: block;
-  background-color: var(--neutral-14);
+  background-color: var(--dialog-close-icon-color);
   cursor: pointer;
+
+  &:focus + .cancel-button-outline {
+    outline-width: var(--global-focus-outline-width);
+    outline-style: var(--global-focus-outline-style);
+    outline-color: var(--global-focus-outline-color);
+  }
 }

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

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

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

@@ -54,10 +54,11 @@ export class Dialog extends Component<ModalProps, {}> {
     return (
       <>
         <div className={`${styles.modal} ${modalStyle}`}>&nbsp;</div>
-        <div className={`${className} ${styles.dialog} dialog`}>
+        <div className={`${className} ${styles.dialog} dialog`} onKeyDown={this.bodyKeyDownHandler}>
           <header className={`${titleClassName}`} role="heading">
             {title}
             <button className={styles.cancelButton} aria-label="Close" onClick={this.props.cancel} />
+            <div className={styles.cancelButtonOutline} role="presentation"></div>
           </header>
           {filterChildren(children, child => hmrSafeNameComparison(child.type, DialogFooter, true))}
           {filterChildren(children, child => hmrSafeNameComparison(child.type, DialogFooter))}
@@ -66,15 +67,7 @@ export class Dialog extends Component<ModalProps, {}> {
     );
   }
 
-  public componentWillMount(): void {
-    document.body.addEventListener('keydown', this.bodyKeyDownHandler);
-  }
-
-  public componentWillUnmount(): void {
-    document.body.removeEventListener('keydown', this.bodyKeyDownHandler);
-  }
-
-  private bodyKeyDownHandler = (event: KeyboardEvent): void => {
+  private bodyKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     if (event.key !== 'Escape') {
       return;
     }