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

Author: denscollo

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)
 

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'}

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}