From 4c2d52dd4ba1f698c9ade288556cab47357f145b Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Thu, 18 Sep 2025 06:27:56 +1000
Subject: [PATCH 1/4] fix: Extra Checkbox and Radio focus events (#8567)

* fix: Extra Checkbox and Radio focus events

* add RAC story actions

* add use checkbox example with independent label and input

* add code comments
---
 .../@react-aria/checkbox/docs/useCheckbox.mdx |  8 +--
 .../checkbox/docs/useCheckboxGroup.mdx        |  3 +-
 .../@react-aria/checkbox/src/useCheckbox.ts   | 15 +++--
 .../checkbox/stories/useCheckbox.stories.tsx  | 47 +++++++++++++++
 packages/@react-aria/radio/src/useRadio.ts    | 12 +++-
 .../stories/Checkbox.stories.tsx              | 11 +++-
 .../stories/RadioGroup.stories.tsx            | 42 ++++++++-----
 .../test/Checkbox.test.js                     | 23 ++++++++
 .../test/RadioGroup.test.js                   | 59 ++++++++++++++++++-
 9 files changed, 190 insertions(+), 30 deletions(-)
 create mode 100644 packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx

diff --git a/packages/@react-aria/checkbox/docs/useCheckbox.mdx b/packages/@react-aria/checkbox/docs/useCheckbox.mdx
index 8bd6e38c7da..080f82e8971 100644
--- a/packages/@react-aria/checkbox/docs/useCheckbox.mdx
+++ b/packages/@react-aria/checkbox/docs/useCheckbox.mdx
@@ -85,10 +85,10 @@ function Checkbox(props) {
   let {children} = props;
   let state = useToggleState(props);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckbox(props, state, ref);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
 
   return (
-    <label style={{display: 'block'}}>
+    <label {...labelProps} style={{display: 'block'}}>
       <input {...inputProps} ref={ref} />
       {children}
     </label>
@@ -120,12 +120,12 @@ import {mergeProps} from '@react-aria/utils';
 function Checkbox(props) {
   let state = useToggleState(props);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckbox(props, state, ref);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let isSelected = state.isSelected && !props.isIndeterminate;
 
   return (
-    <label style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
+    <label {...labelProps} style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
       <VisuallyHidden>
         <input {...mergeProps(inputProps, focusProps)} ref={ref} />
       </VisuallyHidden>
diff --git a/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx b/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx
index ab8873c23d2..07041e879c1 100644
--- a/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx
+++ b/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx
@@ -127,13 +127,14 @@ function Checkbox(props) {
   let {children} = props;
   let state = React.useContext(CheckboxGroupContext);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckboxGroupItem(props, state, ref);
+  let {inputProps, labelProps} = useCheckboxGroupItem(props, state, ref);
 
   let isDisabled = state.isDisabled || props.isDisabled;
   let isSelected = state.isSelected(props.value);
 
   return (
     <label
+      {...labelProps}
       style={{
         display: 'block',
         color: (isDisabled && 'var(--gray)') || (isSelected && 'var(--blue)'),
diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts
index 0bf2848fb9e..5ef879aeabd 100644
--- a/packages/@react-aria/checkbox/src/useCheckbox.ts
+++ b/packages/@react-aria/checkbox/src/useCheckbox.ts
@@ -11,7 +11,7 @@
  */
 
 import {AriaCheckboxProps} from '@react-types/checkbox';
-import {InputHTMLAttributes, LabelHTMLAttributes, useEffect} from 'react';
+import {InputHTMLAttributes, LabelHTMLAttributes, useEffect, useMemo} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
 import {RefObject, ValidationResult} from '@react-types/shared';
@@ -69,17 +69,24 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     onPress() {
       // @ts-expect-error
       let {[privateValidationStateProp]: groupValidationState} = props;
-  
+
       let {commitValidation} = groupValidationState
       ? groupValidationState
       : validationState;
-      
+
       commitValidation();
     }
   });
 
   return {
-    labelProps: mergeProps(labelProps, pressProps),
+    labelProps: mergeProps(
+      labelProps,
+      pressProps,
+      useMemo(() => ({
+        // Prevent label from being focused when mouse down on it.
+        // Note, this does not prevent the input from being focused in the `click` event.
+        onMouseDown: e => e.preventDefault()
+      }), [])),
     inputProps: {
       ...inputProps,
       checked: isSelected,
diff --git a/packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx b/packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx
new file mode 100644
index 00000000000..1f5ab9ebdd0
--- /dev/null
+++ b/packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {AriaCheckboxProps, useCheckbox} from '../';
+import React from 'react';
+import {StoryObj} from '@storybook/react';
+import {useToggleState} from '@react-stately/toggle';
+
+export default {
+  title: 'useCheckbox'
+};
+
+export type CheckboxStory = StoryObj<typeof Checkbox>;
+
+function Checkbox(props: AriaCheckboxProps) {
+  let {children} = props;
+  let state = useToggleState(props);
+  let ref = React.useRef(null);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
+
+  return (
+    <>
+      <label {...labelProps} style={{display: 'block'}}>
+        {children}
+      </label>
+      <input {...inputProps} ref={ref} />
+    </>
+  );
+}
+
+export const Example: CheckboxStory = {
+  render: (args) => <Checkbox {...args}>Unsubscribe</Checkbox>,
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
+};
diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts
index bfee6c710b3..59a7287a1ef 100644
--- a/packages/@react-aria/radio/src/useRadio.ts
+++ b/packages/@react-aria/radio/src/useRadio.ts
@@ -12,7 +12,7 @@
 
 import {AriaRadioProps} from '@react-types/radio';
 import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
-import {InputHTMLAttributes, LabelHTMLAttributes} from 'react';
+import {InputHTMLAttributes, LabelHTMLAttributes, useMemo} from 'react';
 import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {RefObject} from '@react-types/shared';
@@ -116,7 +116,15 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   useFormValidation({validationBehavior}, state, ref);
 
   return {
-    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),
+    labelProps: mergeProps(
+      labelProps,
+      useMemo(() => ({
+        onClick: e => e.preventDefault(),
+
+        // Prevent label from being focused when mouse down on it.
+        // Note, this does not prevent the input from being focused in the `click` event.
+        onMouseDown: e => e.preventDefault()
+      }), [])),
     inputProps: mergeProps(domProps, {
       ...interactions,
       type: 'radio',
diff --git a/packages/react-aria-components/stories/Checkbox.stories.tsx b/packages/react-aria-components/stories/Checkbox.stories.tsx
index c2b6c2c60a2..5cab112c5a8 100644
--- a/packages/react-aria-components/stories/Checkbox.stories.tsx
+++ b/packages/react-aria-components/stories/Checkbox.stories.tsx
@@ -1,3 +1,4 @@
+import {action} from '@storybook/addon-actions';
 import {Checkbox} from 'react-aria-components';
 import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
@@ -6,14 +7,18 @@ import './styles.css';
 
 export default {
   title: 'React Aria Components/Checkbox',
-  component: Checkbox
+  component: Checkbox,
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
 } as Meta<typeof Checkbox>;
 
 export type CheckboxStory = StoryObj<typeof Checkbox>;
 
 export const CheckboxExample: CheckboxStory = {
-  render: () => (
-    <Checkbox>
+  render: (args) => (
+    <Checkbox {...args}>
       <div className="checkbox">
         <svg viewBox="0 0 18 18" aria-hidden="true">
           <polyline points="1 9 7 14 15 4" />
diff --git a/packages/react-aria-components/stories/RadioGroup.stories.tsx b/packages/react-aria-components/stories/RadioGroup.stories.tsx
index 310e7b072ed..b8b80138977 100644
--- a/packages/react-aria-components/stories/RadioGroup.stories.tsx
+++ b/packages/react-aria-components/stories/RadioGroup.stories.tsx
@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {action} from '@storybook/addon-actions';
 import {Button, Dialog, DialogTrigger, FieldError, Form, Label, Modal, ModalOverlay, Radio, RadioGroup} from 'react-aria-components';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import styles from '../example/index.css';
 import './styles.css';
@@ -22,25 +23,34 @@ export default {
 } as Meta<typeof RadioGroup>;
 
 export type RadioGroupStory = StoryFn<typeof RadioGroup>;
+export type RadioGroupStoryObj = StoryObj<typeof RadioGroup>;
 
-export const RadioGroupExample: RadioGroupStory = () => {
-  return (
-    <RadioGroup
-      data-testid="radio-group-example"
-      className={styles.radiogroup}>
-      <Label>Favorite pet</Label>
-      <Radio className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
-      <Radio className={styles.radio} value="cats">Cat</Radio>
-      <Radio className={styles.radio} value="dragon">Dragon</Radio>
-    </RadioGroup>
-  );
+export const RadioGroupExample: RadioGroupStoryObj = {
+  render: (props) => {
+    return (
+      <RadioGroup
+        {...props}
+        data-testid="radio-group-example"
+        className={styles.radiogroup}>
+        <Label>Favorite pet</Label>
+        <Radio onFocus={action('radio focus')} onBlur={action('radio blur')} className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
+        <Radio onFocus={action('radio focus')} onBlur={action('radio blur')} className={styles.radio} value="cats">Cat</Radio>
+        <Radio onFocus={action('radio focus')} onBlur={action('radio blur')} className={styles.radio} value="dragon">Dragon</Radio>
+      </RadioGroup>
+    );
+  },
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
 };
 
-export const RadioGroupControlledExample: RadioGroupStory = () => {
+export const RadioGroupControlledExample: RadioGroupStory = (props) => {
   let [selected, setSelected] = useState<string|null>(null);
 
   return (
     <RadioGroup
+      {...props}
       data-testid="radio-group-example"
       className={styles.radiogroup}
       value={selected}
@@ -53,7 +63,7 @@ export const RadioGroupControlledExample: RadioGroupStory = () => {
   );
 };
 
-export const RadioGroupInDialogExample: RadioGroupStory = () => {
+export const RadioGroupInDialogExample: RadioGroupStory = (props) => {
   return (
     <DialogTrigger>
       <Button>Open dialog</Button>
@@ -88,6 +98,7 @@ export const RadioGroupInDialogExample: RadioGroupStory = () => {
                 <div style={{display: 'flex', flexDirection: 'row', gap: 20}}>
                   <div>
                     <RadioGroup
+                      {...props}
                       data-testid="radio-group-example"
                       className={styles.radiogroup}>
                       <Label>Favorite pet</Label>
@@ -142,10 +153,11 @@ export const RadioGroupInDialogExample: RadioGroupStory = () => {
   );
 };
 
-export const RadioGroupSubmitExample: RadioGroupStory = () => {
+export const RadioGroupSubmitExample: RadioGroupStory = (props) => {
   return (
     <Form>
       <RadioGroup
+        {...props}
         className={styles.radiogroup}
         data-testid="radio-group-example"
         isRequired>
diff --git a/packages/react-aria-components/test/Checkbox.test.js b/packages/react-aria-components/test/Checkbox.test.js
index 5f36b9165aa..4cff9c94e1d 100644
--- a/packages/react-aria-components/test/Checkbox.test.js
+++ b/packages/react-aria-components/test/Checkbox.test.js
@@ -277,4 +277,27 @@ describe('Checkbox', () => {
     let checkbox = getByRole('checkbox');
     expect(checkbox).toHaveAttribute('form', 'test');
   });
+
+
+  it('should not trigger onBlur/onFocus on sequential presses', async () => {
+    let onBlur = jest.fn();
+    let onFocus = jest.fn();
+    let {getByRole} = render(
+      <Checkbox onFocus={onFocus} onBlur={onBlur}>Test</Checkbox>
+    );
+
+    let checkbox = getByRole('checkbox');
+    let label = checkbox.closest('label');
+
+    await user.click(label);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onBlur).not.toHaveBeenCalled();
+
+    onFocus.mockClear();
+
+    await user.click(label);
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onFocus).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react-aria-components/test/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index e4f38253a55..06dfeeafcb9 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -607,11 +607,68 @@ describe('RadioGroup', () => {
     await user.keyboard('[ArrowLeft]');
     expect(document.activeElement).toBe(radios[0]);
   });
-  
+
   it('should support form prop', () => {
     let {getAllByRole} = renderGroup({form: 'test'});
     for (let radio of getAllByRole('radio')) {
       expect(radio).toHaveAttribute('form', 'test');
     }
   });
+
+  it('should not trigger onBlur/onFocus on sequential presses of a Radio', async () => {
+    let onBlur = jest.fn();
+    let onFocus = jest.fn();
+
+    let {getAllByRole} = render(
+      <RadioGroup>
+        <Label>Test</Label>
+        <Radio value="a" onFocus={onFocus} onBlur={onBlur}>A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>
+    );
+
+    let radios = getAllByRole('radio');
+    let radio = radios[0];
+    let label = radio.closest('label');
+
+    await user.click(label);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onBlur).not.toHaveBeenCalled();
+
+    onFocus.mockClear();
+
+    await user.click(label);
+
+    expect(onFocus).not.toHaveBeenCalled();
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('should trigger onBlur when moving focus between different Radio buttons', async () => {
+    let onBlurA = jest.fn();
+    let onFocusA = jest.fn();
+    let onBlurB = jest.fn();
+    let onFocusB = jest.fn();
+
+    let {getAllByRole} = render(
+      <RadioGroup>
+        <Label>Test</Label>
+        <Radio value="a" onFocus={onFocusA} onBlur={onBlurA}>A</Radio>
+        <Radio value="b" onFocus={onFocusB} onBlur={onBlurB}>B</Radio>
+      </RadioGroup>
+    );
+
+    let radios = getAllByRole('radio');
+    let radioA = radios[0];
+    let radioB = radios[1];
+    let labelA = radioA.closest('label');
+    let labelB = radioB.closest('label');
+
+    await user.click(labelA);
+    expect(onFocusA).toHaveBeenCalledTimes(1);
+    expect(onBlurA).not.toHaveBeenCalled();
+
+    await user.click(labelB);
+    expect(onFocusB).toHaveBeenCalledTimes(1);
+    expect(onBlurA).toHaveBeenCalledTimes(1);
+  });
 });

From 7df22966eabbb9b498ff26cf8657fc15a844fae8 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Thu, 18 Sep 2025 06:40:39 +1000
Subject: [PATCH 2/4] fix: Focus behaviour on inputs inside a FocusScope
 (#8498)

* fix: Focus behaviour on inputs inside a FocusScope

* fix combobox tests

* only do the select for html input elements
---
 .../@react-aria/autocomplete/src/useAutocomplete.ts   |  5 ++++-
 packages/@react-aria/focus/src/FocusScope.tsx         | 11 +++++++++++
 packages/@react-aria/interactions/src/focusSafely.ts  |  7 +++++++
 .../@react-spectrum/combobox/test/ComboBox.test.js    |  4 ++--
 .../@react-spectrum/s2/stories/Dialog.stories.tsx     |  9 ++++++---
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
index 7f895a676b1..2cd204e2e15 100644
--- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts
+++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
@@ -13,7 +13,7 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, getOwnerWindow, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -106,6 +106,9 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     // Ensure input is focused if the user clicks on the collection directly.
     if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
       inputRef.current.focus();
+      if (inputRef.current instanceof getOwnerWindow(inputRef.current).HTMLInputElement) {
+        inputRef.current.select();
+      }
     }
 
     let target = e.target as Element | null;
diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/packages/@react-aria/focus/src/FocusScope.tsx
index 6dad540400a..a7b5108f0a9 100644
--- a/packages/@react-aria/focus/src/FocusScope.tsx
+++ b/packages/@react-aria/focus/src/FocusScope.tsx
@@ -15,6 +15,7 @@ import {
   getActiveElement,
   getEventTarget,
   getOwnerDocument,
+  getOwnerWindow,
   isAndroid,
   isChrome,
   isFocusable,
@@ -371,6 +372,10 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         // restore focus to the previously focused node or the first tabbable element in the active scope.
         if (focusedNode.current) {
           focusedNode.current.focus();
+
+          if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
+            focusedNode.current.select();
+          }
         } else if (activeScope && activeScope.current) {
           focusFirstInScope(activeScope.current);
         }
@@ -399,6 +404,9 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
           if (target && target.isConnected) {
             focusedNode.current = target;
             focusedNode.current?.focus();
+            if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
+              focusedNode.current.select();
+            }
           } else if (activeScope.current) {
             focusFirstInScope(activeScope.current);
           }
@@ -486,6 +494,9 @@ function focusElement(element: FocusableElement | null, scroll = false) {
   } else if (element != null) {
     try {
       element.focus();
+      if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+        element.select();
+      }
     } catch {
       // ignore
     }
diff --git a/packages/@react-aria/interactions/src/focusSafely.ts b/packages/@react-aria/interactions/src/focusSafely.ts
index 384f3f363f7..46d95d917cf 100644
--- a/packages/@react-aria/interactions/src/focusSafely.ts
+++ b/packages/@react-aria/interactions/src/focusSafely.ts
@@ -15,6 +15,7 @@ import {
   focusWithoutScrolling,
   getActiveElement,
   getOwnerDocument,
+  getOwnerWindow,
   runAfterTransition
 } from '@react-aria/utils';
 import {getInteractionModality} from './useFocusVisible';
@@ -37,9 +38,15 @@ export function focusSafely(element: FocusableElement): void {
       // If focus did not move and the element is still in the document, focus it.
       if (getActiveElement(ownerDocument) === lastFocusedElement && element.isConnected) {
         focusWithoutScrolling(element);
+        if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+          element.select();
+        }
       }
     });
   } else {
     focusWithoutScrolling(element);
+    if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+      element.select();
+    }
   }
 }
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index 8a6b7ee6e54..913a527a04a 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -4398,7 +4398,7 @@ describe('ComboBox', function () {
       if (Method === 'escape key') {
         expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Two').id}`);
       } else {
-        expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Twor').id}`);
+        expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('r').id}`);
       }
       tree.unmount();
 
@@ -4412,7 +4412,7 @@ describe('ComboBox', function () {
 
       await performInteractions(tree);
       expect(() => tree.getByTestId('tray')).toThrow();
-      expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Twor').id}`);
+      expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('r').id}`);
     });
 
     it('menutrigger=focus doesn\'t reopen the tray on close', async function () {
diff --git a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
index e178ef0c56f..e4fdfcd4303 100644
--- a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
@@ -48,9 +48,12 @@ const ExampleRender = (args: ExampleRenderProps): ReactElement => (
           <Heading slot="title">Dialog title</Heading>
           <Header>Header</Header>
           <Content>
-            {[...Array(args.paragraphs)].map((_, i) =>
-              <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
-            )}
+            <>
+              {[...Array(args.paragraphs)].map((_, i) =>
+                <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+              )}
+              <input type="text" defaultValue="Hello" />
+            </>
           </Content>
           <Footer><Checkbox>Don't show this again</Checkbox></Footer>
           <ButtonGroup>

From fa7bfb530e13dc4bfc5db3caab8e42e9b9bb3ed3 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 17 Sep 2025 14:01:07 -0700
Subject: [PATCH 3/4] feat: Support heading-less inline alerts (#8872)

* feat: Support heading-less inline alerts

* apply set width and add chromatic story
---
 .../s2/chromatic/InlineAlert.stories.tsx      | 10 +++++
 .../@react-spectrum/s2/src/InlineAlert.tsx    | 37 +++++--------------
 .../s2/stories/InlineAlert.stories.tsx        | 28 ++++++++++++++
 3 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx b/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx
index 6646577d75a..eddd514b440 100644
--- a/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx
@@ -57,3 +57,13 @@ const DynamicExampleRender = (args: InlineAlertProps): ReactElement => {
 export const DynamicExample: StoryObj<typeof DynamicExampleRender> = {
   render: (args) => <DynamicExampleRender {...args} />
 };
+
+export const NoHeading: Story = {
+  render: () => (
+    <InlineAlert variant="informative">
+      <Content>
+        There was an error processing your payment. Please check that your card information is correct, then try again.
+      </Content>
+    </InlineAlert>
+  )
+};
diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx
index e5a420a2ad9..e2340cff0bb 100644
--- a/packages/@react-spectrum/s2/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx
@@ -121,7 +121,7 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
 }, getAllowedOverrides());
 
 const icon = style<InlineStylesProps>({
-  gridArea: 'icon',
+  float: 'inline-end',
   '--iconPrimary': {
     type: 'fill',
     value: {
@@ -155,18 +155,6 @@ const icon = style<InlineStylesProps>({
   }
 });
 
-const grid = style({
-  display: 'grid',
-  columnGap: 24,
-  gridTemplateColumns: '1fr auto',
-  gridTemplateRows: 'auto auto auto',
-  width: 'full',
-  gridTemplateAreas: [
-    'heading icon',
-    'content content'
-  ]
-});
-
 let ICONS = {
   informative: InfoCircle,
   positive: CheckmarkCircle,
@@ -177,7 +165,6 @@ let ICONS = {
 
 const heading = style({
   marginTop: 0,
-  gridArea: 'heading',
   font: 'title-sm',
   color: {
     default: 'title',
@@ -193,7 +180,6 @@ const heading = style({
 });
 
 const content = style({
-  gridArea: 'content',
   font: 'body-sm',
   color: {
     default: 'body',
@@ -256,18 +242,15 @@ export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props:
         fillStyle,
         isFocusVisible
       }, props.styles)}>
-      <div
-        className={grid}>
-        <Provider
-          values={[
-            [HeadingContext, {styles: heading({fillStyle})}],
-            [ContentContext, {styles: content({fillStyle})}],
-            [IconContext, {styles: icon({variant, fillStyle})}]
-          ]}>
-          {Icon && <Icon aria-label={iconAlt} />}
-          {children}
-        </Provider>
-      </div>
+      <Provider
+        values={[
+          [HeadingContext, {styles: heading({fillStyle})}],
+          [ContentContext, {styles: content({fillStyle})}],
+          [IconContext, {styles: icon({variant, fillStyle})}]
+        ]}>
+        {Icon && <Icon aria-label={iconAlt} />}
+        {children}
+      </Provider>
     </div>
   );
 });
diff --git a/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx b/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
index 28635b3ce61..7d19dbd9d91 100644
--- a/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
@@ -13,6 +13,7 @@
 import {Button, Content, Heading, InlineAlert, InlineAlertProps} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import {ReactElement, useState} from 'react';
+import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof InlineAlert> = {
   component: InlineAlert,
@@ -61,3 +62,30 @@ const DynamicExampleRender = (args: InlineAlertProps): ReactElement => {
 export const DynamicExample: StoryObj<typeof DynamicExampleRender> = {
   render: (args) => <DynamicExampleRender {...args} />
 };
+
+let NoHeadingExample = (args: InlineAlertProps & {showHeading: boolean, content: string}): ReactElement => {
+  let {showHeading = false, content} = args;
+  return (
+    <InlineAlert {...args}>
+      {showHeading && <Heading>Payment Information</Heading>}
+      <Content>
+        {content}
+      </Content>
+    </InlineAlert>
+  );
+};
+
+export const NoHeading: StoryObj<typeof NoHeadingExample> = {
+  render: (args) => (
+    <NoHeadingExample {...args} styles={style({width: 400})} />
+  ),
+  args: {
+    showHeading: false,
+    content: 'There was an error processing your payment. Please check that your card information is correct, then try again.'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};

From 6e467f870a596c82014895934f4e60834cba0550 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Thu, 18 Sep 2025 09:03:09 +1000
Subject: [PATCH 4/4] fix: first day of week bcp 47 parsing in middle of other
 extensions (#8877)

* fix: first day of week bcp 47 parsing in middle of other extensions

* add value to story

* fix iso8601 case
---
 packages/@internationalized/date/src/queries.ts             | 6 ++++--
 packages/@internationalized/date/tests/queries.test.js      | 5 +++++
 packages/react-aria-components/stories/Calendar.stories.tsx | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/@internationalized/date/src/queries.ts b/packages/@internationalized/date/src/queries.ts
index 732594d729d..ce48d95d75c 100644
--- a/packages/@internationalized/date/src/queries.ts
+++ b/packages/@internationalized/date/src/queries.ts
@@ -268,7 +268,9 @@ function getWeekStart(locale: string): number {
     }
     let region = getRegion(locale);
     if (locale.includes('-fw-')) {
-      let day = locale.split('-fw-')[1];
+      // pull the value for the attribute fw from strings such as en-US-u-ca-iso8601-fw-tue or en-US-u-ca-iso8601-fw-mon-nu-thai
+      // where the fw attribute could be followed by another unicode locale extension or not
+      let day = locale.split('-fw-')[1].split('-')[0];
       if (day === 'mon') {
         weekInfo = {firstDay: 1};
       } else if (day === 'tue') {
@@ -284,7 +286,7 @@ function getWeekStart(locale: string): number {
       } else {
         weekInfo = {firstDay: 0};
       }
-    } else if (locale.includes('u-ca-iso8601')) {
+    } else if (locale.includes('-ca-iso8601')) {
       weekInfo = {firstDay: 1};
     } else {
       weekInfo = {firstDay: region ? weekStartData[region] || 0 : 0};
diff --git a/packages/@internationalized/date/tests/queries.test.js b/packages/@internationalized/date/tests/queries.test.js
index 8ae3f8c3a54..40fceb3494e 100644
--- a/packages/@internationalized/date/tests/queries.test.js
+++ b/packages/@internationalized/date/tests/queries.test.js
@@ -281,6 +281,11 @@ describe('queries', function () {
 
       // override first day of week
       expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-ca-iso8601-fw-tue')).toEqual(new CalendarDate(2021, 8, 3));
+
+      // override applied if extension appears in the middle of other extensions
+      expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-nu-thai-ca-iso8601')).toEqual(new CalendarDate(2021, 8, 2));
+      expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-nu-thai-ca-iso8601-fw-tue')).toEqual(new CalendarDate(2021, 8, 3));
+      expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-ca-iso8601-fw-tue-nu-thai')).toEqual(new CalendarDate(2021, 8, 3));
     });
   });
 
diff --git a/packages/react-aria-components/stories/Calendar.stories.tsx b/packages/react-aria-components/stories/Calendar.stories.tsx
index 0703be28137..4caa40f4229 100644
--- a/packages/react-aria-components/stories/Calendar.stories.tsx
+++ b/packages/react-aria-components/stories/Calendar.stories.tsx
@@ -161,7 +161,7 @@ export const CalendarFirstDayOfWeekExample: StoryObj<CalendarFirstDayOfWeekExamp
   argTypes: {
     locale: {
       control: 'select',
-      options: ['en-US-u-ca-iso8601-fw-tue', 'en-US-u-ca-iso8601', 'en-US', 'fr-FR-u-ca-iso8601-fw-tue', 'fr-FR-u-ca-iso8601', 'fr-FR']
+      options: ['en-US-u-ca-iso8601-fw-tue', 'en-US-u-ca-iso8601', 'en-US', 'fr-FR-u-ca-iso8601-fw-tue', 'fr-FR-u-ca-iso8601', 'fr-FR', 'en-US-u-ca-iso8601-fw-tue-nu-thai']
     }
   }
 };