Fixed Restart conversation menu accessibility

* #1744 Fix Restart conversation menu * Update CHANGELOG.md * Clean up code (oops) * Test fix & code cleanup
microsoft · Sep 6, 2019 · e434a70 · e434a70
1 parent 57bf5b6
commit e434a70
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1841](https://github.com/microsoft/BotFramework-Emulator/pull/1841)
   - [1842](https://github.com/microsoft/BotFramework-Emulator/pull/1842)
   - [1843](https://github.com/microsoft/BotFramework-Emulator/pull/1843)
+  - [1844](https://github.com/microsoft/BotFramework-Emulator/pull/1844)
   - [1845](https://github.com/microsoft/BotFramework-Emulator/pull/1845)
 
  - [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/app/client/src/ui/editor/emulator/emulator.spec.tsx b/packages/app/client/src/ui/editor/emulator/emulator.spec.tsx
@@ -227,7 +227,7 @@ describe('<EmulatorContainer/>', () => {
     const defaultView = instance.renderDefaultView();
 
     expect(defaultView).not.toBeNull();
-    expect(defaultView.key).toEqual('convo1');
+    expect(defaultView.props.children[1].key).toEqual('convo1');
   });
 
   it('should get the veritcal splitter sizes', () => {

diff --git a/packages/app/client/src/ui/editor/emulator/emulator.tsx b/packages/app/client/src/ui/editor/emulator/emulator.tsx
@@ -281,7 +281,7 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
 
     const { mode, document } = this.props;
     return (
-      <div className={styles.emulator} key={this.getConversationId()}>
+      <div className={styles.emulator}>
         <div className={styles.header}>
           <ToolBar>
             {mode === 'debug' && (
@@ -302,17 +302,19 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
                   onClick={this.onStartOverClick}
                   buttonRef={this.setRestartButtonRef}
                 />
-                <button
-                  className={`${styles.saveIcon} ${styles.toolbarIcon || ''}`}
-                  onClick={this.onExportTranscriptClick}
-                >
-                  Save transcript
-                </button>
+                <div role="menuitem">
+                  <button
+                    className={`${styles.saveIcon} ${styles.toolbarIcon || ''}`}
+                    onClick={this.onExportTranscriptClick}
+                  >
+                    Save transcript
+                  </button>
+                </div>
               </>
             )}
           </ToolBar>
         </div>
-        <div className={`${styles.content} ${styles.vertical}`}>
+        <div key={this.getConversationId()} className={`${styles.content} ${styles.vertical}`}>
           <Splitter
             orientation="vertical"
             primaryPaneIndex={0}

diff --git a/packages/app/client/src/ui/editor/emulator/toolbar/toolbar.tsx b/packages/app/client/src/ui/editor/emulator/toolbar/toolbar.tsx
@@ -35,4 +35,8 @@ import * as React from 'react';
 
 import * as styles from './toolbar.scss';
 
-export const ToolBar = (props: { children: React.ReactNode }) => <div className={styles.toolbar}>{props.children}</div>;
+export const ToolBar = (props: { children: React.ReactNode }) => (
+  <div role="menubar" className={styles.toolbar}>
+    {props.children}
+  </div>
+);
diff --git a/packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx b/packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx
@@ -89,16 +89,20 @@ export class SplitButton extends React.Component<SplitButtonProps, SplitButtonSt
             id={id}
             onClick={onClickDefault}
             ref={setButtonRef}
+            role={'menuitem'}
           >
             <span>{defaultLabel}</span>
           </button>
           <div className={styles.separator} />
           <button
+            aria-label={defaultLabel}
             className={styles.caretButton + expandedClass}
             ref={setCaretRef}
             onClick={onClickCaret}
-            aria-haspopup={'listbox'}
+            aria-expanded={expanded}
+            aria-haspopup={true}
             disabled={disabled}
+            role={'menuitem'}
           />
         </div>
         <SplitButtonPanel

diff --git a/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.tsx b/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.tsx
@@ -84,7 +84,7 @@ export class SplitButtonPanel extends React.Component<SplitButtonPanelProps> {
           className={styles.panel}
           style={inlineStyle}
           ref={this.setPanelRef}
-          role={'listbox'}
+          role={'menu'}
           tabIndex={-1}
           aria-activedescendant={this.getOptionId(selected)}
           onKeyDown={onKeyDown}
@@ -97,7 +97,7 @@ export class SplitButtonPanel extends React.Component<SplitButtonPanelProps> {
                 id={this.getOptionId(index)}
                 key={option}
                 className={styles.option + selectedClass}
-                role={'option'}
+                role={'menuitem'}
                 aria-selected={isSelected}
                 onClick={e => this.onSelectOption(e, index)}
               >