diff --git a/src/ActionList2/Group.tsx b/src/ActionList2/Group.tsx
index 0f5ecbafb56..ff957aa7043 100644
--- a/src/ActionList2/Group.tsx
+++ b/src/ActionList2/Group.tsx
@@ -3,6 +3,7 @@ import {useSSRSafeId} from '@react-aria/ssr'
import Box from '../Box'
import {SxProp} from '../sx'
import {ListContext, ListProps} from './List'
+import {AriaRole} from '../utils/types'
export type GroupProps = {
/**
@@ -23,6 +24,7 @@ export type GroupProps = {
/**
* The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
*/
+ role?: AriaRole
} & SxProp & {
/**
* Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
@@ -38,6 +40,7 @@ export const Group: React.FC = ({
variant = 'subtle',
auxiliaryText,
selectionVariant,
+ role,
sx = {},
...props
}) => {
@@ -46,7 +49,6 @@ export const Group: React.FC = ({
return (
= ({
>
{title && }
-
+
{props.children}
diff --git a/src/stories/ActionMenu2/examples.stories.tsx b/src/stories/ActionMenu2/examples.stories.tsx
index c41634fc25d..3412c22e6e7 100644
--- a/src/stories/ActionMenu2/examples.stories.tsx
+++ b/src/stories/ActionMenu2/examples.stories.tsx
@@ -171,8 +171,8 @@ export function GroupsAndDescription(): JSX.Element {
Milestone
-
-
+
+
{milestones
.filter(milestone => !milestone.name.includes('21'))
.map((milestone, index) => (
@@ -189,7 +189,7 @@ export function GroupsAndDescription(): JSX.Element {
))}
-
+
{milestones
.filter(milestone => milestone.name.includes('21'))
.map((milestone, index) => (
@@ -270,6 +270,7 @@ export function MultipleSelection(): JSX.Element {
{users.map(user => (
assignee.login === user.login))}
onSelect={() => toggleAssignee(user)}
@@ -312,7 +313,7 @@ export function MixedSelection(): JSX.Element {
is an action. This pattern appears inside a ActionMenu for selection view options in Memex
-
+
-
-
+
+
{options.map((option, index) => (
{typeof selectedIndex === 'number' && (
-
+
- setSelectedIndex(null)}>
+ setSelectedIndex(null)} role="menuitem">