Revert "fix group roles based on latest discussion"

This reverts commit 1e90bda.
primer · Feb 9, 2022 · 9a4706d · 9a4706d
1 parent 1e90bda
commit 9a4706d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git 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<GroupProps> = ({
   variant = 'subtle',
   auxiliaryText,
   selectionVariant,
+  role,
   sx = {},
   ...props
 }) => {
@@ -46,7 +49,6 @@ 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
@@ -56,7 +58,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="group">
+        <Box as="ul" sx={{paddingInlineStart: 0}} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box>
       </GroupContext.Provider>

diff --git a/src/stories/ActionMenu2/examples.stories.tsx b/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>
-              <ActionList.Group title="Open">
+            <ActionList selectionVariant="single" showDividers role="none">
+              <ActionList.Group title="Open" role="menu">
                 {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">
+              <ActionList.Group title="Closed" role="menu">
                 {milestones
                   .filter(milestone => milestone.name.includes('21'))
                   .map((milestone, index) => (
@@ -270,6 +270,7 @@ 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)}
@@ -312,16 +313,16 @@ export function MixedSelection(): JSX.Element {
         is an action. This pattern appears inside a ActionMenu for selection view options in Memex
       </p>
 
-      <ActionMenu open={true}>
+      <ActionMenu>
         <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>
-            <ActionList.Group selectionVariant="single" title="Group by">
+          <ActionList role="none">
+            <ActionList.Group selectionVariant="single" title="Group by" role="menu">
               {options.map((option, index) => (
                 <ActionList.Item
                   key={index}
@@ -336,9 +337,9 @@ export function MixedSelection(): JSX.Element {
               ))}
             </ActionList.Group>
             {typeof selectedIndex === 'number' && (
-              <ActionList.Group selectionVariant={false}>
+              <ActionList.Group role="menu">
                 <ActionList.Divider />
-                <ActionList.Item onSelect={() => setSelectedIndex(null)}>
+                <ActionList.Item onSelect={() => setSelectedIndex(null)} role="menuitem">
                   <ActionList.LeadingVisual>
                     <XIcon />
                   </ActionList.LeadingVisual>