Merge branch 'main' into actionlist-group-docs-update

.changeset/cold-starfishes-shout.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update Banner to use an explicit aria-label instead of being labelled by Banner title

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["docs", "example-*"]
+  "ignore": ["docs", "example-*", "codesandbox"]
 }

.changeset/grumpy-coats-worry.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Broaden feature flag type for experimental FeatureFlags to accept undefined

.changeset/thin-ligers-turn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+BranchName: Fixing text color when rendered as span

docs/package.json

@@ -34,7 +34,7 @@
     "styled-system": "^5.1.0"
   },
   "devDependencies": {
-    "cross-env": "7.0.2",
+    "cross-env": "7.0.3",
     "eslint": "8.56.0",
     "eslint-config-react-app": "7.0.1",
     "globby": "^11.0.4",

e2e/components/ActionMenu.test.ts

@@ -13,8 +13,8 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-
-          // Default state
+          // Open state
+          await page.getByRole('button', {name: 'Open menu'}).click()
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`)
         })
 
@@ -25,6 +25,7 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
+          await page.getByRole('button', {name: 'Open menu'}).click()
           await expect(page).toHaveNoViolations()
         })
       })
@@ -36,30 +37,30 @@ test.describe('ActionMenu', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'components-actionmenu-features--links-and-actions',
+            id: 'components-actionmenu-features--inactive-items',
             globals: {
               colorScheme: theme,
             },
           })
 
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Links And Actions.${theme}.png`,
-          )
-
-          // Open menu
+          // Open state
           await page.locator('button', {hasText: 'Open menu'}).waitFor()
           await page.getByRole('button', {name: 'Open menu'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `ActionMenu.Inactive Items.${theme}.png`,
+          )
         })
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'components-actionmenu-features--links-and-actions',
+            id: 'components-actionmenu-features--inactive-items',
             globals: {
               colorScheme: theme,
             },
           })
+          // Open menu
+          await page.locator('button', {hasText: 'Open menu'}).waitFor()
+          await page.getByRole('button', {name: 'Open menu'}).click()
           await expect(page).toHaveNoViolations()
         })
       })
@@ -77,7 +78,8 @@ test.describe('ActionMenu', () => {
             },
           })
 
-          // Default state
+          // Open state
+          await page.getByRole('button', {name: 'Open menu'}).click()
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `ActionMenu.Links And Actions.${theme}.png`,
           )
@@ -90,6 +92,8 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
+          // Open Menu
+          await page.getByRole('button', {name: 'Open menu'}).click()
           await expect(page).toHaveNoViolations()
         })
       })
@@ -107,7 +111,8 @@ test.describe('ActionMenu', () => {
             },
           })
 
-          // Default state
+          // Open state
+          await page.getByRole('button', {name: 'Display'}).click()
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `ActionMenu.Multi Select.${theme}.png`,
           )
@@ -120,6 +125,9 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
+
+          // Open state
+          await page.getByRole('button', {name: 'Display'}).click()
           await expect(page).toHaveNoViolations()
         })
       })
@@ -137,7 +145,8 @@ test.describe('ActionMenu', () => {
             },
           })
 
-          // Default state
+          // Open state
+          await page.getByRole('button', {name: 'Options: fast Forward'}).click()
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `ActionMenu.Single Select.${theme}.png`,
           )
@@ -150,6 +159,9 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
+
+          // Open state
+          await page.getByRole('button', {name: 'Options: fast Forward'}).click()
           await expect(page).toHaveNoViolations()
         })
       })
@@ -167,7 +179,7 @@ test.describe('ActionMenu', () => {
             },
           })
 
-          // Default state
+          await page.getByRole('button', {name: 'Open Menu'}).click()
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `ActionMenu.Controlled Menu.${theme}.png`,
           )
@@ -180,6 +192,9 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
+
+          // Open state
+          await page.getByRole('button', {name: 'Open Menu'}).click()
           await expect(page).toHaveNoViolations()
         })
       })
@@ -257,7 +272,7 @@ test.describe('ActionMenu', () => {
             },
           })
 
-          // Default state
+          // Open state
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `ActionMenu.Groups And Descriptions.${theme}.png`,
           )
@@ -270,13 +285,9 @@ test.describe('ActionMenu', () => {
               colorScheme: theme,
             },
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'aria-required-children': {
-                enabled: false,
-              },
-            },
-          })
+
+          // Open state
+          await expect(page).toHaveNoViolations()
         })
       })
     }

e2e/test-helpers/storybook.ts

@@ -35,8 +35,14 @@ export async function visit(page: Page, options: Options) {
     url.searchParams.set('globals', params)
   }
 
+  /** Mock live avatar urls to make them stable for visual diffing (vrt) */
+  await page.route('https://github.com/*.png', async route => {
+    await route.continue({url: 'https://github.com/primer.png'})
+  })
+
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
   await page.waitForSelector('#storybook-root > *')
+
   await waitForImages(page)
 }

examples/nextjs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^18.2.0",
-    "@primer/react": "36.16.0",
+    "@primer/react": "36.17.0",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",