From 7336849a1ddb754ba264f0adb4a1e898e49e1579 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 21 Aug 2024 10:19:09 -0500
Subject: [PATCH] fix(docs): cleanup warnings in docs (#6857)

* fix various docs warnings

* typo
---
 packages/@react-aria/color/docs/useColorField.mdx        | 8 ++++----
 packages/@react-aria/dnd/docs/useDraggableCollection.mdx | 2 +-
 packages/@react-aria/dnd/docs/useDroppableCollection.mdx | 8 ++++----
 packages/@react-aria/gridlist/docs/useGridList.mdx       | 2 +-
 packages/@react-spectrum/avatar/docs/Avatar.mdx          | 2 +-
 packages/@react-spectrum/combobox/src/ComboBox.tsx       | 2 +-
 packages/@react-spectrum/table/docs/TableView.mdx        | 2 +-
 packages/@react-spectrum/tabs/docs/Tabs.mdx              | 6 +++---
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/@react-aria/color/docs/useColorField.mdx b/packages/@react-aria/color/docs/useColorField.mdx
index e8f8d2cc5de..6688c1a4b5f 100644
--- a/packages/@react-aria/color/docs/useColorField.mdx
+++ b/packages/@react-aria/color/docs/useColorField.mdx
@@ -108,7 +108,7 @@ The following examples show how to use the `ColorField` component created in the
 By default, `ColorField` is uncontrolled. You can set a default value using the `defaultValue` prop.
 
 ```tsx example
-<ColorField defaultValue="#7f007f" />
+<ColorField aria-label="Color" defaultValue="#7f007f" />
 ```
 
 ### Controlled
@@ -124,7 +124,7 @@ function Example() {
   let [color, setColor] = React.useState(parseColor('#7f007f'));
   return (
     <>
-      <ColorField value={color} onChange={setColor} />
+      <ColorField aria-label="Color" value={color} onChange={setColor} />
       <p>Current color value: {color.toString('hex')}</p>
     </>
   );
@@ -137,8 +137,8 @@ A `ColorField` can be disabled using the `isDisabled` prop, and made read only u
 The difference is that read only color fields are focusable but disabled color fields are not.
 
 ```tsx example
-<ColorField defaultValue="#7f007f" isDisabled />
-<ColorField defaultValue="#7f007f" isReadOnly />
+<ColorField aria-label="Color" defaultValue="#7f007f" isDisabled />
+<ColorField aria-label="Color" defaultValue="#7f007f" isReadOnly />
 ```
 
 ### HTML forms
diff --git a/packages/@react-aria/dnd/docs/useDraggableCollection.mdx b/packages/@react-aria/dnd/docs/useDraggableCollection.mdx
index 963648cbbb4..43cd93bfc09 100644
--- a/packages/@react-aria/dnd/docs/useDraggableCollection.mdx
+++ b/packages/@react-aria/dnd/docs/useDraggableCollection.mdx
@@ -290,7 +290,7 @@ let getItems = (keys) => (
 
 <ListBox aria-label="Adobe Apps" items={items} getItems={getItems} selectionMode="multiple">
   {([id, item]) => (
-    <Item key={id}>
+    <Item key={id} textValue={item.name}>
       <item.style>{item.name}</item.style>
     </Item>
   )}
diff --git a/packages/@react-aria/dnd/docs/useDroppableCollection.mdx b/packages/@react-aria/dnd/docs/useDroppableCollection.mdx
index a027d3bf6cc..c8a15b5a27e 100644
--- a/packages/@react-aria/dnd/docs/useDroppableCollection.mdx
+++ b/packages/@react-aria/dnd/docs/useDroppableCollection.mdx
@@ -737,7 +737,7 @@ function Example() {
       onRootDrop={onRootDrop}
       onInsert={onInsert}>
       {item => (
-        <Item>
+        <Item textValue={item.name}>
           <div className="image-item">
             <img src={item.url} />
             <span>{item.name}</span>
@@ -813,7 +813,7 @@ function Example() {
       ///- end highlight -///
       onRootDrop={onRootDrop}>
       {item => (
-        <Item key={item.name}>
+        <Item key={item.name} textValue={item.name}>
           <div className="dir-item">
             {item.kind === 'directory' ? <Folder /> : <File />}
             <span>{item.name}</span>
@@ -897,7 +897,7 @@ function Example() {
       acceptedDragTypes={['image/png']}
       onRootDrop={onRootDrop}>
       {item => (
-        <Item>
+        <Item textValue={item.name}>
           <div className="image-item">
             <img src={item.url} />
             <span>{item.name}</span>
@@ -1015,7 +1015,7 @@ function Example() {
       getDropOperation={getDropOperation}
       onDrop={onDrop}>
       {item => (
-        <Item>
+        <Item textValue={item.name}>
           <div className="dir-item">
             <Folder />
             <span>{item.name} ({item.contains} items)</span>
diff --git a/packages/@react-aria/gridlist/docs/useGridList.mdx b/packages/@react-aria/gridlist/docs/useGridList.mdx
index 7f4fc544b6e..92fe5bde2ad 100644
--- a/packages/@react-aria/gridlist/docs/useGridList.mdx
+++ b/packages/@react-aria/gridlist/docs/useGridList.mdx
@@ -375,7 +375,7 @@ function ExampleList(props) {
   return (
     <List aria-label="Example dynamic collection List" selectionMode="multiple" items={rows} {...props}>
       {item => (
-        <Item>
+        <Item textValue={item.name}>
           {item.name}
           <Button onPress={() => alert(`Info for ${item.name}...`)}>
             Info
diff --git a/packages/@react-spectrum/avatar/docs/Avatar.mdx b/packages/@react-spectrum/avatar/docs/Avatar.mdx
index e59b180602d..a0b32023a79 100644
--- a/packages/@react-spectrum/avatar/docs/Avatar.mdx
+++ b/packages/@react-spectrum/avatar/docs/Avatar.mdx
@@ -72,7 +72,7 @@ Sizes can either be one of the predefined avatar size variables, or a custom siz
 ```tsx example
 <Flex gap="size-100" wrap>
   {[50, 75, 100, 200, 300, 400, 500, 600, 700].map(size => (
-    <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size={`avatar-size-${size}`} />
+    <Avatar key={size} src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size={`avatar-size-${size}`} />
   ))}
   <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="avatar with custom size" size={50} />
 </Flex>
diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx
index 827c415252e..178c7de2133 100644
--- a/packages/@react-spectrum/combobox/src/ComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx
@@ -170,7 +170,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
           validationState={props.validationState || (isInvalid ? 'invalid' : null)}
           ref={inputGroupRef} />
       </Field>
-      {name && formValue === 'key' && <input type="hidden" name={name} value={state.selectedKey} />}
+      {name && formValue === 'key' && <input type="hidden" name={name} value={state.selectedKey ?? ''} />}
       <Popover
         state={state}
         UNSAFE_style={style}
diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index 25c92f6ffca..1ba899b6d23 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -82,7 +82,7 @@ Basic usage of TableView, seen in the example above, shows the use of a static c
 
 Columns and rows can be statically defined as children, or generated dynamically using a function based on the data passed to the `columns` or `items` prop respectively. Cells can also be statically defined as children, or generated dynamically based on the columns defined in the TableHeader.
 
-Each column and row has a unique key defined by the data. In the example below, the `uid` property of the column object is used as the `key` for the Column element within the TableHeader. The `key` of each row element is implicitly defined by the id property of the row object. See [collections](../react-stately/collections.html#unique-keys) to learn more keys in dynamic collections.
+Each column and row has a unique key defined by the data. In the example below, the `uid` property of the column object is used as the `key` for the Column element within the TableHeader. The `key` of each row element is implicitly defined by the id property of the row object. See [collections](../react-stately/collections.html#unique-keys) to learn more about keys in dynamic collections.
 
 ```tsx example
 let columns = [
diff --git a/packages/@react-spectrum/tabs/docs/Tabs.mdx b/packages/@react-spectrum/tabs/docs/Tabs.mdx
index 7f5ea92bb06..0028e535498 100644
--- a/packages/@react-spectrum/tabs/docs/Tabs.mdx
+++ b/packages/@react-spectrum/tabs/docs/Tabs.mdx
@@ -121,9 +121,9 @@ Icons can also be used in `Tabs` in addition to a text label. Tabs use [Slots](.
 ```tsx example
 <Tabs aria-label="History of Ancient Rome">
   <TabList>
-    <Item key="FoR"><Bookmark /><Text>Founding of Rome</Text></Item>
-    <Item key="MaR"><Calendar /><Text>Monarchy and Republic</Text></Item>
-    <Item key="Emp"><Dashboard /><Text>Empire</Text></Item>
+    <Item key="FoR" textValue="FoR"><Bookmark /><Text>Founding of Rome</Text></Item>
+    <Item key="MaR" textValue="MaR"><Calendar /><Text>Monarchy and Republic</Text></Item>
+    <Item key="Emp" textValue="Emp"><Dashboard /><Text>Empire</Text></Item>
   </TabList>
   <TabPanels>
     <Item key="FoR">