docs(RAC): various docs examples accessibility fixes (#6607)

Author: reidbarber

packages/react-aria-components/docs/CheckboxGroup.mdx

@@ -194,7 +194,7 @@ function MyCheckboxGroup({
 }: MyCheckboxGroupProps) {
   return (
     <CheckboxGroup {...props}>
-      {label}
+      {label && <Label>{label}</Label>}
       {children}
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>

packages/react-aria-components/docs/ColorField.mdx

@@ -217,7 +217,7 @@ A ColorField accepts either a color string or <TypeLink links={docs.links} type=
 By default, `ColorField` is uncontrolled. You can set a default value using the `defaultValue` prop.
 
 ```tsx example
-<MyColorField defaultValue="#7f007f" />
+<MyColorField label="Color" defaultValue="#7f007f" />
 ```
 
 ### Controlled
@@ -233,7 +233,7 @@ function Example() {
   let [color, setColor] = React.useState(parseColor('#7f007f'));
   return (
     <>
-      <MyColorField value={color} onChange={setColor} />
+      <MyColorField label="Color" value={color} onChange={setColor} />
       <p>Current color value: {color.toString('hex')}</p>
     </>
   );

packages/react-aria-components/docs/ListBox.mdx

@@ -598,7 +598,7 @@ let albums = [
   items={albums}
   selectionMode="multiple">
   {item => (
-    <ListBoxItem>
+    <ListBoxItem textValue={item.title}>
       <img src={item.image} alt="" />
       <Text slot="label">{item.title}</Text>
       <Text slot="description">{item.artist}</Text>
@@ -687,7 +687,7 @@ The `layout` prop can be set to `"grid"` to enable two-dimensional keyboard navi
   items={albums}
   selectionMode="multiple">
   {item => (
-    <ListBoxItem>
+    <ListBoxItem textValue={item.title}>
       <img src={item.image} alt="" />
       <Text slot="label">{item.title}</Text>
       <Text slot="description">{item.artist}</Text>
@@ -723,7 +723,7 @@ The `layout="grid"` and `orientation="horizontal"` props can be combined to buil
   items={albums}
   selectionMode="multiple">
   {item => (
-    <ListBoxItem>
+    <ListBoxItem textValue={item.title}>
       <img src={item.image} alt="" />
       <Text slot="label">{item.title}</Text>
       <Text slot="description">{item.artist}</Text>