code · pull · Sep 18, 2025 · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git 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
@@ -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/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/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
@@ -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
@@ -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
@@ -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/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
@@ -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-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-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/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
@@ -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/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>