Update PRC ActionList implementation to have similar semantics to PVC.

.changeset/modern-coins-destroy.md

@@ -0,0 +1,38 @@
+---
+"@primer/react": major
+---
+
+Update PRC ActionList implementation to have similar semantics to PVC.
+* Removes `ActionList.Group`.
+* Adds `ActionList.Heading` to be used for labelling children in an `ActionList`.
+* Adds `headingProps` prop to `ActionList` for adding headings that label internal lists correctly.
+
+ActionList.Groups inside an ActionList generated inaccessible markup. Previous usage:
+```
+<ActionList>
+  <ActionList.Group title="Actions">
+    <ActionList.Item>Create</ActionList.Item>
+    <ActionList.Item>Read</ActionList.Item>
+    <ActionList.Item>Update</ActionList.Item>
+    <ActionList.Item>Delete</ActionList.Item>
+  </ActionList.Group>
+  <ActionList.Group>
+    ...
+  </ActionList.Group>
+</ActionList>
+```
+
+Instead, use `ActionList`s and stack them as needed.
+```
+<div>
+  <ActionList headingProps={{ title: "Actions" }}>
+    <ActionList.Item>Create</ActionList.Item>
+    <ActionList.Item>Read</ActionList.Item>
+    <ActionList.Item>Update</ActionList.Item>
+    <ActionList.Item>Delete</ActionList.Item>
+  </ActionList>
+  <ActionList>
+    ...
+  </ActionList>
+</div>
+```

docs/content/ActionList.mdx

@@ -196,29 +196,29 @@ const SelectFields = () => {
   }
 
   return (
-    <ActionList selectionVariant="multiple">
-      <ActionList.Group title="Visible fields">
+    <>
+      <ActionList selectionVariant="multiple" headingProps={{title: 'Visible fields'}}>
         {visibleOptions.map(option => (
           <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
-      </ActionList.Group>
-      <ActionList.Group
-        title="Hidden fields"
+      </ActionList>
+      <ActionList
         selectionVariant={
           /** selectionVariant override on Group: disable selection if there are no options */
           hiddenOptions.length ? 'multiple' : false
         }
+        headingProps={{title: 'Hidden fields'}}
       >
         {hiddenOptions.map((option, index) => (
           <ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
         {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
-      </ActionList.Group>
-    </ActionList>
+      </ActionList>
+    </>
   )
 }
 

docs/content/ActionMenu.mdx

@@ -117,58 +117,53 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
   <ActionMenu.Button>Open column menu</ActionMenu.Button>
 
   <ActionMenu.Overlay>
+    <ActionList showDividers headingProps={{title: 'Live query'}}>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <SearchIcon />
+        </ActionList.LeadingVisual>
+        repo:github/memex,github/github
+      </ActionList.Item>
+    </ActionList>
+    <ActionList showDividers headingProps={{title: 'Layout'}} variant="subtle">
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <NoteIcon />
+        </ActionList.LeadingVisual>
+        Table
+        <ActionList.Description variant="block">
+          Information-dense table optimized for operations across teams
+        </ActionList.Description>
+      </ActionList.Item>
+      <ActionList.Item role="listitem">
+        <ActionList.LeadingVisual>
+          <ProjectIcon />
+        </ActionList.LeadingVisual>
+        Board
+        <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
+      </ActionList.Item>
+    </ActionList>
     <ActionList showDividers>
-      <ActionList.Group title="Live query">
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <SearchIcon />
-          </ActionList.LeadingVisual>
-          repo:github/memex,github/github
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group title="Layout" variant="subtle">
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <NoteIcon />
-          </ActionList.LeadingVisual>
-          Table
-          <ActionList.Description variant="block">
-            Information-dense table optimized for operations across teams
-          </ActionList.Description>
-        </ActionList.Item>
-        <ActionList.Item role="listitem">
-          <ActionList.LeadingVisual>
-            <ProjectIcon />
-          </ActionList.LeadingVisual>
-          Board
-          <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <FilterIcon />
-          </ActionList.LeadingVisual>
-          Save sort and filters to current view
-        </ActionList.Item>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <FilterIcon />
-          </ActionList.LeadingVisual>
-          Save sort and filters to new view
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <GearIcon />
-          </ActionList.LeadingVisual>
-          View settings
-        </ActionList.Item>
-      </ActionList.Group>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <FilterIcon />
+        </ActionList.LeadingVisual>
+        Save sort and filters to current view
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <FilterIcon />
+        </ActionList.LeadingVisual>
+        Save sort and filters to new view
+      </ActionList.Item>
+    </ActionList>
+    <ActionList>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <GearIcon />
+        </ActionList.LeadingVisual>
+        View settings
+      </ActionList.Item>
     </ActionList>
   </ActionMenu.Overlay>
 </ActionMenu>

e2e/components/ActionMenu.test.ts

@@ -25,13 +25,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -61,13 +55,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -97,13 +85,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -133,13 +115,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -169,13 +145,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -205,13 +175,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -241,13 +205,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
+          await expect(page).toHaveNoViolations()
         })
       })
     }
@@ -277,16 +235,37 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-              'aria-required-children': {
-                enabled: false,
-              },
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Multiple Sections', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionmenu-examples--multiple-sections',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `ActionMenu.Multiple Sections.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionmenu-examples--multiple-sections',
+            globals: {
+              colorScheme: theme,
             },
           })
+          await expect(page).toHaveNoViolations()
         })
       })
     }