Revert "Update PRC ActionList implementation to have similar semantic…

…s to PVC. (#2878)" This reverts commit 87883c3.
primer · Jun 12, 2023 · ffe13a7 · ffe13a7
1 parent 8ced0af
commit ffe13a7
Show file tree

Hide file tree

Showing 48 changed files with 902 additions and 1,070 deletions.
diff --git a/.changeset/modern-coins-destroy.md b/.changeset/modern-coins-destroy.md
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png
diff --git a/...enu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png b/...enu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png
diff --git a/...onents/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png b/...onents/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png
diff --git a/...nMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png b/...nMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png
diff --git a/...nu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png b/...nu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png
diff --git a/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png b/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png
diff --git a/...nMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png b/...nMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png b/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png
diff --git a/...derlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png b/...derlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png b/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png
diff --git a/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png b/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png
diff --git a/docs/content/ActionList.mdx b/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 headings
+### With groups
 
 ```javascript live noinline
 const SelectFields = () => {
@@ -196,30 +196,29 @@ const SelectFields = () => {
   }
 
   return (
-    <>
-      <ActionList selectionVariant="multiple">
-        <ActionList.Heading title="Visible fields" />
+    <ActionList selectionVariant="multiple">
+      <ActionList.Group title="Visible fields">
         {visibleOptions.map(option => (
           <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
-      </ActionList>
-      <ActionList
+      </ActionList.Group>
+      <ActionList.Group
+        title="Hidden fields"
         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>
-    </>
+      </ActionList.Group>
+    </ActionList>
   )
 }
 

diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
@@ -2,7 +2,7 @@
 componentId: action_menu
 title: ActionMenu
 status: Beta
-a11yReviewed: false
+a11yReviewed: true
 source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx
 storybook: '/react/storybook?path=/story/components-actionmenu'
 description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
@@ -110,62 +110,65 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 </ActionMenu>
 ```
 
-### Divided into sections
+### With Groups
 
 ```jsx live
 <ActionMenu>
   <ActionMenu.Button>Open column menu</ActionMenu.Button>
 
   <ActionMenu.Overlay>
     <ActionList showDividers>
-      <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>
-        <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.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>
   </ActionMenu.Overlay>
 </ActionMenu>
@@ -190,7 +193,9 @@ const Example = () => {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button leadingIcon={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
+      <ActionMenu.Button aria-label="Select field type" leadingIcon={selectedType.icon}>
+        {selectedType.name}
+      </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
         <ActionList selectionVariant="single">
           {fieldTypes.map((type, index) => (

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