Add support for flat nav list with no sections

Author: danielguillan

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

@@ -109,6 +109,14 @@ export const MultipleExpandedSections: Story = {
   render: () => <ExpandedDocsNavigation />,
 }
 
+export const FlatList: Story = {
+  render: () => (
+    <NavList aria-label="Article navigation">
+      {renderArticleItems(['Overview', 'Quickstart', 'Install GitHub Copilot'], 'Overview')}
+    </NavList>
+  ),
+}
+
 export const FiveLevels: Story = {
   render: () => (
     <NavList aria-label="Five-level navigation">

packages/react/src/NavList/NavList.module.css

@@ -23,7 +23,7 @@
   position: relative;
 }
 
-.NavList__list > .NavList__item + .NavList__item {
+.NavList__list:not(.NavList__list--flat) > .NavList__item + .NavList__item {
   background-image: repeating-linear-gradient(
     to right,
     var(--brand-color-border-muted) 0 var(--base-size-2),

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

@@ -15,6 +15,7 @@ declare const styles: {
   readonly "NavList__link": string;
   readonly "NavList__link--disabled": string;
   readonly "NavList__list": string;
+  readonly "NavList__list--flat": string;
   readonly "NavList__subNav": string;
   readonly "NavList__toggleIcon": string;
   readonly "NavList__trailingVisual": string;

packages/react/src/NavList/NavList.test.tsx

@@ -51,6 +51,19 @@ describe('NavList', () => {
     expect(currentLink).toHaveAttribute('aria-current', 'page')
   })
 
+  it('renders a flat root list as leaf items', () => {
+    const {getByRole} = render(<NavListFixture />)
+
+    const list = getByRole('list')
+    const link = getByRole('link', {name: 'Overview'})
+    const item = link.closest('li')
+
+    expect(list).toHaveClass('NavList__list--flat')
+    expect(item).toHaveClass('NavList__item--leaf')
+    expect(item).toHaveClass('NavList__item--level-2')
+    expect(item).not.toHaveClass('NavList__item--level-1')
+  })
+
   it('supports className and ref passthrough on the root', () => {
     const expectedClass = 'test-class'
 
@@ -94,6 +107,45 @@ describe('NavList', () => {
     expect(getByRole('link', {name: 'Custom link'})).toHaveAttribute('href', '/custom')
   })
 
+  it('passes keyboard handlers to rendered item controls', async () => {
+    const user = userEvent.setup()
+    const linkKeyDownTargets: HTMLElement[] = []
+    const toggleKeyDownTargets: HTMLElement[] = []
+    const onLinkKeyDown = jest.fn((event: React.KeyboardEvent<HTMLElement>) => {
+      linkKeyDownTargets.push(event.currentTarget)
+    })
+    const onToggleKeyDown = jest.fn((event: React.KeyboardEvent<HTMLElement>) => {
+      toggleKeyDownTargets.push(event.currentTarget)
+    })
+
+    const {getByRole} = render(
+      <NavList>
+        <NavList.Item href="/overview" onKeyDown={onLinkKeyDown}>
+          Overview
+        </NavList.Item>
+        <NavList.Item onKeyDown={onToggleKeyDown}>
+          Docs
+          <NavList.SubNav>
+            <NavList.Item href="/docs/actions">Actions</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+
+    const link = getByRole('link', {name: 'Overview'})
+    const toggle = getByRole('button', {name: 'Docs expand'})
+
+    link.focus()
+    await user.keyboard('{ArrowDown}')
+    toggle.focus()
+    await user.keyboard('{ArrowDown}')
+
+    expect(onLinkKeyDown).toHaveBeenCalledTimes(1)
+    expect(linkKeyDownTargets[0]).toBe(link)
+    expect(onToggleKeyDown).toHaveBeenCalledTimes(1)
+    expect(toggleKeyDownTargets[0]).toBe(toggle)
+  })
+
   it('renders visual slots', () => {
     const {getByRole} = render(
       <NavList>

packages/react/src/NavList/NavList.tsx

@@ -39,7 +39,7 @@ const testIds = {
   },
 }
 
-type NavListRootProps = {
+export type NavListRootProps = {
   /**
    * Accessible label for the navigation landmark. Defaults to "Navigation".
    */
@@ -100,24 +100,32 @@ const NavListRoot = forwardRef<HTMLElement, NavListRootProps>(
       ...rest
     },
     ref,
-  ) => (
-    <NavListContext.Provider value={{internalAccessibleLabels}}>
-      <nav
-        ref={ref}
-        className={clsx(styles.NavList, className)}
-        aria-label={ariaLabelledBy ? undefined : ariaLabel ?? internalAccessibleLabels.defaultNavigationLabel}
-        aria-labelledby={ariaLabelledBy}
-        data-testid={testId || testIds.root}
-        {...rest}
-      >
-        <NavListLevelContext.Provider value={1}>
-          <ul className={styles.NavList__list} data-testid={testIds.list}>
-            {children}
-          </ul>
-        </NavListLevelContext.Provider>
-      </nav>
-    </NavListContext.Provider>
-  ),
+  ) => {
+    const hasTopLevelSubNav = Children.toArray(children).some(childHasDirectSubNav)
+    const rootLevel = hasTopLevelSubNav ? 1 : 2
+
+    return (
+      <NavListContext.Provider value={{internalAccessibleLabels}}>
+        <nav
+          ref={ref}
+          className={clsx(styles.NavList, className)}
+          aria-label={ariaLabelledBy ? undefined : ariaLabel ?? internalAccessibleLabels.defaultNavigationLabel}
+          aria-labelledby={ariaLabelledBy}
+          data-testid={testId || testIds.root}
+          {...rest}
+        >
+          <NavListLevelContext.Provider value={rootLevel}>
+            <ul
+              className={clsx(styles.NavList__list, !hasTopLevelSubNav && styles['NavList__list--flat'])}
+              data-testid={testIds.list}
+            >
+              {children}
+            </ul>
+          </NavListLevelContext.Provider>
+        </nav>
+      </NavListContext.Provider>
+    )
+  },
 )
 
 type Visual = ReactElement | React.ElementType
@@ -186,6 +194,18 @@ function getTextContent(node: ReactNode): string {
     .join('')
 }
 
+function childHasDirectSubNav(node: ReactNode): boolean {
+  if (!isValidElement(node)) return false
+
+  if (node.type === React.Fragment) {
+    return Children.toArray((node as ElementWithChildren).props.children).some(childHasDirectSubNav)
+  }
+
+  return Children.toArray((node as ElementWithChildren).props.children).some(
+    child => isValidElement<NavListSubNavProps>(child) && child.type === NavListSubNav,
+  )
+}
+
 function renderVisual(visual: Visual | undefined, className: string) {
   if (!visual) return null
 
@@ -216,7 +236,6 @@ const NavListItem = forwardRef(
       leadingVisual,
       onClick,
       onExpandedChange,
-      onKeyDown,
       trailingVisual,
       'aria-current': ariaCurrent,
       'data-testid': testId,
@@ -332,11 +351,9 @@ const NavListItem = forwardRef(
     )
 
     return (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       <li
         className={clsx(styles.NavList__item, levelClassNames[level], isLeafItem && styles['NavList__item--leaf'])}
         data-testid={testId || testIds.item}
-        onKeyDown={onKeyDown}
       >
         <div className={styles.NavList__itemContent}>
           {hasSubNav && canExpand ? (