Revert PRs that are breaking dotcom to get the current release out

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>
   )
 }
 

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) => (

docs/content/PageLayout.mdx

@@ -241,14 +241,14 @@ navigation container is used for.
 
 ### With `aria-label`
 
-Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
+Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
 
 ```jsx live
 <PageLayout>
   <PageLayout.Header aria-label="header">
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Content>
+  <PageLayout.Content aria-label="content">
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
   <PageLayout.Pane>
@@ -262,15 +262,15 @@ Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates
 
 ### With `aria-labelledby`
 
-Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself.
+Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself.
 
 ```jsx live
 <PageLayout>
   <PageLayout.Header aria-labelledby="header-label">
     <Placeholder id="header-label" label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Content>
-    <Placeholder label="Content" height={240} />
+  <PageLayout.Content aria-labelledby="main-label">
+    <Placeholder id="main-label" label="Content" height={240} />
   </PageLayout.Content>
   <PageLayout.Pane>
     <Placeholder label="Pane" height={120} />
@@ -300,35 +300,15 @@ Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` cr
 </PageLayout>
 ```
 
-### With `<main>` landmark
-
-```jsx live
-<PageLayout>
-  <PageLayout.Header>
-    <Placeholder label="Header" height={64} />
-  </PageLayout.Header>
-  <PageLayout.Content>
-    <main>
-      <Placeholder label="Content" height={240} />
-    </main>
-  </PageLayout.Content>
-  <PageLayout.Pane resizable>
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
-  <PageLayout.Footer>
-    <Placeholder label="Footer" height={64} />
-  </PageLayout.Footer>
-</PageLayout>
-```
-
 ## Accessibility
 
-The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header` and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
+The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header`, `PageLayout.Content`, and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
 
-| Component           | Landmark role                                                                                           |
-| :------------------ | :------------------------------------------------------------------------------------------------------ |
-| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role)           |
-| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
+| Component            | Landmark role                                                                                           |
+| :------------------- | :------------------------------------------------------------------------------------------------------ |
+| `PageLayout.Header`  | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role)           |
+| `PageLayout.Content` | [`main`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role)               |
+| `PageLayout.Footer`  | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
 
 Each component may be labeled through either `aria-label` or `aria-labelledby` in order to provide a unique label for the landmark. This can be helpful when there are multiple landmarks of the same type on the page.
 
@@ -338,14 +318,6 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i
 - [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
 - [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role)
 
-### `PageLayout.Content`
-
-The `PageLayout.Content` component does not provide a default `<main>` landmark role.
-If you want to utilize a `<main>` landmark with this component, you may supply one directly [as a child of `PageLayout.Content`](#with-main-landmark).
-When using `<main>` ensure that no other `<main>` landmark exists on the page, as there should only be one per page.
-
-- [`main` usage](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html)
-
 ### `PageLayout.Pane`
 
 The `PageLayout.Pane` component does not provide a default landmark role as the