Improve screen reader accessibility for hints (#3680)

Author: zenoachtig

.changeset/shaggy-clocks-rule.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Improve screen reader accessibility for hints

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 (
         <div
             className={tcls(
@@ -38,6 +46,8 @@ export function Hint({
 
                 style
             )}
+            aria-label={label}
+            role="note"
         >
             <div
                 className={tcls(

packages/gitbook/src/intl/translations/de.ts

@@ -126,4 +126,8 @@ export const de = {
     tool_call_skipped: 'Übersprungen "${1}"',
     scroll_back: 'Zurück scrollen',
     scroll_further: 'Weiter scrollen',
+    hint_info: 'Information',
+    hint_warning: 'Warnung',
+    hint_danger: 'Gefahr',
+    hint_success: 'Erfolg',
 };

packages/gitbook/src/intl/translations/en.ts

@@ -123,4 +123,8 @@ export const en = {
     tool_call_skipped: 'Skipped "${1}"',
     scroll_back: 'Scroll back',
     scroll_further: 'Scroll further',
+    hint_info: 'Information',
+    hint_warning: 'Warning',
+    hint_danger: 'Danger',
+    hint_success: 'Success',
 };

packages/gitbook/src/intl/translations/es.ts

@@ -127,4 +127,8 @@ export const es: TranslationLanguage = {
     tool_call_skipped: 'Omitido "${1}"',
     scroll_back: 'Desplazar hacia atrás',
     scroll_further: 'Desplazar más',
+    hint_info: 'Información',
+    hint_warning: 'Advertencia',
+    hint_danger: 'Peligro',
+    hint_success: 'Éxito',
 };

packages/gitbook/src/intl/translations/fr.ts

@@ -122,4 +122,8 @@ export const fr = {
     tool_call_skipped: 'Ignoré "${1}"',
     scroll_back: "Défiler vers l'arrière",
     scroll_further: 'Défiler plus loin',
+    hint_info: 'Information',
+    hint_warning: 'Avertissement',
+    hint_danger: 'Danger',
+    hint_success: 'Succès',
 };

packages/gitbook/src/intl/translations/ja.ts

@@ -125,4 +125,8 @@ export const ja: TranslationLanguage = {
     tool_call_skipped: '"${1}" をスキップしました',
     scroll_back: '戻る',
     scroll_further: '進む',
+    hint_info: '情報',
+    hint_warning: '警告',
+    hint_danger: '危険',
+    hint_success: '成功',
 };

packages/gitbook/src/intl/translations/nl.ts

@@ -125,4 +125,8 @@ export const nl: TranslationLanguage = {
     tool_call_skipped: '"${1}" overgeslagen',
     scroll_back: 'Terug scrollen',
     scroll_further: 'Verder scrollen',
+    hint_info: 'Informatie',
+    hint_warning: 'Waarschuwing',
+    hint_danger: 'Gevaar',
+    hint_success: 'Succes',
 };

packages/gitbook/src/intl/translations/no.ts

@@ -126,4 +126,8 @@ export const no: TranslationLanguage = {
     tool_call_skipped: 'Hoppet over "${1}"',
     scroll_back: 'Rull tilbake',
     scroll_further: 'Rull videre',
+    hint_info: 'Informasjon',
+    hint_warning: 'Advarsel',
+    hint_danger: 'Fare',
+    hint_success: 'Suksess',
 };

packages/gitbook/src/intl/translations/pt-br.ts

@@ -125,4 +125,8 @@ export const pt_br = {
     tool_call_skipped: 'Pulado "${1}"',
     scroll_back: 'Rolar para trás',
     scroll_further: 'Rolar para frente',
+    hint_info: 'Informação',
+    hint_warning: 'Aviso',
+    hint_danger: 'Perigo',
+    hint_success: 'Sucesso',
 };