[pull] main from chakra-ui:main

packages/react/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+### Fixed
+
+- **Radio Group, Listbox, Progress, Segment Group**: Fixed group labels rendering orphan label elements; now render as
+  `span` per W3C ARIA pattern
+
 ## [5.32.0] - 2026-02-21
 
 ### Added

packages/react/package.json

@@ -181,7 +181,7 @@
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "^4.0.0",
+    "vitest": "^4.0.18",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {

packages/react/src/components/listbox/listbox-label.tsx

@@ -4,13 +4,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useListboxContext } from './use-listbox-context'
 
 export interface ListboxLabelBaseProps extends PolymorphicProps {}
-export interface ListboxLabelProps extends HTMLProps<'label'>, ListboxLabelBaseProps {}
+export interface ListboxLabelProps extends HTMLProps<'span'>, ListboxLabelBaseProps {}
 
-export const ListboxLabel = forwardRef<HTMLLabelElement, ListboxLabelProps>((props, ref) => {
+export const ListboxLabel = forwardRef<HTMLSpanElement, ListboxLabelProps>((props, ref) => {
   const listbox = useListboxContext()
   const mergedProps = mergeProps(listbox.getLabelProps(), props)
 
-  return <ark.label {...mergedProps} ref={ref} />
+  return <ark.span {...mergedProps} ref={ref} />
 })
 
 ListboxLabel.displayName = 'ListboxLabel'

packages/react/src/components/popover/examples/nested.tsx

@@ -14,7 +14,7 @@ export const Nested = () => {
             <Popover.Description className={styles.Description}>
               Manage your preferences and account settings.
             </Popover.Description>
-            <Popover.Root positioning={{ placement: 'right' }}>
+            <Popover.Root lazyMount unmountOnExit positioning={{ placement: 'right' }}>
               <Popover.Trigger className={button.Root}>Advanced</Popover.Trigger>
               <Portal>
                 <Popover.Positioner className={styles.Positioner}>

packages/react/src/components/progress/progress-label.tsx

@@ -4,13 +4,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useProgressContext } from './use-progress-context'
 
 export interface ProgressLabelBaseProps extends PolymorphicProps {}
-export interface ProgressLabelProps extends HTMLProps<'label'>, ProgressLabelBaseProps {}
+export interface ProgressLabelProps extends HTMLProps<'span'>, ProgressLabelBaseProps {}
 
-export const ProgressLabel = forwardRef<HTMLLabelElement, ProgressLabelProps>((props, ref) => {
+export const ProgressLabel = forwardRef<HTMLSpanElement, ProgressLabelProps>((props, ref) => {
   const progress = useProgressContext()
   const mergedProps = mergeProps(progress.getLabelProps(), props)
 
-  return <ark.label {...mergedProps} ref={ref} />
+  return <ark.span {...mergedProps} ref={ref} />
 })
 
 ProgressLabel.displayName = 'ProgressLabel'

packages/react/src/components/radio-group/radio-group-label.tsx

@@ -4,13 +4,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useRadioGroupContext } from './use-radio-group-context'
 
 export interface RadioGroupLabelBaseProps extends PolymorphicProps {}
-export interface RadioGroupLabelProps extends HTMLProps<'label'>, RadioGroupLabelBaseProps {}
+export interface RadioGroupLabelProps extends HTMLProps<'span'>, RadioGroupLabelBaseProps {}
 
-export const RadioGroupLabel = forwardRef<HTMLLabelElement, RadioGroupLabelProps>((props, ref) => {
+export const RadioGroupLabel = forwardRef<HTMLSpanElement, RadioGroupLabelProps>((props, ref) => {
   const radioGroup = useRadioGroupContext()
   const mergedProps = mergeProps(radioGroup.getLabelProps(), props)
 
-  return <ark.label {...mergedProps} ref={ref} />
+  return <ark.span {...mergedProps} ref={ref} />
 })
 
 RadioGroupLabel.displayName = 'RadioGroupLabel'

packages/react/src/components/segment-group/segment-group-label.tsx

@@ -5,13 +5,13 @@ import { parts } from './segment-group.anatomy'
 import { useSegmentGroupContext } from './use-segment-group-context'
 
 export interface SegmentGroupLabelBaseProps extends PolymorphicProps {}
-export interface SegmentGroupLabelProps extends HTMLProps<'label'>, SegmentGroupLabelBaseProps {}
+export interface SegmentGroupLabelProps extends HTMLProps<'span'>, SegmentGroupLabelBaseProps {}
 
-export const SegmentGroupLabel = forwardRef<HTMLLabelElement, SegmentGroupLabelProps>((props, ref) => {
+export const SegmentGroupLabel = forwardRef<HTMLSpanElement, SegmentGroupLabelProps>((props, ref) => {
   const segmentGroup = useSegmentGroupContext()
   const mergedProps = mergeProps(segmentGroup.getLabelProps(), parts.label.attrs as Record<string, string>, props)
 
-  return <ark.label {...mergedProps} ref={ref} />
+  return <ark.span {...mergedProps} ref={ref} />
 })
 
 SegmentGroupLabel.displayName = 'SegmentGroupLabel'

packages/solid/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+### Fixed
+
+- **Radio Group, Listbox, Progress, Segment Group**: Fixed group labels rendering orphan label elements; now render as
+  `span` per W3C ARIA pattern
+
 ## [5.32.0] - 2026-02-21
 
 ### Added

packages/solid/package.json

@@ -177,7 +177,7 @@
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vite-plugin-solid": "2.11.10",
-    "vitest": "^4.0.0",
+    "vitest": "^4.0.18",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {