fix: Add button role to sortable column header text in Table starters

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<ContextValue<GroupProps, HTMLDivElement>>({});

starters/docs/src/Table.tsx

@@ -41,7 +41,10 @@ export function Column(props: Omit<ColumnProps, 'children'> & {children?: React.
     <AriaColumn {...props} className="react-aria-Column button-base">
       {({allowsSorting, sortDirection}) => (
         <div className="column-header">
-          <Group role="presentation" tabIndex={-1} className="column-name">
+          <Group
+            role={allowsSorting ? 'button' : 'presentation'}
+            tabIndex={-1}
+            className="column-name">
             {props.children}
           </Group>
           {allowsSorting && (

starters/tailwind/src/Table.tsx

@@ -69,7 +69,10 @@ export function Column(props: ColumnProps) {
       )}>
       {composeRenderProps(props.children, (children, {allowsSorting, sortDirection}) => (
         <div className="flex items-center">
-          <Group role="presentation" tabIndex={-1} className={columnStyles}>
+          <Group
+            role={allowsSorting ? 'button' : 'presentation'}
+            tabIndex={-1}
+            className={columnStyles}>
             <span className="truncate">{children}</span>
             {allowsSorting && (
               <span