Merge branch 'main' into joycezhu/autocomplete_input_open_on_focus

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",

packages/react/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/react
 
+## 36.17.0
+
+### Minor Changes
+
+- [#4389](https://github.com/primer/react/pull/4389) [`02035fef00d927cdf6ff97ce005592657f9a6d13`](https://github.com/primer/react/commit/02035fef00d927cdf6ff97ce005592657f9a6d13) Thanks [@JeffreyKozik](https://github.com/JeffreyKozik)! - experimental/SelectPanel + FormControl: Automatically wires SelectPanel v2 to the accessibility and validation provided by the FormControl component it's nested within
+
+- [#4335](https://github.com/primer/react/pull/4335) [`8b4d838b84af07b0baa7abeda96c5502b9339f19`](https://github.com/primer/react/commit/8b4d838b84af07b0baa7abeda96c5502b9339f19) Thanks [@joshblack](https://github.com/joshblack)! - Add support for experimental Banner component
+
+### Patch Changes
+
+- [#4484](https://github.com/primer/react/pull/4484) [`1c847bdf75e28d62015c5b8e9d77c26e5b0995dc`](https://github.com/primer/react/commit/1c847bdf75e28d62015c5b8e9d77c26e5b0995dc) Thanks [@JelloBagel](https://github.com/JelloBagel)! - TreeView: Fix returning focus when active element is not a treeitem
+
 ## 36.16.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "36.16.0",
+  "version": "36.17.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

packages/react/src/Button/Button.features.stories.tsx

@@ -1,6 +1,8 @@
 import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
+import {announce} from '@primer/live-region-element'
+import Link from '../Link'
 
 export default {
   title: 'Components/Button/Features',
@@ -16,44 +18,81 @@ export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading vis
 
 export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
 
+const AccessibilityNote = () => {
+  {
+    return (
+      <>
+        <p>
+          <b>Accessibility note</b>: If a button is dynamically updated to communicate a change (e.g. an action was
+          successful), please make sure that this is also properly communicated to screen reader users. This may not
+          happen reliably without additional markup considerations. Make sure to choose an approach that is appropriate
+          for your usecase.
+        </p>
+        <p>
+          Learn more about at{' '}
+          <Link href="https://github.com/github/accessibility/blob/8b300b36d8bca28fd5e3e70ffa077a6f8ee65c05/docs/wiki/screen-reader-testing/dynamically-updated-buttons-support-april-2024.md">
+            Staff-only: Dynamically updated button labels
+          </Link>
+          .
+        </p>
+      </>
+    )
+  }
+}
 export const TrailingCounter = () => {
   const [count, setCount] = useState(0)
+  const onClick = () => {
+    setCount(count + 1)
+    announce(`Watch ${count + 1}`)
+  }
   return (
-    <Button onClick={() => setCount(count + 1)} count={count}>
-      Watch
-    </Button>
+    <>
+      <Button onClick={onClick} count={count}>
+        Watch
+      </Button>
+      <AccessibilityNote />
+      <p>In this example, a live region has been implemented to communicate the change.</p>
+    </>
   )
 }
 
 export const TrailingCounterAllVariants = () => {
   const [count, setCount] = useState(0)
+  const onClick = () => {
+    setCount(count + 1)
+    announce(`Watch ${count + 1}`)
+  }
   return (
-    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
-      <Button onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="primary" onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="primary" disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="danger" onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="danger" disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="invisible" onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="invisible" disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-    </div>
+    <>
+      <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+        <Button onClick={onClick} count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="primary" disabled count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="danger" count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="danger" disabled count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="invisible" count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="invisible" disabled count={count}>
+          Watch
+        </Button>
+      </div>
+      <AccessibilityNote />
+      <p>In these examples, a live region has been implemented to communicate the change.</p>
+    </>
   )
 }