Use more semantic elements in SubNav

.changeset/empty-poems-sort.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed an issue where `SubNav` links and submenus didn't use sematically correct elements.

packages/react/src/SubNav/SubNav.module.css

@@ -46,6 +46,12 @@
   display: contents;
 }
 
+.SubNav__links-overlay {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 /*
  * Narrow breakpoint
  */
@@ -149,6 +155,9 @@
   }
 
   .SubNav__sub-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
     padding-inline-start: var(--base-size-16);
   }
 }
@@ -232,7 +241,7 @@
   .SubNav__link-label::after {
     content: '';
     position: absolute;
-    bottom: -6px;
+    bottom: -9px;
     left: 0;
     width: 100%;
     height: 2px;

packages/react/src/SubNav/SubNav.module.css.d.ts

@@ -7,9 +7,9 @@ declare const styles: {
   readonly "SubNav__action-container": string;
   readonly "SubNav__sub-menu-icon": string;
   readonly "SubNav__sub-menu-children": string;
+  readonly "SubNav__links-overlay": string;
   readonly "SubNav--open": string;
   readonly "fade-in": string;
-  readonly "SubNav__links-overlay": string;
   readonly "SubNav__links-overlay--open": string;
   readonly "SubNav__overlay-toggle": string;
   readonly "SubNav__link": string;

packages/react/src/SubNav/SubNav.tsx

@@ -63,7 +63,7 @@ export type SubNavProps = {
 
 const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullWidth, hasShadow}: SubNavProps) => {
   const navRef = React.useRef<HTMLElement>(null)
-  const overlayRef = React.useRef<HTMLDivElement>(null)
+  const overlayRef = React.useRef<HTMLUListElement>(null)
   const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)
   const idForLinkContainer = useId()
 
@@ -124,15 +124,15 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
     >
       {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}
       {LinkChildren.length && (
-        <div
+        <ul
           ref={overlayRef}
           id={idForLinkContainer}
           className={clsx(styles['SubNav__links-overlay'], isOpenAtNarrow && styles['SubNav__links-overlay--open'])}
           data-testid={testIds.overlay}
         >
           {LinkChildren}
-          {ActionChild && <div className={styles['SubNav__action-container']}>{ActionChild}</div>}
-        </div>
+          {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}
+        </ul>
       )}
       <button
         className={styles['SubNav__overlay-toggle']}
@@ -254,32 +254,38 @@ const SubNavLink = forwardRef<HTMLAnchorElement | HTMLDivElement, SubNavLinkProp
   })
 
   if (hasSubMenu) {
-    return <SubNavLinkWithSubmenu {...props} ref={ref as RefObject<HTMLDivElement>} />
+    return (
+      <li>
+        <SubNavLinkWithSubmenu {...props} ref={ref as RefObject<HTMLDivElement>} />
+      </li>
+    )
   }
 
   const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, ...rest} = props
 
   return (
-    <a
-      href={href}
-      className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}
-      aria-current={ariaCurrent}
-      data-testid={testId || testIds.link}
-      ref={ref as RefObject<HTMLAnchorElement>}
-      {...rest}
-    >
-      <Text as="span" size="200" className={styles['SubNav__link-label']}>
-        {children}
-      </Text>
-    </a>
+    <li>
+      <a
+        href={href}
+        className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}
+        aria-current={ariaCurrent}
+        data-testid={testId || testIds.link}
+        ref={ref as RefObject<HTMLAnchorElement>}
+        {...rest}
+      >
+        <Text as="span" size="200" className={styles['SubNav__link-label']}>
+          {children}
+        </Text>
+      </a>
+    </li>
   )
 })
 
-function _SubMenu({children, className, ...props}: PropsWithChildren<BaseProps<HTMLDivElement>>) {
+function _SubMenu({children, className, ...props}: PropsWithChildren<BaseProps<HTMLUListElement>>) {
   return (
-    <div className={clsx(styles['SubNav__sub-menu'], className)} {...props}>
+    <ul className={clsx(styles['SubNav__sub-menu'], className)} {...props}>
       {children}
-    </div>
+    </ul>
   )
 }