@primer/doctocat-nextjs 0.0.0-20251114183111 → 0.0.0-20251124211620

package/CHANGELOG.md

@@ -1,16 +1,16 @@
 # @primer/doctocat-nextjs
 
-## 0.0.0-20251114183111
+## 0.0.0-20251124211620
 
 ### Patch Changes
 
 - Fake entry to force publishing
 
-## 0.0.0-20251114183109
+## 0.0.0-20251124211618
 
 ### Patch Changes
 
-- [#70](https://github.com/primer/doctocat-nextjs/pull/70) [`63538e2`](https://github.com/primer/doctocat-nextjs/commit/63538e2c496cb77b4842264a899dffce412b7cfd) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Improve screen reader accessibility by updating sidebar navigation heading hierarchy. The sidebar title now uses a semantic `<Heading>` component with visually hidden text to clarify it's a navigation area, and is properly connected to the `<NavList>` via `aria-labelledby`.
+- [#68](https://github.com/primer/doctocat-nextjs/pull/68) [`b75584e`](https://github.com/primer/doctocat-nextjs/commit/b75584edb6936a70ea94925fc743989422cc3d9a) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Improve screen reader accessibility by updating sidebar navigation heading hierarchy. The sidebar title now uses a semantic `<Heading>` component with visually hidden text to clarify it's a navigation area, and is properly connected to the `<NavList>` via `aria-labelledby`.
 
 ## 0.7.0
 

package/components/content/caption/Caption.module.css

@@ -0,0 +1,6 @@
+.Caption {
+  margin-top: var(--base-size-8);
+  margin-bottom: var(--base-size-12);
+  font-size: var(--brand-text-size-100);
+  color: var(--brand-color-text-default);
+}

package/components/content/caption/Caption.tsx

@@ -1,6 +1,11 @@
 import React, {PropsWithChildren} from 'react'
-import {Text} from '@primer/react'
+import styles from './Caption.module.css'
 
 export function Caption(props: PropsWithChildren) {
-  return <Text as="span" {...props} sx={{mt: 2, mb: 3, fontSize: 1, color: 'var(--brand-color-text-default)'}} />
+  const {children, ...rest} = props
+  return (
+    <span className={styles.Caption} {...rest}>
+      {children}
+    </span>
+  )
 }

package/components/content/dos-and-donts/DosAndDonts.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {Box} from '@primer/react'
 import clsx from 'clsx'
 import styles from './DosAndDonts.module.css'
 
@@ -39,14 +38,9 @@ type DoDontBaseProps = {
 export function DoDontBase({children, title, indented, className, ...rest}: React.PropsWithChildren<DoDontBaseProps>) {
   return (
     <div className={clsx(`exclude-from-prose`, styles.doDontBase, className)} {...rest}>
-      <Box
-        className={styles.header}
-        sx={{
-          color: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))',
-        }}
-      >
+      <div className={styles.header} style={{color: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))'}}>
         <span className={styles.headerText}>{title}</span>
-      </Box>
+      </div>
       <div className={styles.content}>
         {indented ? (
           <blockquote className={styles.indentedContent} style={{borderLeftColor: 'var(--brand-color-border-default)'}}>

package/components/layout/code-block/CodeBlock.module.css

@@ -0,0 +1,5 @@
+.LoadingContainer {
+  border: 1px solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-medium);
+  margin-block-end: var(--base-size-16);
+}

package/components/layout/nav-drawer/Drawer.module.css

@@ -0,0 +1,19 @@
+.DrawerOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.DrawerPanel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 300px;
+  background: var(--brand-color-canvas-default, var(--color-canvas-default));
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+

package/components/layout/nav-drawer/Drawer.tsx

@@ -1,7 +1,7 @@
 import React, {PropsWithChildren} from 'react'
-import {Box} from '@primer/react'
 import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
+import styles from './Drawer.module.css'
 
 type Drawer = {
   isOpen: boolean
@@ -22,29 +22,26 @@ export function Drawer({isOpen, onDismiss, children}: PropsWithChildren<Drawer>)
           tabIndex={0}
         >
           <FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
-            <Box
+            <motion.div
               key="overlay"
-              as={motion.div}
+              className={styles.DrawerOverlay}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
               onClick={() => onDismiss()}
-              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)', position: 'fixed', zIndex: 1}}
             />
 
-            <Box
+            <motion.div
               key="drawer"
-              as={motion.div}
+              className={styles.DrawerPanel}
               initial={{x: '100%'}}
               animate={{x: 0}}
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
-              style={{zIndex: 1}}
-              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0', position: 'fixed'}}
             >
               {children}
-            </Box>
+            </motion.div>
           </FocusOn>
         </div>
       ) : null}

package/components/layout/root-layout/Theme.module.css

@@ -0,0 +1,35 @@
+.StickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+}
+
+.ContentContainer {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.BreadcrumbRoot,
+.BreadcrumbItem {
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.BreadcrumbItem {
+  text-transform: capitalize;
+}
+
+.HeroImageWrapper {
+  padding-block-start: var(--base-size-16);
+  width: 100%;
+}
+
+
+.ActionsWrapper {
+  padding-block-start: var(--base-size-16);
+}
+
+
+.RelatedLinks {
+  padding-top: var(--base-size-20);
+}

package/components/layout/root-layout/Theme.tsx

@@ -4,7 +4,7 @@ import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, PageMapItem} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
-import {BaseStyles, Box as PRCBox, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
+import {BaseStyles, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
 import '@primer/primitives/dist/css/functional/themes/light.css'
 import '@primer/primitives/dist/css/functional/themes/dark.css'
 import {
@@ -119,16 +119,10 @@ export function Theme({pageMap, children}: ThemeProps) {
             </Head>
 
             <ContentWrapper disableAnimations={disablePageAnimation}>
-              <PRCBox
-                sx={{
-                  position: 'sticky',
-                  top: 0,
-                  zIndex: 99,
-                }}
-              >
+              <div style={{position: 'sticky', top: 0, zIndex: 99}}>
                 <SkipToMainContent href="#main">Skip to main content</SkipToMainContent>
                 <Header flatDocsDirectories={flatDocsDirectories} siteTitle={siteTitle} pageMap={pageMap} />
-              </PRCBox>
+              </div>
               <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
                 <PageLayout.Pane
                   width="small"
@@ -145,7 +139,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                 </PageLayout.Pane>
                 <PageLayout.Content padding="normal">
                   <div id="main">
-                    <PRCBox sx={!isHomePage && {maxWidth: 1200, width: '100%', margin: '0 auto'}}>
+                    <div style={!isHomePage ? {maxWidth: 1200, width: '100%', margin: '0 auto'} : undefined}>
                       <Stack direction="vertical" padding="none" gap="spacious">
                         {!isHomePage && (
                           <>
@@ -155,9 +149,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                                   <Breadcrumbs.Item
                                     as={NextLink}
                                     href="/"
-                                    sx={{
-                                      color: 'var(--brand-InlineLink-color-rest)',
-                                    }}
+                                    style={{color: 'var(--brand-InlineLink-color-rest)'}}
                                   >
                                     {activeHeaderLink ? activeHeaderLink.title : siteTitle}
                                   </Breadcrumbs.Item>
@@ -166,8 +158,6 @@ export function Theme({pageMap, children}: ThemeProps) {
                                   .filter((item, index, array) => {
                                     const nextItem = array[index + 1]
 
-                                    // Skip when current item is a folder followed by its index page
-                                    // or when it is an index page with a tabbed navigation
                                     return !(
                                       (index < array.length - 1 &&
                                         nextItem.name === 'index' &&
@@ -192,7 +182,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                                         key={item.name}
                                         href={item.route}
                                         selected={isLastItem}
-                                        sx={{
+                                        style={{
                                           textTransform: 'capitalize',
                                           color: 'var(--brand-InlineLink-color-rest)',
                                         }}
@@ -204,7 +194,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                               </Breadcrumbs>
                             )}
 
-                            <Box>
+                            <div>
                               <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
                                 {activeMetadata.title && (
                                   <Heading as="h1" size="3">
@@ -217,12 +207,12 @@ export function Theme({pageMap, children}: ThemeProps) {
                                   </Text>
                                 )}
                                 {activeMetadata.image && (
-                                  <Box paddingBlockStart={16} style={{width: '100%'}}>
+                                  <div style={{paddingBlockStart: 'var(--base-size-16)', width: '100%'}}>
                                     <Hero.Image src={activeMetadata.image} alt={activeMetadata['image-alt']} />
-                                  </Box>
+                                  </div>
                                 )}
                                 {activeMetadata['action-1-text'] && (
-                                  <Box paddingBlockStart={16}>
+                                  <div style={{paddingBlockStart: 'var(--base-size-16)'}}>
                                     <ButtonGroup>
                                       <Button as="a" href={activeMetadata['action-1-link']}>
                                         {activeMetadata['action-1-text']}
@@ -233,10 +223,10 @@ export function Theme({pageMap, children}: ThemeProps) {
                                         </Button>
                                       )}
                                     </ButtonGroup>
-                                  </Box>
+                                  </div>
                                 )}
                               </Stack>
-                            </Box>
+                            </div>
                             {activeMetadata['show-tabs'] && <UnderlineNav tabData={filteredTabData} />}
                           </>
                         )}
@@ -248,16 +238,16 @@ export function Theme({pageMap, children}: ThemeProps) {
                               <>{children}</>
 
                               {relatedLinks.length > 0 && (
-                                <PRCBox sx={{pt: 5}}>
+                                <div style={{paddingTop: 'var(--base-size-20)'}}>
                                   <RelatedContentLinks links={relatedLinks} />
-                                </PRCBox>
+                                </div>
                               )}
                             </>
                           )}
                         </article>
                         <Footer filePath={filePath} repoURL={repoURL} repoSrcPath={repoSrcPath} />
                       </Stack>
-                    </PRCBox>
+                    </div>
                   </div>
                 </PageLayout.Content>
               </PageLayout>

package/components/layout/sidebar/Sidebar.tsx

@@ -49,7 +49,7 @@ export function Sidebar({pageMap}: SidebarProps) {
   return (
     <div className={styles.Sidebar}>
       {activeHeaderLink && (
-        <Heading as="h2"  size="6"  className={styles.Sidebar__title} id="nav-list-heading">
+        <Heading as="h2" size="6" className={styles.Sidebar__title} id="nav-list-heading">
           {activeHeaderLink.title}
           <span className="visually-hidden"> navigation</span>
         </Heading>
@@ -77,7 +77,7 @@ export function Sidebar({pageMap}: SidebarProps) {
           }
 
           return (
-            <NavList.Group title={subNavName} key={item.name} sx={{mb: 24}}>
+            <NavList.Group title={subNavName} key={item.name} style={{marginBottom: 'var(--base-size-24)'}}>
               <NavList.GroupHeading as="h3">
                 <NextLink href={item.route}>{subNavName}</NextLink>
               </NavList.GroupHeading>
@@ -142,7 +142,7 @@ export function Sidebar({pageMap}: SidebarProps) {
                         as={NextLink}
                         key={landingPageItem.route}
                         href={landingPageItem.route}
-                        sx={{textTransform: 'capitalize'}}
+                         style={{textTransform: 'capitalize'}}
                         aria-current={isCurrentOrChild ? 'page' : undefined}
                         className={styles.NavListItem}
                       >
@@ -155,7 +155,7 @@ export function Sidebar({pageMap}: SidebarProps) {
           )
         })}
         {sidebarLinks.length > 0 && (
-          <NavList.Group title="" sx={{mb: 24}}>
+          <NavList.Group title="" style={{marginBottom: 'var(--base-size-24)'}}>
             {sidebarLinks.map(link => {
               return (
                 <NavList.Item

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.0-20251114183111",
+  "version": "0.0.0-20251124211620",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@next/mdx": "15.5.2",
     "@primer/octicons-react": "19.15.1",
-    "@primer/react": "^37.11.0",
+    "@primer/react": "^38.0.0",
     "@types/lodash.debounce": "^4.0.9",
     "framer-motion": "12.4.0",
     "lodash.debounce": "^4.0.8",