Update PRC ActionList implementation to have similar semantics to PVC.

.changeset/modern-coins-destroy.md

@@ -0,0 +1,39 @@
+---
+"@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 `heading` slot 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>
+    <ActionList.Heading 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

@@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
 </ActionList>
 ```
 
-### With groups
+### With headings
 
 ```javascript live noinline
 const SelectFields = () => {
@@ -196,29 +196,30 @@ const SelectFields = () => {
   }
 
   return (
-    <ActionList selectionVariant="multiple">
-      <ActionList.Group title="Visible fields">
+    <>
+      <ActionList selectionVariant="multiple">
+        <ActionList.Heading 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
         }
       >
+        <ActionList.Heading 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

@@ -110,65 +110,62 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 </ActionMenu>
 ```
 
-### With Groups
+### Divided into sections
 
 ```jsx live
 <ActionMenu>
   <ActionMenu.Button>Open column menu</ActionMenu.Button>
 
   <ActionMenu.Overlay>
     <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.Heading title="Live query" />
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <SearchIcon />
+        </ActionList.LeadingVisual>
+        repo:github/memex,github/github
+      </ActionList.Item>
+    </ActionList>
+    <ActionList showDividers>
+      <ActionList.Heading 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.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

@@ -15,7 +15,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`)
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Default.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -43,9 +43,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Links And Actions.${theme}.png`,
-          )
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Links And Actions.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -73,9 +71,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Multi Select.${theme}.png`,
-          )
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Multi Select.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -103,9 +99,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Single Select.${theme}.png`,
-          )
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Single Select.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -133,9 +127,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Controlled Menu.${theme}.png`,
-          )
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Controlled Menu.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -163,9 +155,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Custom Anchor.${theme}.png`,
-          )
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Anchor.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -193,9 +183,7 @@ test.describe('ActionMenu', () => {
           })
 
           // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Custom Overlay Props.${theme}.png`,
-          )
+          expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Overlay Props.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -235,13 +223,37 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              '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()
         })
       })
     }

generated/components.json

@@ -246,7 +246,7 @@
       "props": [
         {
           "name": "children",
-          "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
+          "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]",
           "defaultValue": "",
           "required": true,
           "description": ""
@@ -423,48 +423,34 @@
           ]
         },
         {
-          "name": "ActionList.Group",
+          "name": "ActionList.Heading",
           "props": [
             {
-              "name": "children",
-              "type": "ActionList.Item[] | ActionList.LinkItem[]",
-              "defaultValue": "",
-              "required": true,
+              "name": "variant",
+              "type": "'subtle' | 'filled'",
+              "defaultValue": "subtle",
               "description": ""
             },
             {
               "name": "title",
               "type": "string",
               "defaultValue": "",
-              "description": "Title of the group."
+              "required": true,
+              "description": ""
             },
             {
-              "name": "auxiliaryText",
+              "name": "subtitle",
               "type": "string",
               "defaultValue": "",
-              "description": "Secondary text that provides additional information about the group."
-            },
-            {
-              "name": "variant",
-              "type": "'filled' | 'subtle'",
-              "defaultValue": "'subtle'",
-              "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
-            },
-            {
-              "name": "selectionVariant",
-              "type": "'single' | 'multiple' | false",
-              "defaultValue": "",
-              "description": "Set `selectionVariant` at the group level."
-            },
-            {
-              "name": "role",
-              "type": "AriaRole",
-              "defaultValue": "",
-              "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
+              "required": false,
+              "description": ""
             },
             {
-              "name": "sx",
-              "type": "SystemStyleObject"
+              "name": "headingLevel",
+              "type": "'1' | '2' | '3' | '4' | '5' | '6'",
+              "defaultValue": "3",
+              "required": false,
+              "description": ""
             }
           ]
         }