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>
+);