feat: deprecates useARIAButtonShorthand in favor of useARIAButtonProps (#29735)

Author: bsunderhus

change/@fluentui-react-accordion-f79e18b9-613d-4ee0-898d-30372d1f65b8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adopts useARIAButtonProps instead of deprecated method useARIAButtonShorthand",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-aria-672ea03e-6cd4-4630-a349-bb8c065fbeaf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: deprecates useARIAButtonShorthand in favor of useARIAButtonProps",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-167d39fa-0523-4509-ad7b-f823f8cbafbb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adopts useARIAButtonProps instead of deprecated method useARIAButtonShorthand",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-890d6433-950c-4907-8f9d-66111412e0e5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adopts useARIAButtonProps instead of deprecated method useARIAButtonShorthand",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';
-import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
+import { getIntrinsicElementProps, useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';
+import { useARIAButtonProps } from '@fluentui/react-aria';
 import type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import { ChevronRightRegular } from '@fluentui/react-icons';
@@ -38,6 +38,25 @@ export const useAccordionHeader_unstable = (
     expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
   }
 
+  const buttonSlot = slot.always(button, {
+    elementType: 'button',
+    defaultProps: {
+      disabled,
+      disabledFocusable,
+      'aria-expanded': open,
+      type: 'button',
+    },
+  });
+
+  buttonSlot.onClick = useEventCallback(event => {
+    if (isResolvedShorthand(button)) {
+      button.onClick?.(event);
+    }
+    if (!event.defaultPrevented) {
+      requestToggle({ value, event });
+    }
+  });
+
   return {
     disabled,
     open,
@@ -69,27 +88,6 @@ export const useAccordionHeader_unstable = (
       },
       elementType: 'span',
     }),
-    button: slot.always<ARIAButtonSlotProps<'a'>>(
-      {
-        ...useARIAButtonShorthand(button, {
-          required: true,
-          defaultProps: {
-            disabled,
-            disabledFocusable,
-            'aria-expanded': open,
-            type: 'button',
-          },
-        }),
-        onClick: useEventCallback(event => {
-          if (isResolvedShorthand(button)) {
-            button.onClick?.(event);
-          }
-          if (!event.defaultPrevented) {
-            requestToggle({ value, event });
-          }
-        }),
-      },
-      { elementType: 'button' },
-    ),
+    button: useARIAButtonProps(buttonSlot.as, buttonSlot),
   };
 };

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

@@ -66,7 +66,7 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
 // @internal
 export function useARIAButtonProps<Type extends ARIAButtonType, Props extends ARIAButtonProps<Type>>(type?: Type, props?: Props): ARIAButtonResultProps<Type, Props>;
 
-// @internal
+// @internal @deprecated (undocumented)
 export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps>;
 
 // (No @packageDocumentation comment for this package)

packages/react-components/react-aria/src/button/useARIAButtonProps.test.tsx

@@ -4,12 +4,11 @@ import { renderHook } from '@testing-library/react-hooks';
 import { fireEvent, render } from '@testing-library/react';
 import { getSlots, Slot, ComponentProps } from '@fluentui/react-utilities';
 import { ARIAButtonProps, ARIAButtonSlotProps } from './types';
-import { useARIAButtonShorthand } from './useARIAButtonShorthand';
 
 const TestButton = (props: ComponentProps<{ root: Slot<ARIAButtonSlotProps> }>) => {
   const { slots, slotProps } = getSlots<{ root: Slot<ARIAButtonSlotProps> }>({
     components: { root: 'button' },
-    root: useARIAButtonShorthand(props, { required: true }),
+    root: useARIAButtonProps(props.as, props),
   });
   return <slots.root {...slotProps.root} />;
 };

packages/react-components/react-aria/src/button/useARIAButtonShorthand.test.tsx

@@ -5,18 +5,22 @@ describe('useARIAButtonShorthands', () => {
   it('should return shorthands', () => {
     const {
       result: { current: buttonShorthand },
+      // eslint-disable-next-line deprecation/deprecation
     } = renderHook(() => useARIAButtonShorthand({ as: 'button' }, { required: true }));
     expect(buttonShorthand.as).toBe('button');
     const {
       result: { current: buttonShorthand2 },
+      // eslint-disable-next-line deprecation/deprecation
     } = renderHook(() => useARIAButtonShorthand({ as: undefined }, { required: true }));
     expect(buttonShorthand2.as).toBe(undefined);
     const {
       result: { current: anchorShorthand },
+      // eslint-disable-next-line deprecation/deprecation
     } = renderHook(() => useARIAButtonShorthand({ as: 'a' }, { required: true }));
     expect(anchorShorthand.as).toBe('a');
     const {
       result: { current: divShorthand },
+      // eslint-disable-next-line deprecation/deprecation
     } = renderHook(() => useARIAButtonShorthand({ as: 'div' }, { required: true }));
     expect(divShorthand.as).toBe('div');
   });

packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts

@@ -6,6 +6,8 @@ import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './typ
 /**
  * @internal
  *
+ * @deprecated use useARIAButtonProps instead
+ *
  * This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead
  *
  * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec

packages/react-components/react-aria/src/index.ts

@@ -1,4 +1,8 @@
-export { useARIAButtonShorthand, useARIAButtonProps } from './button/index';
+export {
+  // eslint-disable-next-line deprecation/deprecation
+  useARIAButtonShorthand,
+  useARIAButtonProps,
+} from './button/index';
 export { useActiveDescendant } from './activedescendant';
 export type { ActiveDescendantImperativeRef, ActiveDescendantOptions } from './activedescendant';
 export type {

packages/react-components/react-aria/stories/useARIAButton/index.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useARIAButtonShorthand } from '../../src/button';
+import { useARIAButtonProps } from '../../src/button';
 import type { ARIAButtonSlotProps } from '../../src/button';
 import { getSlots } from '@fluentui/react-components';
 import type { ComponentState, Slot } from '@fluentui/react-components';
@@ -20,7 +20,7 @@ export const Default = (args: DefaultArgs) => {
     components: { root: 'div', button: 'button' },
     root: {},
     button: {
-      ...useARIAButtonShorthand({ as: 'button', onClick: args.onClick }, { required: true }),
+      ...useARIAButtonProps('button', { as: 'button', onClick: args.onClick } as const),
       children: React.Fragment,
     },
   };
@@ -36,17 +36,14 @@ export const Anchor = (args: DefaultArgs) => {
   type AnchorSlots = {
     root: ARIAButtonSlotProps;
   };
-  const props = useARIAButtonShorthand(
-    {
-      as: 'a',
-      href: '/',
-      onClick: ev => {
-        ev.preventDefault();
-        args.onClick(ev);
-      },
+  const props = useARIAButtonProps('a', {
+    as: 'a',
+    href: '/',
+    onClick: ev => {
+      ev.preventDefault();
+      args.onClick(ev);
     },
-    { required: true },
-  );
+  } as const);
   const { slots, slotProps } = getSlots<AnchorSlots>({
     components: { root: 'a' },
     root: props,

packages/react-components/react-button/src/components/Button/useButton.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
+import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useButtonContext } from '../../contexts/ButtonContext';
 import type { ButtonProps, ButtonState } from './Button.types';
@@ -35,19 +35,13 @@ export const useButton_unstable = (
     size, // State calculated from a set of props
     iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition
     components: { root: 'button', icon: 'span' },
-    root: slot.always(
-      getIntrinsicElementProps(
-        as,
-        useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {
-          required: true,
-          defaultProps: {
-            ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,
-            type: 'button',
-          },
-        }),
-      ),
-      { elementType: 'button' },
-    ),
+    root: slot.always<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+      elementType: 'button',
+      defaultProps: {
+        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,
+        type: 'button',
+      },
+    }),
     icon: iconShorthand,
   };
 };

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusWithin } from '@fluentui/react-tabster';
 import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
-import { useARIAButtonShorthand } from '@fluentui/react-aria';
+import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
 import type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';
 import { useTableContext } from '../../contexts/tableContext';
 
@@ -29,6 +29,17 @@ export const useTableHeaderCell_unstable = (
 
   const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';
 
+  const buttonSlot = slot.always<ARIAButtonSlotProps>(props.button, {
+    elementType: 'div',
+    defaultProps: {
+      as: 'div',
+      ...(!sortable && {
+        role: 'presentation',
+        tabIndex: undefined,
+      }),
+    },
+  });
+
   return {
     components: {
       root: rootComponent,
@@ -54,19 +65,7 @@ export const useTableHeaderCell_unstable = (
       defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },
       elementType: 'span',
     }),
-    button: slot.always(
-      useARIAButtonShorthand(props.button, {
-        required: true,
-        defaultProps: {
-          as: 'div',
-          ...(!sortable && {
-            role: 'presentation',
-            tabIndex: undefined,
-          }),
-        },
-      }),
-      { elementType: 'div' },
-    ),
+    button: useARIAButtonProps(buttonSlot.as, buttonSlot),
     sortable,
     noNativeElements,
   };