Add support to ActionList and ActionList.Item for tablist and tab roles (#7109)

Co-authored-by: Josh Black <joshblack@github.com>

Author: adierkens

.changeset/early-ghosts-enter.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support to ActionList for 'tablist' and 'tab' roles

packages/react/src/ActionList/Item.test.tsx

@@ -354,4 +354,31 @@ describe('ActionList.Item', () => {
     expect(item).toHaveTextContent('Item, Description')
     expect(item).toHaveAccessibleDescription('Description')
   })
+
+  it('should add role="tab" when ActionList has role="tablist"', () => {
+    const {getAllByRole} = HTMLRender(
+      <ActionList role="tablist">
+        <ActionList.Item>Tab 1</ActionList.Item>
+        <ActionList.Item>Tab 2</ActionList.Item>
+        <ActionList.Item>Tab 3</ActionList.Item>
+      </ActionList>,
+    )
+    const tabs = getAllByRole('tab')
+    expect(tabs[0]).toBeInTheDocument()
+    expect(tabs).toHaveLength(3)
+  })
+
+  it('should allow role="tab" on the li element', () => {
+    const {getAllByRole} = HTMLRender(
+      <ActionList role="tablist">
+        <ActionList.Item role="tab">Tab 1</ActionList.Item>
+        <ActionList.Item role="tab">Tab 2</ActionList.Item>
+        <ActionList.Item role="tab">Tab 3</ActionList.Item>
+      </ActionList>,
+    )
+    const tabs = getAllByRole('tab')
+    expect(tabs[0]).toBeInTheDocument()
+    expect(tabs[0].nodeType).toBe(Node.ELEMENT_NODE)
+    expect(tabs).toHaveLength(3)
+  })
 })

packages/react/src/ActionList/Item.tsx

@@ -123,6 +123,8 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
     else inferredItemRole = 'menuitem'
   } else if (listRole === 'listbox') {
     if (selectionVariant !== undefined && !role) inferredItemRole = 'option'
+  } else if (listRole === 'tablist') {
+    inferredItemRole = 'tab'
   }
 
   const itemRole = role || inferredItemRole
@@ -142,7 +144,11 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
   const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute
   // Ensures ActionList.Item retains list item semantics if a valid ARIA role is applied, or if item is inactive
   const listItemSemantics =
-    role === 'option' || role === 'menuitem' || role === 'menuitemradio' || role === 'menuitemcheckbox'
+    itemRole === 'option' ||
+    itemRole === 'menuitem' ||
+    itemRole === 'menuitemradio' ||
+    itemRole === 'menuitemcheckbox' ||
+    itemRole === 'tab'
 
   const listRoleTypes = ['listbox', 'menu', 'list']
   const listSemantics = (listRole && listRoleTypes.includes(listRole)) || inactive || listItemSemantics