Add missing aria-labels to ListBox, Menu, Tabs items in RAC (#5796)

* Add missing aria-labels to ListBox and Menu items

also remove it from gridlist items since the hook will never use it

* fixing aria properties for tabs as well

---------

Co-authored-by: Robert Snow <[email protected]>

Author: LFDanLu

packages/react-aria-components/src/GridList.tsx

@@ -228,9 +228,7 @@ export interface GridListItemProps<T = object> extends RenderProps<GridListItemR
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
   value?: T,
   /** A string representation of the item's contents, used for features like typeahead. */
-  textValue?: string,
-  /** An accessibility label for this item. */
-  'aria-label'?: string
+  textValue?: string
 }
 
 function GridListItem<T extends object>(props: GridListItemProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {

packages/react-aria-components/src/ListBox.tsx

@@ -362,7 +362,7 @@ function Option<T>({item}: OptionProps<T>) {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
   let {optionProps, labelProps, descriptionProps, ...states} = useOption(
-    {key: item.key},
+    {key: item.key, 'aria-label': item.props?.['aria-label']},
     state,
     ref
   );

packages/react-aria-components/src/Menu.tsx

@@ -287,7 +287,7 @@ interface MenuItemInnerProps<T> {
 function MenuItemInner<T>({item}: MenuItemInnerProps<T>) {
   let state = useContext(MenuStateContext)!;
   let ref = useObjectRef<any>(item.props.ref);
-  let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({key: item.key}, state, ref);
+  let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({key: item.key, 'aria-label': item.props?.['aria-label']}, state, ref);
 
   let props: MenuItemProps<T> = item.props;
   let {isFocusVisible, focusProps} = useFocusRing();

packages/react-aria-components/src/Tabs.tsx

@@ -263,9 +263,8 @@ const _Tab = /*#__PURE__*/ (forwardRef as forwardRefType)(Tab);
 export {_Tab as Tab};
 
 function TabInner({item, state}: {item: Node<object>, state: TabListState<object>}) {
-  let {key} = item;
   let ref = useObjectRef<any>(item.props.ref);
-  let {tabProps, isSelected, isDisabled, isPressed} = useTab({key}, state, ref);
+  let {tabProps, isSelected, isDisabled, isPressed} = useTab({key: item.key, ...item.props}, state, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
     isDisabled

packages/react-aria-components/test/ListBox.test.js

@@ -86,6 +86,14 @@ describe('ListBox', () => {
     }
   });
 
+  it('should support aria-label on the listbox items', () => {
+    let {getAllByRole} = renderListbox({}, {'aria-label': 'test'});
+
+    for (let option of getAllByRole('option')) {
+      expect(option).toHaveAttribute('aria-label', 'test');
+    }
+  });
+
   it('should support the slot prop', () => {
     let {getByRole} = render(
       <ListBoxContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>

packages/react-aria-components/test/Menu.test.js

@@ -90,6 +90,14 @@ describe('Menu', () => {
     }
   });
 
+  it('should support aria-label on the menu items', () => {
+    let {getAllByRole} = renderMenu({}, {'aria-label': 'test'});
+
+    for (let menuitem of getAllByRole('menuitem')) {
+      expect(menuitem).toHaveAttribute('aria-label', 'test');
+    }
+  });
+
   it('should support the slot prop', () => {
     let {getByRole} = render(
       <MenuContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>

packages/react-aria-components/test/Tabs.test.js

@@ -79,6 +79,21 @@ describe('Tabs', () => {
     expect(tabpanel).toHaveAttribute('data-test', 'tabpanel');
   });
 
+  it('should support aria props on the tabs', () => {
+    let {getAllByRole} = renderTabs({}, {}, {
+      'aria-label': 'label',
+      'aria-labelledby': 'labelledby',
+      'aria-describedby': 'describedby',
+      'aria-details': 'details'
+    }, {});
+    for (let tab of getAllByRole('tab')) {
+      expect(tab).toHaveAttribute('aria-label', 'label');
+      expect(tab).toHaveAttribute('aria-labelledby', 'labelledby');
+      expect(tab).toHaveAttribute('aria-describedby', 'describedby');
+      expect(tab).toHaveAttribute('aria-details', 'details');
+    }
+  });
+
   it('should support render props', () => {
     let {getByRole} = render(
       <Tabs orientation="horizontal">