fix group roles based on latest discussion

Author: siddharthkp

src/ActionList2/Group.tsx

@@ -3,7 +3,6 @@ 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 = {
   /**
@@ -24,7 +23,6 @@ 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.
@@ -40,7 +38,6 @@ export const Group: React.FC<GroupProps> = ({
   variant = 'subtle',
   auxiliaryText,
   selectionVariant,
-  role,
   sx = {},
   ...props
 }) => {
@@ -49,6 +46,7 @@ export const Group: React.FC<GroupProps> = ({
   return (
     <Box
       as="li"
+      role="none"
       sx={{
         '&:not(:first-child)': {marginTop: 2},
         listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
@@ -58,7 +56,7 @@ export const Group: React.FC<GroupProps> = ({
     >
       {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId} />}
       <GroupContext.Provider value={{selectionVariant}}>
-        <Box as="ul" sx={{paddingInlineStart: 0}} aria-labelledby={title ? labelId : undefined} role={role}>
+        <Box as="ul" sx={{paddingInlineStart: 0}} aria-labelledby={title ? labelId : undefined} role="group">
           {props.children}
         </Box>
       </GroupContext.Provider>

src/stories/ActionMenu2/examples.stories.tsx

@@ -171,8 +171,8 @@ export function GroupsAndDescription(): JSX.Element {
             Milestone
           </ActionMenu.Button>
           <ActionMenu.Overlay width="medium">
-            <ActionList selectionVariant="single" showDividers role="none">
-              <ActionList.Group title="Open" role="menu">
+            <ActionList selectionVariant="single" showDividers>
+              <ActionList.Group title="Open">
                 {milestones
                   .filter(milestone => !milestone.name.includes('21'))
                   .map((milestone, index) => (
@@ -189,7 +189,7 @@ export function GroupsAndDescription(): JSX.Element {
                     </ActionList.Item>
                   ))}
               </ActionList.Group>
-              <ActionList.Group title="Closed" role="menu">
+              <ActionList.Group title="Closed">
                 {milestones
                   .filter(milestone => milestone.name.includes('21'))
                   .map((milestone, index) => (
@@ -270,7 +270,6 @@ export function MultipleSelection(): JSX.Element {
             <ActionList selectionVariant="multiple" showDividers>
               {users.map(user => (
                 <ActionList.Item
-                  role="option"
                   key={user.login}
                   selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
                   onSelect={() => toggleAssignee(user)}
@@ -313,16 +312,16 @@ export function MixedSelection(): JSX.Element {
         is an action. This pattern appears inside a ActionMenu for selection view options in Memex
       </p>
 
-      <ActionMenu>
+      <ActionMenu open={true}>
         <ActionMenu.Button
           aria-label="Select field type to group by"
           leadingIcon={selectedOption && selectedOption.icon}
         >
           {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
-          <ActionList role="none">
-            <ActionList.Group selectionVariant="single" title="Group by" role="menu">
+          <ActionList>
+            <ActionList.Group selectionVariant="single" title="Group by">
               {options.map((option, index) => (
                 <ActionList.Item
                   key={index}
@@ -337,9 +336,9 @@ export function MixedSelection(): JSX.Element {
               ))}
             </ActionList.Group>
             {typeof selectedIndex === 'number' && (
-              <ActionList.Group role="menu">
+              <ActionList.Group selectionVariant={false}>
                 <ActionList.Divider />
-                <ActionList.Item onSelect={() => setSelectedIndex(null)} role="menuitem">
+                <ActionList.Item onSelect={() => setSelectedIndex(null)}>
                   <ActionList.LeadingVisual>
                     <XIcon />
                   </ActionList.LeadingVisual>