diff --git a/.changeset/heading-anchor-alignment.md b/.changeset/heading-anchor-alignment.md new file mode 100644 index 0000000000..f7d40c69a8 --- /dev/null +++ b/.changeset/heading-anchor-alignment.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Fix heading anchor alignment with heading text and translate its accessibility label. diff --git a/bun.lock b/bun.lock index b9314f222c..2f8612e21d 100644 --- a/bun.lock +++ b/bun.lock @@ -7,7 +7,7 @@ "devDependencies": { "@biomejs/biome": "^1.9.4", "@changesets/cli": "^2.31.0", - "turbo": "^2.9.14", + "turbo": "^2.9.15", "vercel": "50.37.3", }, }, diff --git a/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx b/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx index 52ea3253f5..12a5127d22 100644 --- a/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx +++ b/packages/gitbook/src/components/DocumentView/Expandable/Expandable.tsx @@ -1,6 +1,8 @@ import type { DocumentBlockExpandable } from '@gitbook/api'; import { Icon } from '@gitbook/icons'; +import { getSpaceLanguage, tString } from '@/intl/server'; +import { defaultLanguage } from '@/intl/translations'; import { getNodeFragmentByType } from '@/lib/document'; import { tcls } from '@/lib/tailwind'; @@ -10,7 +12,7 @@ import { Blocks } from '../Blocks'; import { Inlines } from '../Inlines'; import { Details } from './Details'; -export function Expandable(props: BlockProps) { +export async function Expandable(props: BlockProps) { const { block, style, ancestorBlocks, document, context } = props; const title = getNodeFragmentByType(block, 'expandable-title'); @@ -26,6 +28,10 @@ export function Expandable(props: BlockProps) { let id = block.meta?.id ?? ''; id = context.getId ? context.getId(id) : id; + const language = context.contentContext + ? await getSpaceLanguage(context.contentContext) + : defaultLanguage; + return (
) { /> ) { +export async function Heading(props: BlockProps) { const { block, style, context, ...rest } = props; const textStyle = getBlockTextStyle(block); @@ -18,6 +20,10 @@ export function Heading(props: BlockProps) { let id = block.meta?.id ?? ''; id = context.getId ? context.getId(id) : id; + const language = context.contentContext + ? await getSpaceLanguage(context.contentContext) + : defaultLanguage; + return ( ) { id={id} block={block} className={tcls( - '-ml-6 pr-2', + '-ml-6 self-center pr-2', '[.flip-heading-hash_&]:order-last [.flip-heading-hash_&]:ml-1 [.flip-heading-hash_&]:pl-2' )} iconClassName={tcls('size-4')} - label="Direct link to heading" + label={tString(language, 'direct_link_to_heading')} />