fix: add role to react aria taggroup when empty (#8723)

* fix: add role to react aria taggroup when empty

* add test

Author: yihuiliao

packages/@react-aria/tag/src/useTagGroup.ts

@@ -114,7 +114,7 @@ export function useTagGroup<T>(props: AriaTagGroupOptions<T>, state: ListState<T
 
   return {
     gridProps: mergeProps(gridProps, domProps, {
-      role: state.collection.size ? 'grid' : null,
+      role: state.collection.size ? 'grid' : 'group',
       'aria-atomic': false,
       'aria-relevant': 'additions',
       'aria-live': isFocusWithin ? 'polite' : 'off',

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

@@ -111,3 +111,13 @@ export const TagGroupExampleWithRemove: Story = {
     </TagGroup>
   )
 };
+
+export const EmptyTagGroup: Story = {
+  render: (props: TagGroupProps) => (
+    <TagGroup {...props} aria-label="Categories" >
+      <TagList renderEmptyState={() => 'No categories.'}>
+        {[]}
+      </TagList>
+    </TagGroup>
+  )
+};

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

@@ -306,6 +306,7 @@ describe('TagGroup', () => {
     let grid = getByTestId('list');
     expect(grid).toHaveAttribute('data-empty', 'true');
     expect(grid).toHaveTextContent('No results');
+    expect(grid).toHaveAttribute('role', 'group');
   });
 
   it('supports tooltips', async function () {