Better aria for breadcrumbs (#3461)

Author: gregberge

packages/gitbook/src/components/PageBody/PageHeader.tsx

@@ -5,7 +5,6 @@ import type { AncestorRevisionPage } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
 import type { RevisionPageDocument } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import { Fragment } from 'react';
 import { PageIcon } from '../PageIcon';
 import { StyledLink } from '../primitives';
 
@@ -56,46 +55,45 @@ export async function PageHeader(props: {
                 </div>
             ) : null}
             {ancestors.length > 0 && (
-                <nav>
+                <nav aria-label="Breadcrumb">
                     <ol className={tcls('flex', 'flex-wrap', 'items-center', 'gap-2', 'text-tint')}>
                         {ancestors.map((breadcrumb, index) => {
                             const href = linker.toPathForPage({
                                 pages: revision.pages,
                                 page: breadcrumb,
                             });
                             return (
-                                <Fragment key={breadcrumb.id}>
-                                    <li key={breadcrumb.id}>
-                                        <StyledLink
-                                            href={href}
-                                            className={tcls(
-                                                'no-underline',
-                                                'hover:underline',
-                                                'text-xs',
-                                                'tracking-wide',
-                                                'font-semibold',
-                                                'uppercase',
-                                                'flex',
-                                                'items-center',
-                                                'gap-1.5',
-                                                'contrast-more:underline',
-                                                'contrast-more:decoration-current'
-                                            )}
-                                        >
-                                            <PageIcon
-                                                page={breadcrumb}
-                                                style="flex size-4 items-center justify-center text-base leading-none"
-                                            />
-                                            {breadcrumb.title}
-                                        </StyledLink>
-                                    </li>
+                                <li key={breadcrumb.id} className="flex items-center gap-2">
+                                    <StyledLink
+                                        href={href}
+                                        className={tcls(
+                                            'no-underline',
+                                            'hover:underline',
+                                            'text-xs',
+                                            'tracking-wide',
+                                            'font-semibold',
+                                            'uppercase',
+                                            'flex',
+                                            'items-center',
+                                            'gap-1.5',
+                                            'contrast-more:underline',
+                                            'contrast-more:decoration-current'
+                                        )}
+                                    >
+                                        <PageIcon
+                                            page={breadcrumb}
+                                            style="flex size-4 items-center justify-center text-base leading-none"
+                                        />
+                                        {breadcrumb.title}
+                                    </StyledLink>
                                     {index !== ancestors.length - 1 && (
                                         <Icon
+                                            aria-hidden
                                             icon="chevron-right"
-                                            className={tcls('size-3', 'text-tint-subtle')}
+                                            className="size-3 text-tint-subtle"
                                         />
                                     )}
-                                </Fragment>
+                                </li>
                             );
                         })}
                     </ol>