diff --git a/.changeset/shaggy-clocks-rule.md b/.changeset/shaggy-clocks-rule.md new file mode 100644 index 0000000000..09c0523601 --- /dev/null +++ b/.changeset/shaggy-clocks-rule.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Improve screen reader accessibility for hints diff --git a/packages/gitbook/src/components/DocumentView/Hint.tsx b/packages/gitbook/src/components/DocumentView/Hint.tsx index 17181ad064..8800cc7dd8 100644 --- a/packages/gitbook/src/components/DocumentView/Hint.tsx +++ b/packages/gitbook/src/components/DocumentView/Hint.tsx @@ -3,6 +3,8 @@ import { Icon, type IconName } from '@gitbook/icons'; import { type ClassValue, tcls } from '@/lib/tailwind'; +import { getSpaceLanguage, tString } from '@/intl/server'; +import { languages } from '@/intl/translations'; import { Block, type BlockProps } from './Block'; import { Blocks } from './Blocks'; import { getBlockTextStyle } from './spacing'; @@ -18,6 +20,12 @@ export function Hint({ const firstLine = getBlockTextStyle(firstNode); const hasHeading = ['heading-1', 'heading-2', 'heading-3'].includes(firstNode.type); + const language = contextProps.context.contentContext + ? getSpaceLanguage(contextProps.context.contentContext) + : languages.en; + + const label = tString(language, `hint_${block.data.style}`); + return (