From 568078c8957c006764f98b70b6a04748ff251d16 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Thu, 13 Jul 2023 11:45:48 -0700
Subject: [PATCH 1/3] update splitbutton and menu splitbutton to have two touch
 targets if checkable

---
 packages/react/src/components/Button/BaseButton.tsx       | 7 +++++--
 .../ContextualMenuSplitButton.tsx                         | 8 ++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Button/BaseButton.tsx b/packages/react/src/components/Button/BaseButton.tsx
index f066368adfd030..94d0917462d5d7 100644
--- a/packages/react/src/components/Button/BaseButton.tsx
+++ b/packages/react/src/components/Button/BaseButton.tsx
@@ -678,9 +678,12 @@ export class BaseButton extends React.Component<IBaseButtonProps, IBaseButtonSta
       this._dismissMenu();
     }
 
-    if (!this._processingTouch && this.props.onClick) {
+    // toggle split buttons need two separate targets, even for touch
+    const singleTouchTarget = this._processingTouch && !this.props.toggle;
+
+    if (!singleTouchTarget && this.props.onClick) {
       this.props.onClick(ev);
-    } else if (this._processingTouch) {
+    } else if (singleTouchTarget) {
       this._onMenuClick(ev);
     }
   };
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
index e079e4ac9a53d3..02f513807bb3da 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
+++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx
@@ -29,6 +29,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
   private _lastTouchTimeoutId: number | undefined;
   private _processingTouch: boolean;
   private _ariaDescriptionId: string;
+  private _dismissLabelId: string;
 
   private _async: Async;
   private _events: EventGroup;
@@ -45,6 +46,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
 
     this._async = new Async(this);
     this._events = new EventGroup(this);
+    this._dismissLabelId = getId();
   }
 
   public componentDidMount() {
@@ -177,6 +179,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
       isChecked: item.isChecked,
       checked: item.checked,
       iconProps: item.iconProps,
+      id: this._dismissLabelId,
       onRenderIcon: item.onRenderIcon,
       data: item.data,
       'data-is-focusable': false,
@@ -228,6 +231,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
       submenuIconProps: item.submenuIconProps,
       split: true,
       key: item.key,
+      'aria-labelledby': this._dismissLabelId,
     };
 
     const buttonProps = {
@@ -240,7 +244,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
         onMouseMove: this._onItemMouseMoveIcon,
         'data-is-focusable': false,
         'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],
-        'aria-hidden': true,
+        'aria-haspopup': true,
       },
     };
 
@@ -306,7 +310,7 @@ export class ContextualMenuSplitButton extends ContextualMenuItemWrapper {
       return;
     }
 
-    if (this._processingTouch && onItemClick) {
+    if (this._processingTouch && !item.canCheck && onItemClick) {
       return onItemClick(item, ev);
     }
 

From 7fcc12612bc9a2cadc29bc5b2a77c218c0ed7e51 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Thu, 13 Jul 2023 11:54:58 -0700
Subject: [PATCH 2/3] test, update snapshots

---
 .../src/components/Button/Button.test.tsx     | 35 +++++++++++++++++++
 ...alMenuSplitButton.deprecated.test.tsx.snap |  4 ++-
 .../ContextualMenuSplitButton.test.tsx.snap   |  4 ++-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Button/Button.test.tsx b/packages/react/src/components/Button/Button.test.tsx
index 1f824f2099ac04..76191904f950ca 100644
--- a/packages/react/src/components/Button/Button.test.tsx
+++ b/packages/react/src/components/Button/Button.test.tsx
@@ -592,6 +592,41 @@ describe('Button', () => {
       expect(getAllByRole('button')[0].getAttribute('aria-expanded')).toEqual('true');
     });
 
+    it('Touch Start on primary button of toggle SplitButton fires click event', () => {
+      const clickSpy = jest.fn();
+      const { getAllByRole } = render(
+        <DefaultButton
+          text="Create account"
+          split={true}
+          toggle
+          checked={false}
+          onClick={clickSpy}
+          menuProps={{
+            items: [
+              {
+                key: 'emailMessage',
+                text: 'Email message',
+                iconProps: { iconName: 'Mail' },
+              },
+              {
+                key: 'calendarEvent',
+                text: 'Calendar event',
+                iconProps: { iconName: 'Calendar' },
+              },
+            ],
+          }}
+        />,
+      );
+      const primaryButton = getAllByRole('button')[1];
+
+      // in a normal scenario, when we do a touchstart we would also cause a
+      // click event to fire. This doesn't happen in the simulator so we're
+      // manually adding this in.
+      fireEvent.touchStart(primaryButton);
+      userEvent.click(primaryButton);
+      expect(clickSpy).toHaveBeenCalled();
+    });
+
     it('If menu trigger is disabled, pressing down does not trigger menu', () => {
       const { getAllByRole } = render(
         <DefaultButton
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap
index 10f18ed4448a2d..a7a006ced9cada 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap
+++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.deprecated.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`ContextualMenuSplitButton creates a normal split button renders the con
   <button
     className="splitPrimary"
     data-is-focusable={false}
+    id="id__0"
   >
     <div
       className="linkContent"
@@ -49,7 +50,8 @@ exports[`ContextualMenuSplitButton creates a normal split button renders the con
     />
   </span>
   <button
-    aria-hidden={true}
+    aria-haspopup={true}
+    aria-labelledby="id__0"
     className="splitMenu"
     data-is-focusable={false}
     disabled={false}
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap
index 10f18ed4448a2d..a7a006ced9cada 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap
+++ b/packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/__snapshots__/ContextualMenuSplitButton.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`ContextualMenuSplitButton creates a normal split button renders the con
   <button
     className="splitPrimary"
     data-is-focusable={false}
+    id="id__0"
   >
     <div
       className="linkContent"
@@ -49,7 +50,8 @@ exports[`ContextualMenuSplitButton creates a normal split button renders the con
     />
   </span>
   <button
-    aria-hidden={true}
+    aria-haspopup={true}
+    aria-labelledby="id__0"
     className="splitMenu"
     data-is-focusable={false}
     disabled={false}

From 9f64b013ffa18cabd62d233a6fa84ef684878e3b Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Thu, 13 Jul 2023 12:17:33 -0700
Subject: [PATCH 3/3] change file

---
 ...luentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json

diff --git a/change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json b/change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json
new file mode 100644
index 00000000000000..5178e734fe2a12
--- /dev/null
+++ b/change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: checkable splitbutton and split menuitem have two separate touch targets",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}