Merge branch 'main' into add-aria-expanded-state-take-two

.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/thin-ligers-turn.md

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

contributor-docs/testing.md

@@ -132,6 +132,9 @@ available, check out the table below.
 > However, screenshots will not match and new ones will need to be generated on
 > your first test run.
 
+> [!TIP]
+> To re-generate snapshots within your pull request, add the `update snapshots` label.
+
 ### Prerequisites
 
 To run Playwright locally, first install the dependencies of the project by

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/components/Banner.test.ts

@@ -0,0 +1,112 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+import {viewports} from '../test-helpers/viewports'
+
+const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
+  {
+    title: 'Default',
+    id: 'drafts-components-banner--default',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'Critical',
+    id: 'drafts-components-banner-features--critical',
+  },
+  {
+    title: 'Dismiss',
+    id: 'drafts-components-banner-features--dismiss',
+  },
+  {
+    title: 'Dismiss With Actions',
+    id: 'drafts-components-banner-features--dismiss-with-actions',
+  },
+  {
+    title: 'Info',
+    id: 'drafts-components-banner-features--info',
+  },
+  {
+    title: 'Success',
+    id: 'drafts-components-banner-features--success',
+  },
+  {
+    title: 'Upsell',
+    id: 'drafts-components-banner-features--upsell',
+  },
+  {
+    title: 'Warning',
+    id: 'drafts-components-banner-features--warning',
+  },
+  {
+    title: 'WithActions',
+    id: 'drafts-components-banner-features--with-actions',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'WithHiddenTitle',
+    id: 'drafts-components-banner-features--with-hidden-title',
+  },
+  {
+    title: 'WithHiddenTitleAndActions',
+    id: 'drafts-components-banner-features--with-hidden-title-and-actions',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'InSidebar',
+    id: 'drafts-components-banner-examples--in-sidebar',
+  },
+  {
+    title: 'Multiline',
+    id: 'drafts-components-banner-examples--multiline',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+]
+
+test.describe('Banner', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+
+      if (story.viewports) {
+        for (const name of story.viewports) {
+          test(`${name} @vrt`, async ({page}) => {
+            await visit(page, {
+              id: story.id,
+            })
+            const width = viewports[name]
+
+            await page.setViewportSize({
+              width,
+              height: 667,
+            })
+            expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${name}.png`)
+          })
+        }
+      }
+    })
+  }
+})

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