Merge branch 'main' into fix/selectpanel-a11y

primer · Jan 23, 2025 · 72c5d3d · 72c5d3d
2 parents 8c404a6 + bd405df
commit 72c5d3d
Show file tree

Hide file tree

Showing 10 changed files with 425 additions and 250 deletions.
diff --git a/.changeset/afraid-pianos-invent.md b/.changeset/afraid-pianos-invent.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+bug: ensure Announce components work without pre-existing text node
diff --git a/.changeset/slow-nails-reflect.md b/.changeset/slow-nails-reflect.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update specificity for ButtonBase to be at least 0,1,0
diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
@@ -26,6 +26,6 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "styled-components": "5.x",
     "typescript": "^5.7.2",
-    "vite": "^5.2.14"
+    "vite": "^5.4.12"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -125,15 +125,15 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.5",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-storysource": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-actions": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-storysource": "^8.5.0",
+    "@storybook/preview-api": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
     "@storybook/source-loader": "^8.4.7",
     "@storybook/theming": "^8.4.7",
     "@testing-library/dom": "^10.4.0",
@@ -197,7 +197,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "5.9.2",
     "semver": "7.6.2",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.0",
     "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
@@ -207,7 +207,7 @@
     "unist-util-find": "3.0.0",
     "unist-util-find-before": "4.0.0",
     "unist-util-flat-filter": "2.0.0",
-    "yaml": "2.3.4"
+    "yaml": "2.7.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
@@ -71,7 +71,7 @@ export const TrailingCounterAllVariants = () => {
   }
   return (
     <>
-      <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Stack gap="normal" wrap="wrap" direction="horizontal">
         <Button onClick={onClick} count={count}>
           Watch
         </Button>
@@ -96,7 +96,7 @@ export const TrailingCounterAllVariants = () => {
         <Button onClick={onClick} variant="invisible" disabled count={count}>
           Watch
         </Button>
-      </div>
+      </Stack>
       <AccessibilityNote />
       <p>In these examples, a live region has been implemented to communicate the change.</p>
     </>
@@ -196,9 +196,6 @@ export const LabelWrap = () => {
       <Button labelWrap leadingVisual={HeartIcon} trailingVisual={EyeIcon}>
         This button label will wrap if the label is too long
       </Button>
-      <Button labelWrap trailingAction={TriangleDownIcon}>
-        This button label will wrap if the label is too long
-      </Button>
     </Stack>
   )
 }

diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -1,5 +1,5 @@
 /* Base styles */
-:where(.ButtonBase) {
+.ButtonBase {
   display: flex;
   min-width: max-content;
   height: var(--control-medium-size);
@@ -54,21 +54,21 @@
   }
 
   /* Visuals */
-  & .Visual {
+  & :where(.Visual) {
     display: flex;
     color: var(--fgColor-muted);
     pointer-events: none;
   }
 
   /* mostly for CounterLabel */
-  & .VisualWrap {
+  & :where(.VisualWrap) {
     display: flex;
     pointer-events: none;
   }
 
   /* IconButton */
 
-  &.IconButton {
+  &:where(.IconButton) {
     display: inline-grid;
     width: var(--control-medium-size);
     min-width: unset;
@@ -88,7 +88,7 @@
 
   /* LinkButton */
 
-  &[href] {
+  &:where([href]) {
     display: inline-flex;
 
     &:hover {
@@ -98,7 +98,7 @@
 
   /* Button layout */
 
-  & .ButtonContent {
+  & :where(.ButtonContent) {
     flex: 1 0 auto;
     display: grid;
     grid-template-areas: 'leadingVisual text trailingVisual';
@@ -125,7 +125,7 @@
     grid-area: leadingVisual;
   }
 
-  & .Label {
+  & :where(.Label) {
     /* stylelint-disable-next-line primer/typography */
     line-height: 1.4285714; /* temporary until we use Text component with --text-body-lineHeight-medium */
     white-space: nowrap;

diff --git a/packages/react/src/live-region/Announce.tsx b/packages/react/src/live-region/Announce.tsx
@@ -108,6 +108,7 @@ export function Announce({
     observer.observe(container, {
       subtree: true,
       characterData: true,
+      childList: true,
     })
 
     return () => {

diff --git a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx
@@ -1,6 +1,7 @@
 import {render, screen} from '@testing-library/react'
 import React from 'react'
 import {AriaAlert} from '../AriaAlert'
+import {userEvent} from '@testing-library/user-event'
 import {getLiveRegion} from '../../utils/testing'
 
 describe('AriaAlert', () => {
@@ -46,4 +47,32 @@ describe('AriaAlert', () => {
     )
     expect(screen.getByTestId('container').tagName).toBe('SPAN')
   })
+
+  it('should update live-region element when AriaAlert goes from empty to populated', async () => {
+    function TestComponent() {
+      const [show, setShow] = React.useState(false)
+      return (
+        <>
+          <AriaAlert>{show ? 'Failed to export data!' : null}</AriaAlert>
+          <button
+            type="button"
+            onClick={() => {
+              setShow(true)
+            }}
+          >
+            Export data
+          </button>
+        </>
+      )
+    }
+    const user = userEvent.setup()
+
+    render(<TestComponent />)
+
+    const liveRegion = getLiveRegion()
+    expect(liveRegion.getMessage('assertive')).toBe('')
+
+    await user.click(screen.getByText('Export data'))
+    expect(liveRegion.getMessage('assertive')).toBe('Failed to export data!')
+  })
 })
diff --git a/packages/react/src/live-region/__tests__/AriaStatus.test.tsx b/packages/react/src/live-region/__tests__/AriaStatus.test.tsx
@@ -83,4 +83,32 @@ describe('AriaStatus', () => {
     )
     expect(screen.getByTestId('container').tagName).toBe('SPAN')
   })
+
+  it('should update live-region element when AriaStatus goes from empty to populated', async () => {
+    function TestComponent() {
+      const [show, setShow] = React.useState(false)
+      return (
+        <>
+          <AriaStatus>{show ? 'Export completed' : null}</AriaStatus>
+          <button
+            type="button"
+            onClick={() => {
+              setShow(true)
+            }}
+          >
+            Export data
+          </button>
+        </>
+      )
+    }
+    const user = userEvent.setup()
+
+    render(<TestComponent />)
+
+    const liveRegion = getLiveRegion()
+    expect(liveRegion.getMessage('polite')).toBe('')
+
+    await user.click(screen.getByText('Export data'))
+    expect(liveRegion.getMessage('polite')).toBe('Export completed')
+  })
 })