fix: update internal usage of useModalAttributes to use legacyTrapFoc…

…us by default (#31801)

change/@fluentui-react-datepicker-compat-3e7cd400-73e6-4dc3-8c12-5878aecc0164.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: update DatePicker to use legacyTrapFocus",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-07357d3b-3b08-41c6-ab4f-d60a839a47e6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: update wording for legacyTrapFocus",
+  "packageName": "@fluentui/react-tabster",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx

@@ -418,7 +418,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HT
   root.onFocus = useEventCallback(mergeCallbacks(root.onFocus, onInputFocus));
   root.onClick = useEventCallback(mergeCallbacks(root.onClick, onInputClick));
 
-  const { modalAttributes } = useModalAttributes({ trapFocus: true, alwaysFocusable: true, legacyTrapFocus: false });
+  const { modalAttributes } = useModalAttributes({ trapFocus: true, alwaysFocusable: true, legacyTrapFocus: true });
   const popupSurface = open
     ? slot.optional(props.popupSurface, {
         renderByDefault: true,

packages/react-components/react-tabster/src/hooks/useModalAttributes.ts

@@ -6,17 +6,16 @@ import { useTabster } from './useTabster';
 export interface UseModalAttributesOptions {
   /**
    * Traps focus inside the elements the attributes are applied.
-   * Prefer this to `legacyTrapFocus`
    * it forbids users to tab out of the focus trap into the actual browser.
    */
   trapFocus?: boolean;
 
   /**
    * Traps focus inside the elements the attributes are applied.
-   * This prop enables legacy behavior to match previous versions of Fluent and is not
-   * recommended for general use.
-   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into
-   * the actual browser. Prefer using `trapFocus` instead of this prop.
+   * This prop enables traditional force-focus behavior to match previous versions of Fluent.
+   * Without this, users can tab out of the focus trap and into the browser chrome.
+   * This matches the behavior of the native <dialog> element and inert.
+   * We recommend setting this to true based on user feedback and consistency.
    */
   legacyTrapFocus?: boolean;