feat(react-components): migrate useArrowNavigationGroup to focusgroup where possible

packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';
 import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { AccordionRequestToggleData } from '../../contexts/accordion';
 
 /**
@@ -24,10 +23,7 @@ export const useAccordion_unstable = <Value = AccordionItemValue>(
   const state = useAccordionBase_unstable(baseProps, ref);
 
   /** FIXME: deprecated will be removed after navigation prop is removed */
-  const arrowNavigationProps = useArrowNavigationGroup({
-    circular: navigation === 'circular',
-    tabbable: true,
-  });
+  const arrowNavigationProps = { focusgroup: navigation === 'circular' ? 'block wrap' : 'block nowrap' };
 
   return {
     navigation,

packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/useBreadcrumb.ts

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbBaseProps, BreadcrumbBaseState, BreadcrumbProps, BreadcrumbState } from './Breadcrumb.types';
-import { TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render Breadcrumb.
@@ -62,19 +61,13 @@ export const useBreadcrumbBase_unstable = (
 
 /**
  * Hook to get accessibility attributes for Breadcrumb component, such as roving tab index.
- * Based on Tabster's useArrowNavigationGroup.
+ * Based on the HTML focusgroup attribute.
  *
  * @param focusMode - whether the Breadcrumb uses arrow key navigation or tab key navigation
  * @returns Tabster DOM attributes
  */
 export const useBreadcrumbA11yBehavior_unstable = ({
   focusMode,
-}: Pick<BreadcrumbBaseProps, 'focusMode'>): Partial<TabsterDOMAttribute> => {
-  const focusAttributes = useArrowNavigationGroup({
-    circular: true,
-    axis: 'horizontal',
-    memorizeCurrent: true,
-  });
-
-  return focusMode === 'arrow' ? focusAttributes : {};
+}: Pick<BreadcrumbBaseProps, 'focusMode'>): { focusgroup?: string } => {
+  return focusMode === 'arrow' ? { focusgroup: 'toolbar inline wrap' } : {};
 };

packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNav.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
 
@@ -20,14 +19,6 @@ import { useControllableState } from '@fluentui/react-utilities';
 export const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {
   const { appearance } = props;
 
-  const focusableGroupAttr = useArrowNavigationGroup({
-    circular: false,
-    axis: 'horizontal',
-    memorizeCurrent: false,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_hasDefault: true,
-  });
-
   // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
   const [totalSlides, setTotalSlides] = useControllableState({
     state: props.totalSlides,
@@ -54,7 +45,7 @@ export const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<
         ref,
         role: 'tablist',
         ...props,
-        ...focusableGroupAttr,
+        focusgroup: 'tablist nowrap nomemory',
         children: null,
       }),
       { elementType: 'div' },

packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
-import { useTabsterAttributes } from '@fluentui/react-tabster';
 import {
   getIntrinsicElementProps,
   isHTMLElement,
@@ -51,12 +50,8 @@ export const useCarouselNavButton_unstable = (
     resetAutoplay();
   });
 
-  const defaultTabProps = useTabsterAttributes({
-    focusable: { isDefault: selected },
-  });
-
   const buttonRef = React.useRef<HTMLElement>(undefined);
-  const _carouselButton = slot.always<ARIAButtonSlotProps>(
+  const _carouselButton = slot.always<ARIAButtonSlotProps & { focusGroupStart?: boolean }>(
     getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),
     {
       elementType: 'button',
@@ -65,7 +60,7 @@ export const useCarouselNavButton_unstable = (
         role: 'tab',
         type: 'button',
         'aria-selected': selected,
-        ...defaultTabProps,
+        focusGroupStart: true,
       },
     },
   );

packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts

@@ -9,7 +9,6 @@ import {
   useIsomorphicLayoutEffect,
   useMergedRefs,
 } from '@fluentui/react-utilities';
-import { useTabsterAttributes } from '@fluentui/react-tabster';
 import * as React from 'react';
 
 import { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';
@@ -44,10 +43,6 @@ export const useCarouselNavImageButton_unstable = (
     }
   });
 
-  const defaultTabProps = useTabsterAttributes({
-    focusable: { isDefault: selected },
-  });
-
   const buttonRef = React.useRef<HTMLElement>(undefined);
   const _carouselButton = slot.always<ARIAButtonSlotProps>(
     getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),
@@ -58,7 +53,7 @@ export const useCarouselNavImageButton_unstable = (
         role: 'tab',
         type: 'button',
         'aria-selected': selected,
-        ...defaultTabProps,
+        focusGroupStart: selected,
       },
     },
   );

packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSlider.ts

@@ -22,6 +22,10 @@ export const useCarouselSlider_unstable = (
 ): CarouselSliderState => {
   const { cardFocus = false } = props;
   const circular = useCarouselContext(ctx => ctx.circular);
+
+  // this can't yet be a focusgroup because we don't have a way
+  // to set focusgroup=none on descendants of the CarouselCard
+  // without adding an extra wrapping element
   const focusableGroupAttr = useArrowNavigationGroup({
     circular,
     axis: 'horizontal',

packages/react-components/react-list/library/src/components/List/useList.ts

@@ -8,7 +8,7 @@ import {
   useControllableState,
   useEventCallback,
 } from '@fluentui/react-utilities';
-import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { ListProps, ListState } from './List.types';
 import { useListSelection } from '../../hooks/useListSelection';
 import {
@@ -38,10 +38,8 @@ export const useList_unstable = (
 
   const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
 
-  const arrowNavigationAttributes = useArrowNavigationGroup({
-    axis: 'vertical',
-    memorizeCurrent: true,
-  });
+  // using "toolbar" here because we explicitly set roles based on other logic
+  const arrowNavigationAttributes = { focusgroup: 'toolbar block nowrap' };
 
   const [selectionState, setSelectionState] = useControllableState({
     state: selectedItems,

packages/react-components/react-list/library/src/components/ListItem/useListItem.tsx

@@ -6,7 +6,6 @@ import {
   MoverMoveFocusEvent,
   GroupperMoveFocusActions,
   MoverKeys,
-  useArrowNavigationGroup,
   useFocusableGroup,
   useMergedTabsterAttributes_unstable,
   type TabsterDOMAttribute,
@@ -178,12 +177,7 @@ export const useListItem_unstable = (
     toggleItem?.(e, value);
   });
 
-  const arrowNavigationAttributes = useArrowNavigationGroup({
-    axis: 'horizontal',
-  });
-
   const tabsterAttributes = useMergedTabsterAttributes_unstable(
-    focusableItems ? arrowNavigationAttributes : {},
     focusableGroupAttrs,
     props as Partial<TabsterDOMAttribute>,
   );
@@ -198,6 +192,7 @@ export const useListItem_unstable = (
         'aria-selected': isSelected,
         'aria-disabled': (disabledSelection && !onAction) || undefined,
       }),
+      ...(focusableItems && { focusgroup: 'toolbar inline nowrap' }),
       ...props,
       ...tabsterAttributes,
       onKeyDown: handleKeyDown,

packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts

@@ -8,12 +8,7 @@ import {
   getIntrinsicElementProps,
   slot,
 } from '@fluentui/react-utilities';
-import {
-  useArrowNavigationGroup,
-  useFocusFinders,
-  TabsterMoveFocusEventName,
-  type TabsterMoveFocusEvent,
-} from '@fluentui/react-tabster';
+import { useFocusFinders, TabsterMoveFocusEventName, type TabsterMoveFocusEvent } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
@@ -29,7 +24,6 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
   const { targetDocument } = useFluent();
   const menuContext = useMenuContextSelectors();
   const hasMenuContext = useHasParentContext(MenuContext);
-  const focusAttributes = useArrowNavigationGroup({ circular: true });
 
   if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
     // TODO throw warnings in development safely
@@ -149,7 +143,7 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
         ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<HTMLDivElement>,
         role: 'menu',
         'aria-labelledby': menuContext.triggerId,
-        ...focusAttributes,
+        focusgroup: 'menu nomemory wrap',
         ...props,
       }),
       { elementType: 'div' },

packages/react-components/react-migration-v0-v9/library/src/components/List/List/useList.ts

@@ -37,10 +37,12 @@ export const useList_unstable = (props: ListProps, ref: React.Ref<HTMLDivElement
     truncateHeader = false,
   } = props;
 
-  const arrowNavigationAttributes = useArrowNavigationGroup({
-    axis: layout === 'grid' ? 'grid-linear' : 'both',
+  const gridArrowNavigationAttributes = useArrowNavigationGroup({
+    axis: 'grid-linear',
     memorizeCurrent: true,
   });
+  const arrowNavigationAttributes =
+    layout === 'grid' ? gridArrowNavigationAttributes : { focusgroup: 'toolbar block nowrap' };
 
   const [selectionState, setSelectionState] = useControllableState({
     state: selectedItems,

packages/react-components/react-nav/library/src/components/NavDrawerBody/useNavDrawerBody.ts

@@ -20,6 +20,7 @@ export const useNavDrawerBody_unstable = (
   ref: React.Ref<HTMLDivElement>,
 ): NavDrawerBodyState => {
   const { tabbable } = useNavContext_unstable();
+  // cannot use focusgroup here because of the tabbable behavior
   const focusAttributes = useArrowNavigationGroup({
     axis: 'vertical',
     circular: true,

packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/useSwatchPicker.ts

@@ -36,11 +36,12 @@ export const useSwatchPicker_unstable = (
   } = props;
 
   const isGrid = layout === 'grid';
-  const focusAttributes = useArrowNavigationGroup({
+  const gridFocusAttributes = useArrowNavigationGroup({
     circular: true,
-    axis: isGrid ? 'grid-linear' : 'both',
+    axis: 'grid-linear',
     memorizeCurrent: true,
   });
+  const focusAttributes = isGrid ? gridFocusAttributes : { focusgroup: 'radiogroup inline block wrap' };
 
   const role = isGrid ? 'grid' : 'radiogroup';
 

packages/react-components/react-tabs/library/src/components/Tab/useTab.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { type TabsterDOMAttribute, useTabsterAttributes } from '@fluentui/react-tabster';
 import { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';
 import type { TabProps, TabState, TabBaseProps, TabBaseState } from './Tab.types';
 import { useTabListContext_unstable } from '../TabList';
@@ -122,8 +121,10 @@ export const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref<HTMLElem
  * @param selected - whether the Tab is selected
  * @returns Tabster DOM attributes
  */
-export const useTabA11yBehavior_unstable = ({ selected }: Pick<TabBaseState, 'selected'>): TabsterDOMAttribute => {
-  return useTabsterAttributes({
-    focusable: { isDefault: selected },
-  });
+export const useTabA11yBehavior_unstable = ({
+  selected,
+}: Pick<TabBaseState, 'selected'>): { focusGroupStart: boolean } => {
+  return {
+    focusGroupStart: selected,
+  };
 };

packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { type TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import type {
   TabRegisterData,
@@ -143,19 +142,13 @@ export const useTabListBase_unstable = (props: TabListBaseProps, ref: React.Ref<
 
 /**
  * Hook to get accessibility attributes for TabList component, such as roving tab index.
- * Based on Tabster's useArrowNavigationGroup.
+ * Based on the HTML focusgroup attribute.
  *
  * @param vertical - whether the TabList is vertical
  * @returns Tabster DOM attributes
  */
 export const useTabListA11yBehavior_unstable = ({
   vertical,
-}: Pick<TabListBaseState, 'vertical'>): TabsterDOMAttribute => {
-  return useArrowNavigationGroup({
-    circular: true,
-    axis: vertical ? 'vertical' : 'horizontal',
-    memorizeCurrent: false,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_hasDefault: true,
-  });
+}: Pick<TabListBaseState, 'vertical'>): { focusgroup: string } => {
+  return { focusgroup: vertical ? 'tablist block wrap nomemory' : 'tablist inline wrap nomemory' };
 };

packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts

@@ -6,7 +6,6 @@ import { useTagGroup_unstable } from '@fluentui/react-tags';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
 import { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { ArrowRight } from '@fluentui/keyboard-keys';
 
 /**
@@ -31,18 +30,12 @@ export const useTagPickerGroup_unstable = (
   const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);
   const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);
 
-  const arrowNavigationProps = useArrowNavigationGroup({
-    circular: false,
-    axis: 'both',
-    memorizeCurrent: true,
-  });
-
   const state = useTagGroup_unstable(
     {
       role: 'listbox',
       disabled,
       ...props,
-      ...arrowNavigationProps,
+      focusgroup: 'listbox inline block nowrap',
       size,
       appearance: tagPickerAppearanceToTagAppearance(appearance),
       dismissible: true,

packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts

@@ -10,7 +10,7 @@ import {
   slot,
 } from '@fluentui/react-utilities';
 import type { TagGroupProps, TagGroupState } from './TagGroup.types';
-import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';
 import type { TagValue } from '../../utils/types';
@@ -32,7 +32,7 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
     size = 'medium',
     appearance = 'filled',
     dismissible = false,
-    role = 'toolbar',
+    role,
     onTagSelect,
     selectedValues,
     ...rest
@@ -82,12 +82,6 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
     }),
   );
 
-  const arrowNavigationProps = useArrowNavigationGroup({
-    circular: true,
-    axis: 'both',
-    memorizeCurrent: true,
-  });
-
   return {
     handleTagDismiss,
     handleTagSelect: onTagSelect ? handleTagSelect : undefined,
@@ -109,7 +103,7 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
         ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,
         role,
         'aria-disabled': disabled,
-        ...arrowNavigationProps,
+        focusgroup: 'toolbar inline block wrap',
         ...rest,
       }),
       { elementType: 'div' },