fix: Combobox VoiceOver announcement not respecting aria-label of ListBoxItem (adobe#8908)

* add ComboBox Story for ListBoxItem with aria-label

This can be used to check whether the screen-reader announcement for option selections reads the correct label for each option, especially on mac, where there is a special codepath for this.

* fix `CollectionBuilder` to handle `aria-label` correctly

This commit ensures the aria-label prop from the ListItem is read into the corresponding attribute ElementNode

* only add key if it exists

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>

Author: SimonSelg

packages/@react-aria/collections/src/Document.ts

@@ -344,6 +344,9 @@ export class ElementNode<T> extends BaseNode<T> {
     node.rendered = rendered;
     node.render = render;
     node.value = value;
+    if (obj['aria-label']) {
+      node['aria-label'] = obj['aria-label'];
+    }
     node.textValue = textValue || (typeof props.children === 'string' ? props.children : '') || obj['aria-label'] || '';
     if (id != null && id !== node.key) {
       throw new Error('Cannot change the id of an item');

packages/react-aria-components/stories/ComboBox.stories.tsx

@@ -367,3 +367,25 @@ export function WithCreateOption() {
     </ComboBox>
   );
 }
+
+export const ComboBoxListBoxItemWithAriaLabel: ComboBoxStory = () => (
+  <ComboBox name="combo-box-example" data-testid="combo-box-example" allowsEmptyCollection>
+    <Label style={{display: 'block'}}>Test</Label>
+    <div style={{display: 'flex'}}>
+      <Input />
+      <Button>
+        <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+      </Button>
+    </div>
+    <Popover placement="bottom end">
+      <ListBox
+        renderEmptyState={renderEmptyState}
+        data-testid="combo-box-list-box"
+        className={styles.menu}>
+        <MyListBoxItem aria-label="Item Foo" textValue="Foo">Item <b>Foo</b></MyListBoxItem>
+        <MyListBoxItem aria-label="Item Bar" textValue="Bar">Item <b>Bar</b></MyListBoxItem>
+        <MyListBoxItem aria-label="Item Baz" textValue="Baz">Item <b>Baz</b></MyListBoxItem>
+      </ListBox>
+    </Popover>
+  </ComboBox>
+);