Revert "Update next-major with changes from main (#3354)"

This reverts commit d848aa5.

.github/workflows/accessibility-alt-text-bot.yml

@@ -6,19 +6,12 @@ on:
     types: [opened, edited]
   issue_comment:
     types: [created, edited]
-  discussion:
-    types: [created, edited]
-
-permissions:
-  issues: write
-  pull-requests: write
-  discussions: write
 
 jobs:
   accessibility_alt_text_bot:
     name: Check alt text is set on issue or pull requests
     runs-on: ubuntu-latest
-    if: ${{ github.event.issue || github.event.pull_request || github.event.discussion  }}
+    if: ${{ github.event.issue || github.event.pull_request }}
     steps:
       - name: Get action 'github/accessibility-alt-text-bot'
-        uses: github/accessibility-alt-text-bot@v1.2.0
+        uses: github/accessibility-alt-text-bot@v1.0.0

.github/workflows/ci.yml

@@ -3,12 +3,10 @@ on:
   push:
     branches:
       - main
-      - next-major
   pull_request:
   merge_group:
     branches:
       - main
-      - next-major
     types:
       - checks_requested
 
@@ -160,7 +158,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx storybook build
+        run: npx build-storybook
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook
@@ -206,7 +204,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx storybook build
+        run: npx build-storybook
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.github/workflows/release-schedule.yml

@@ -1,8 +1,6 @@
 name: Release Schedule
 on:
   workflow_dispatch:
-  schedule:
-    - cron: '30 13 * * MON'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
@@ -88,7 +86,7 @@ jobs:
 
             // Issue IDs
             const id = `primer-release-schedule:${format(start, 'yyyy-MM-dd')}`;
-            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-MM-dd')}`;
+            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-M-dd')}`;
 
             core.startGroup(`Previous schedule: ${previousId}`);
             core.info(`Start: ${previousStart}`);
@@ -107,7 +105,7 @@ jobs:
               '<!-- Provide updates for release activities, like cutting releases and different integration points -->',
               '',
               ...eachDayOfInterval({ start, end }).map((day) => {
-                return `- ${format(day, 'EEEE, LLLL do')}`;
+                return `- ${format(day, 'EEEE do')}`;
               }),
               '',
             ].join('\n');
@@ -193,7 +191,7 @@ jobs:
               ISSUE_BODY += '| Last week | Value |\n';
               ISSUE_BODY += '| :-------- | :---- |\n';
               ISSUE_BODY += `| Issue     | [${releaseIssue.title}](${releaseIssue.html_url}) |\n`;
-              ISSUE_BODY += `| Conductor | ${assignees} |\n`;
+              ISSUE_BODY += '| Conductor | ${assignees} |\n';
               ISSUE_BODY += '| Release Pull Request | [Link](https://gh.io/AAksvvr) |\n';
               ISSUE_BODY += '| Integration tests    | [Link](https://gh.io/AAkr65h) |\n';
               ISSUE_BODY += '\n';

.github/workflows/vrt.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx storybook build
+        run: npx build-storybook
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.storybook/main.js

@@ -4,12 +4,7 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-      },
-    },
+    {name: '@storybook/addon-essentials', options: {backgrounds: false}},
     '@storybook/addon-storysource',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
@@ -21,33 +16,26 @@ module.exports = {
       },
     },
     {
-      name: 'storybook-css-modules',
-      // TODO: replace with @storybook/addon-styling for storybook v7
+      name: 'storybook-css-modules', // TODO: replace with @storybook/addon-styling for storybook v7
+      options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
+    },
+  ],
+  core: {
+    builder: {
+      name: 'webpack5',
       options: {
-        cssModulesLoaderOptions: {
-          modules: {
-            localIdentName: 'prc_[local]-[hash:base64:5]',
-          },
-        },
+        fsCache: true,
       },
     },
-  ],
+  },
   features: {
     interactionsDebugger: true,
     storyStoreV7: true,
     buildStoriesJson: true,
   },
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {
-      fastRefresh: true,
-      strictMode: true,
-      builder: {
-        fsCache: true,
-      },
-    },
-  },
-  docs: {
-    autodocs: true,
+  framework: '@storybook/react',
+  reactOptions: {
+    fastRefresh: true,
+    strictMode: true,
   },
 }

.storybook/preview.js

@@ -23,6 +23,12 @@ Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
   }
 })
 
+addons.setConfig({
+  // Some stories may set up keyboard event handlers, which can be interfered
+  // with by these keyboard shortcuts.
+  enableShortcuts: false,
+})
+
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   html: {

contributor-docs/adrs/adr-010-behavior-isolation.md

@@ -84,7 +84,7 @@ Primer React's [recent addition of the Relative Time component](https://github.c
 
 ```typescript
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
-const HTMLElement = root.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
+const HTMLElement = root.HTMLElement || (null as unknown as typeof window['HTMLElement'])
 ```
 
 These lines could also be added to the global context, to avoid adding it to each element.

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

docs/content/SelectPanel.mdx

@@ -12,18 +12,20 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele
 
 ```javascript live noinline
 function getColorCircle(color) {
-  return (
-    <Box
-      borderWidth="1px"
-      borderStyle="solid"
-      bg={color}
-      borderColor={color}
-      width={14}
-      height={14}
-      borderRadius={10}
-      margin="auto"
-    />
-  )
+  return function () {
+    return (
+      <Box
+        borderWidth="1px"
+        borderStyle="solid"
+        bg={color}
+        borderColor={color}
+        width={14}
+        height={14}
+        borderRadius={10}
+        margin="auto"
+      />
+    )
+  }
 }
 
 const items = [