gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-25 03:42:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better aria for breadcrumbs (#3461)

Browse Source
This commit is contained in:
Greg Bergé
2025-07-11 09:45:14 +02:00
committed by GitHub
parent ed684c19a9
commit 0a8dd67541
1 changed files with 27 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/PageBody/PageHeader.tsx
+27 -29
View File
@@ -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,7 +55,7 @@ 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({
@@ -64,38 +63,37 @@ export async function PageHeader(props: {
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>