Merge branch 'main' into bump-prim-v10

Author: langermank

.changeset/chilled-nails-juggle.md

@@ -30,4 +30,116 @@ test.describe('NavList', () => {
       })
     }
   })
+
+  test.describe('With Title and Heading', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist-devonly--with-group-title-and-heading',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With Title and Heading.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist-devonly--with-group-title-and-heading',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Simple', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--simple',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.Simple.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--simple',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('With Group', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-group',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With Group.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-group',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('With Sub Items', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-sub-items',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With Sub Items.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-sub-items',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

.changeset/clever-bears-jog.md

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.7.2",
+    "@primer/react": "37.8.0",
     "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

.changeset/cyan-eggs-sort.md

@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "@primer/react": "37.7.2",
+    "@primer/react": "37.8.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

.changeset/eight-bears-worry.md

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.9.0",
-    "@primer/react": "37.7.2",
+    "@primer/react": "37.8.0",
     "clsx": "^1.2.1",
     "next": "^14.2.10",
     "react": "^18.3.1",

.changeset/famous-laws-confess.md

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

.changeset/flat-sheep-look.md

@@ -112,6 +112,7 @@ export type ActionListGroupHeadingProps = Pick<ActionListGroupProps, 'variant' |
   SxProp &
   React.HTMLAttributes<HTMLElement> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+    headingWrapElement?: 'div' | 'li'
     _internalBackwardCompatibleTitle?: string
   }
 
@@ -132,6 +133,7 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
   children,
   className,
   sx = defaultSxProp,
+  headingWrapElement = 'div',
   ...props
 }) => {
   const {variant: listVariant, role: listRole} = React.useContext(ListContext)
@@ -158,6 +160,7 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
     fontSize: 0,
     fontWeight: 'bold',
     color: 'fg.muted',
+    listStyle: 'none',
     ...(variant === 'filled' && {
       backgroundColor: 'canvas.subtle',
       marginX: 0,
@@ -186,13 +189,13 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
     <>
       {/* for listbox (SelectPanel) and menu (ActionMenu) roles, group titles are presentational. */}
       {listRole && listRole !== 'list' ? (
-        <Box sx={styles} role="presentation" aria-hidden="true" {...props}>
+        <Box sx={styles} role="presentation" aria-hidden="true" {...props} as={headingWrapElement}>
           <span id={groupHeadingId}>{_internalBackwardCompatibleTitle ?? children}</span>
           {auxiliaryText && <div className="ActionListGroupHeadingDescription">{auxiliaryText}</div>}
         </Box>
       ) : (
         // for explicit (role="list" is passed as prop) and implicit list roles (ActionList ins rendered as list by default), group titles are proper heading tags.
-        <Box sx={styles}>
+        <Box sx={styles} as={headingWrapElement}>
           <Heading
             className={clsx(className, 'ActionListGroupHeading')}
             as={as || 'h3'}