feat: adds disableButtonEnhancement property on triggers

change/@fluentui-react-dialog-492b7510-f518-4c17-a929-c500874ec6fc.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: adds disableButtonEnhancement property on DialogTrigger",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-2a082257-9573-43fe-99e1-a4ce48003c46.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds disableButtonEnhancement property on MenuTrigger",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-2a257879-7e46-4b0d-82f2-9dd83e7fcd36.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds disableButtonEnhancement property on PopoverTrigger",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/etc/react-dialog.api.md

@@ -176,6 +176,7 @@ export type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType
 // @public (undocumented)
 export type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
     action?: DialogTriggerAction;
+    disableButtonEnhancement?: boolean;
 };
 
 // @public (undocumented)

packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx

@@ -35,7 +35,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<
       required: modalType === 'non-modal',
       defaultProps: {
         children: (
-          <DialogTrigger action="close">
+          <DialogTrigger disableButtonEnhancement action="close">
             <button
               className={internalStyles.button}
               // TODO: find a better way to add internal labels

packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.test.tsx

@@ -34,7 +34,7 @@ describe('DialogTrigger', () => {
    */
   it('renders a default state', () => {
     const component = renderer.create(
-      <DialogTrigger>
+      <DialogTrigger disableButtonEnhancement>
         <button>Dialog trigger</button>
       </DialogTrigger>,
     );
@@ -46,7 +46,7 @@ describe('DialogTrigger', () => {
     // Arrange
     const ref = jest.fn();
     render(
-      <DialogTrigger>
+      <DialogTrigger disableButtonEnhancement>
         <button ref={ref}>Trigger</button>
       </DialogTrigger>,
     );
@@ -58,7 +58,6 @@ describe('DialogTrigger', () => {
         <button
           aria-haspopup="dialog"
           data-tabster="{\\"deloser\\":{}}"
-          type="button"
         >
           Trigger
         </button>,
@@ -75,7 +74,7 @@ describe('DialogTrigger', () => {
         cb(ref.current);
       }, []);
       return (
-        <DialogTrigger>
+        <DialogTrigger disableButtonEnhancement>
           <button ref={ref}>Trigger</button>
         </DialogTrigger>
       );
@@ -89,7 +88,6 @@ describe('DialogTrigger', () => {
         <button
           aria-haspopup="dialog"
           data-tabster="{\\"deloser\\":{}}"
-          type="button"
         >
           Trigger
         </button>,
@@ -116,7 +114,7 @@ describe('DialogTrigger', () => {
     mockUseDialogContext({ requestOpenChange });
 
     const { getByRole } = render(
-      <DialogTrigger action="open">
+      <DialogTrigger disableButtonEnhancement action="open">
         <button aria-disabled={false}>trigger</button>
       </DialogTrigger>,
     );
@@ -131,7 +129,7 @@ describe('DialogTrigger', () => {
     mockUseDialogContext({ requestOpenChange });
 
     const { getByRole } = render(
-      <DialogTrigger>
+      <DialogTrigger disableButtonEnhancement>
         <button disabled>trigger</button>
       </DialogTrigger>,
     );
@@ -143,7 +141,7 @@ describe('DialogTrigger', () => {
   it('should not keyboard click when event is default prevented', () => {
     const onClick = jest.fn();
     const { getByRole } = render(
-      <DialogTrigger>
+      <DialogTrigger disableButtonEnhancement>
         <div role="button" onClick={onClick}>
           trigger
         </div>

packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.types.ts

@@ -14,6 +14,11 @@ export type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
    * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default
    */
   action?: DialogTriggerAction;
+  /**
+   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
+   * @default false
+   */
+  disableButtonEnhancement?: boolean;
 };
 
 /**

packages/react-components/react-dialog/src/components/DialogTrigger/__snapshots__/DialogTrigger.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`DialogTrigger renders a default state 1`] = `
   aria-haspopup="dialog"
   data-tabster="{\\"deloser\\":{}}"
   onClick={[Function]}
-  type="button"
 >
   Dialog trigger
 </button>

packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts

@@ -14,7 +14,7 @@ import { useARIAButtonProps } from '@fluentui/react-aria';
 export const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {
   const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();
 
-  const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;
+  const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;
 
   const child = getTriggerChild(children);
 
@@ -35,17 +35,26 @@ export const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTrig
     },
   );
 
+  const triggerChildProps = {
+    ...child?.props,
+    'aria-haspopup': action === 'close' ? undefined : 'dialog',
+    ref: child?.ref,
+    onClick: handleClick,
+    ...triggerAttributes,
+  } as const;
+
+  const ariaButtonTriggerChildProps = useARIAButtonProps(
+    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',
+    {
+      ...triggerChildProps,
+      type: 'button',
+    },
+  );
+
   return {
     children: applyTriggerPropsToChildren(
       children,
-      useARIAButtonProps(child?.type === 'button' || child?.type === 'a' ? child.type : 'div', {
-        type: 'button',
-        ...child?.props,
-        'aria-haspopup': action === 'close' ? undefined : 'dialog',
-        ref: child?.ref,
-        onClick: handleClick,
-        ...triggerAttributes,
-      }),
+      disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,
     ),
   };
 };

packages/react-components/react-menu/etc/react-menu.api.md

@@ -314,7 +314,9 @@ export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType,
 export const MenuTriggerContextProvider: React_2.Provider<boolean>;
 
 // @public (undocumented)
-export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps>;
+export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {
+    disableButtonEnhancement?: boolean;
+};
 
 // @public (undocumented)
 export type MenuTriggerState = {

packages/react-components/react-menu/src/components/Menu/Menu.test.tsx

@@ -25,7 +25,7 @@ describe('Menu', () => {
     displayName: 'Menu',
     requiredProps: {
       children: [
-        <MenuTrigger key="trigger">
+        <MenuTrigger disableButtonEnhancement key="trigger">
           <button>MenuTrigger</button>
         </MenuTrigger>,
         <MenuPopover key="popover">
@@ -47,7 +47,7 @@ describe('Menu', () => {
   it('renders a default state', () => {
     const { container } = render(
       <Menu>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -66,7 +66,7 @@ describe('Menu', () => {
     const onOpenChange = jest.fn();
     const { getByRole } = render(
       <Menu open={open} onOpenChange={onOpenChange}>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -90,7 +90,7 @@ describe('Menu', () => {
     const onOpenChange = jest.fn();
     const { getByRole } = render(
       <Menu onOpenChange={onOpenChange}>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -119,7 +119,7 @@ describe('Menu', () => {
     // Arrange
     const { getByRole } = render(
       <Menu>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -150,7 +150,7 @@ describe('Menu', () => {
     // Arrange
     const { getByRole } = render(
       <Menu open>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -178,7 +178,7 @@ describe('Menu', () => {
     // Arrange
     const { getByRole } = render(
       <Menu>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -203,7 +203,7 @@ describe('Menu', () => {
     // Arrange
     const { getByRole } = render(
       <Menu>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -230,7 +230,7 @@ describe('Menu', () => {
     // Arrange
     const { container } = render(
       <Menu open>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>
@@ -250,7 +250,7 @@ describe('Menu', () => {
     // Arrange
     const { container } = render(
       <Menu open inline>
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button>Menu trigger</button>
         </MenuTrigger>
         <MenuPopover>

packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx

@@ -34,7 +34,7 @@ describe('MenuTrigger', () => {
    */
   it('renders a default state', () => {
     const component = renderer.create(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button>Menu trigger</button>
       </MenuTrigger>,
     );
@@ -46,7 +46,7 @@ describe('MenuTrigger', () => {
     // Arrange
     const ref = jest.fn();
     render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button ref={ref}>Trigger</button>
       </MenuTrigger>,
     );
@@ -74,7 +74,7 @@ describe('MenuTrigger', () => {
         cb(ref.current);
       }, []);
       return (
-        <MenuTrigger>
+        <MenuTrigger disableButtonEnhancement>
           <button ref={ref}>Trigger</button>
         </MenuTrigger>
       );
@@ -100,7 +100,7 @@ describe('MenuTrigger', () => {
     mockUseMenuContext({ setOpen });
 
     const { getByRole } = render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button aria-disabled>trigger</button>
       </MenuTrigger>,
     );
@@ -114,7 +114,7 @@ describe('MenuTrigger', () => {
     mockUseMenuContext({ setOpen });
 
     const { getByRole } = render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button aria-disabled={false}>trigger</button>
       </MenuTrigger>,
     );
@@ -129,7 +129,7 @@ describe('MenuTrigger', () => {
     mockUseMenuContext({ setOpen });
 
     const { getByRole } = render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button disabled>trigger</button>
       </MenuTrigger>,
     );
@@ -148,7 +148,7 @@ describe('MenuTrigger', () => {
     };
 
     render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button>
           <TestComponent />
         </button>
@@ -168,7 +168,7 @@ describe('MenuTrigger', () => {
     };
 
     render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <button>
           <TestComponent />
         </button>
@@ -181,7 +181,7 @@ describe('MenuTrigger', () => {
   it('should not keyboard click when event is default prevented', () => {
     const onClick = jest.fn();
     const { getByRole } = render(
-      <MenuTrigger>
+      <MenuTrigger disableButtonEnhancement>
         <div role="button" onClick={onClick}>
           trigger
         </div>

packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.types.ts

@@ -2,7 +2,13 @@ import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
 import type { TriggerProps } from '@fluentui/react-utilities';
 import * as React from 'react';
 
-export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps>;
+export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {
+  /**
+   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
+   * @default false
+   */
+  disableButtonEnhancement?: boolean;
+};
 
 /**
  * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu