fix: v8 SplitButton and split MenuItem have two touch targets when checkable

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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);
     }
   };

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

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);
     }
 

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}

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}