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">