From 701983222cc76680415d4ae069a28bcecc0cfd02 Mon Sep 17 00:00:00 2001
From: Denise Scollo <dens.scollo@gmail.com>
Date: Mon, 2 Dec 2019 17:11:15 -0300
Subject: [PATCH] Fixed VoiceOver narration issue with Split Button (#2012)

* Add auxiliary label for splitButton

* Fix imports order

* Update changelog

* Rename property and change default value

* Remove extra space in CHANGELOG
---
 CHANGELOG.md                                         |  1 +
 .../app/client/src/ui/editor/emulator/emulator.tsx   |  2 ++
 .../ui-react/src/widget/splitButton/splitButton.tsx  | 12 ++++++++++--
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3b3acb5f..5747e79d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [2002](https://github.com/microsoft/BotFramework-Emulator/pull/2002)
   - [2009](https://github.com/microsoft/BotFramework-Emulator/pull/2009)
   - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010)
+  - [2012](https://github.com/microsoft/BotFramework-Emulator/pull/2012)
 
 - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998)
 
diff --git a/packages/app/client/src/ui/editor/emulator/emulator.tsx b/packages/app/client/src/ui/editor/emulator/emulator.tsx
index dd916402d..4e1d0556c 100644
--- a/packages/app/client/src/ui/editor/emulator/emulator.tsx
+++ b/packages/app/client/src/ui/editor/emulator/emulator.tsx
@@ -48,6 +48,7 @@ import {
 
 import { Document, SplitterSize } from '../../../state/reducers/editor';
 import { debounce } from '../../../utils';
+import { isMac } from '../../../../../main/src/utils/platform';
 
 import { ChatPanelContainer } from './chatPanel';
 import LogPanel from './logPanel/logPanel';
@@ -304,6 +305,7 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
                   options={[NewUserId, SameUserId]}
                   onClick={this.onStartOverClick}
                   buttonRef={this.setRestartButtonRef}
+                  submenuLabel={isMac() ? 'Restart conversation sub menu' : ''}
                 />
                 <button
                   role={'menuitem'}
diff --git a/packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx b/packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx
index cf8d7abf6..f2427d148 100644
--- a/packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx
+++ b/packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx
@@ -46,6 +46,7 @@ export interface SplitButtonProps {
   options?: string[];
   buttonRef?: (ref: HTMLButtonElement) => void;
   selected?: number;
+  submenuLabel?: string;
 }
 
 export interface SplitButtonState {
@@ -66,7 +67,14 @@ export class SplitButton extends React.Component<SplitButtonProps, SplitButtonSt
   }
 
   public render(): JSX.Element {
-    const { buttonClass = '', defaultLabel = '', disabled = false, id = '', options = [] } = this.props;
+    const {
+      buttonClass = '',
+      defaultLabel = '',
+      disabled = false,
+      id = '',
+      options = [],
+      submenuLabel = '',
+    } = this.props;
     const { expanded, selected } = this.state;
     const {
       caretRef,
@@ -95,7 +103,7 @@ export class SplitButton extends React.Component<SplitButtonProps, SplitButtonSt
           </button>
           <div className={styles.separator} aria-hidden={'true'} />
           <button
-            aria-label={defaultLabel}
+            aria-label={submenuLabel || defaultLabel}
             className={styles.caretButton + expandedClass}
             ref={setCaretRef}
             onClick={onClickCaret}