diff --git a/packages/react-aria-components/src/Group.tsx b/packages/react-aria-components/src/Group.tsx index 87aa7f8db37..b0ca24a5e58 100644 --- a/packages/react-aria-components/src/Group.tsx +++ b/packages/react-aria-components/src/Group.tsx @@ -87,10 +87,12 @@ export interface GroupProps * Use `'region'` when the contents of the group is important enough to be * included in the page table of contents. Use `'presentation'` if the group * is visual only and does not represent a semantic grouping of controls. + * Use `'button'` when the group wraps focusable text that forwards clicks + * to a parent control, such as the text of a sortable table column header. * * @default 'group' */ - role?: 'group' | 'region' | 'presentation'; + role?: 'group' | 'region' | 'presentation' | 'button'; } export const GroupContext = createContext>({}); diff --git a/starters/docs/src/Table.tsx b/starters/docs/src/Table.tsx index fa4c60ca315..698b2e6ee6e 100644 --- a/starters/docs/src/Table.tsx +++ b/starters/docs/src/Table.tsx @@ -41,7 +41,10 @@ export function Column(props: Omit & {children?: React. {({allowsSorting, sortDirection}) => (
- + {props.children} {allowsSorting && ( diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx index fe3e140db3d..1b1a30a8bb8 100644 --- a/starters/tailwind/src/Table.tsx +++ b/starters/tailwind/src/Table.tsx @@ -69,7 +69,10 @@ export function Column(props: ColumnProps) { )}> {composeRenderProps(props.children, (children, {allowsSorting, sortDirection}) => (
- + {children} {allowsSorting && (