From d5c53c7dd424a75395e23d65ee0841f4a0219704 Mon Sep 17 00:00:00 2001 From: Cyril Date: Fri, 6 Mar 2026 12:04:41 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20ui=20a?= =?UTF-8?q?nd=20qria=20labels=20for=20help=20article=20links?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Screen readers now announce full link text instead of "Learn more". --- CHANGELOG.md | 1 + .../recording/components/NoAccessView.tsx | 17 ++++++++++---- .../components/ScreenRecordingSidePanel.tsx | 12 ++++++---- .../components/TranscriptSidePanel.tsx | 13 +++++++---- .../rooms/livekit/components/Tools.tsx | 17 +++++++++----- src/frontend/src/locales/de/rooms.json | 18 ++++++++++----- src/frontend/src/locales/en/rooms.json | 18 ++++++++++----- src/frontend/src/locales/fr/rooms.json | 22 ++++++++++++------- src/frontend/src/locales/nl/rooms.json | 18 ++++++++++----- 9 files changed, 92 insertions(+), 44 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a693e7a4..0a5f29ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to - ♿️(frontend) sync html lang attribute with i18n for screen readers #1111 - ♿️(frontend) improve MoreLink a11y and UX on home page #1112 - ♿(frontend) improve chat toast a11y for screen readers #1109 +- ♿(frontend) improve ui and qria labels for help article links #1108 ## [1.10.0] - 2026-03-05 diff --git a/src/frontend/src/features/recording/components/NoAccessView.tsx b/src/frontend/src/features/recording/components/NoAccessView.tsx index 48790346..a61c0364 100644 --- a/src/frontend/src/features/recording/components/NoAccessView.tsx +++ b/src/frontend/src/features/recording/components/NoAccessView.tsx @@ -79,11 +79,20 @@ export const NoAccessView = ({ })} > {t(`${i18nKey}.body`)} -
{helpArticle && ( - - {t(`${i18nKey}.linkMore`)} - + <> + {' '} + + {t(`${i18nKey}.linkMore`)} + + )} diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx index 0589106a..050b1c33 100644 --- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx +++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx @@ -151,12 +151,16 @@ export const ScreenRecordingSidePanel = () => { {recordingMaxDuration - ? t('body', { - max_duration: recordingMaxDuration, - }) + ? t('body', { max_duration: recordingMaxDuration }) : t('bodyWithoutMaxDuration')}{' '} {data?.support?.help_article_recording && ( - + {t('linkMore')} )} diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx index a19ce3aa..b9d447f1 100644 --- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx +++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx @@ -187,12 +187,16 @@ export const TranscriptSidePanel = () => { {recordingMaxDuration - ? t('body', { - max_duration: recordingMaxDuration, - }) + ? t('body', { max_duration: recordingMaxDuration }) : t('bodyWithoutMaxDuration')}{' '} {data?.support?.help_article_transcript && ( - + {t('linkMore')} )} @@ -208,6 +212,7 @@ export const TranscriptSidePanel = () => { href={data.transcription_destination} target="_blank" rel="noopener noreferrer" + externalIcon > {data.transcription_destination.replace('https://', '')} diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx index d28d899b..925d20b3 100644 --- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx +++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx @@ -148,17 +148,22 @@ export const Tools = () => { className={css({ textStyle: 'sm', paddingX: '0.75rem', + paddingTop: '0.25rem', marginBottom: '1rem', })} > {t('body')}{' '} {data?.support?.help_article_more_tools && ( - <> - - {t('moreLink')} - - . - + + {t('moreLink')} + )} {isTranscriptEnabled && ( diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index d2f32d34..a9bcabd5 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -327,7 +327,8 @@ }, "moreTools": { "body": "Greifen Sie auf weitere Tools zu, um Ihre Meetings zu verbessern.", - "moreLink": "Mehr erfahren", + "linkAriaLabel": "Dokumentation zu den Tools öffnen - öffnet in neuem Fenster", + "moreLink": "Dokumentation öffnen", "tools": { "transcript": { "title": "Transkribieren", @@ -371,11 +372,13 @@ "starting": "Wird gestartet…", "anotherModeStarted": "Eine Aufnahme läuft.
Wechseln Sie das Menü und stoppen Sie sie." }, - "linkMore": "Mehr erfahren", + "linkMore": "Dokumentation öffnen", + "linkAriaLabel": "Dokumentation zur Transkription öffnen - öffnet in neuem Fenster", "notAdminOrOwner": { "heading": "Zugriff eingeschränkt", "body": "Aus Sicherheitsgründen kann nur der Ersteller oder ein Administrator des Meetings eine Transkription (Beta) starten.", - "linkMore": "Mehr erfahren", + "linkMore": "Dokumentation öffnen", + "linkAriaLabel": "Dokumentation zum Transkriptionszugang öffnen - öffnet in neuem Fenster", "dividerLabel": "ODER", "login": { "heading": "Anmeldung erforderlich", @@ -390,7 +393,8 @@ "premium": { "heading": "Premium-Funktion", "body": "Diese Funktion ist öffentlichen Bediensteten vorbehalten. Wenn Ihre E-Mail-Adresse nicht autorisiert ist, kontaktieren Sie bitte den Support, um Zugriff zu erhalten.", - "linkMore": "Mehr erfahren", + "linkMore": "Dokumentation öffnen", + "linkAriaLabel": "Dokumentation zum Premium-Zugang öffnen - öffnet in neuem Fenster", "dividerLabel": "ODER", "login": { "heading": "Anmeldung erforderlich", @@ -407,7 +411,8 @@ "heading": "Diesen Anruf für später aufzeichnen", "body": "Zeichnen Sie bis zu {{max_duration}} des Meetings auf.", "bodyWithoutMaxDuration": "Zeichnen Sie Ihr Meeting unbegrenzt auf.", - "linkMore": "Mehr erfahren", + "linkMore": "Dokumentation öffnen", + "linkAriaLabel": "Dokumentation zur Aufzeichnung öffnen - öffnet in neuem Fenster", "details": { "receiver": "Die Aufzeichnung wird an den Organisator und die Mitorganisatoren gesendet.", "destination": "Diese Aufzeichnung wird vorübergehend auf unseren Servern gespeichert", @@ -425,7 +430,8 @@ "notAdminOrOwner": { "heading": "Zugriff eingeschränkt", "body": "Aus Sicherheitsgründen kann nur der Ersteller oder ein Administrator des Meetings eine Videoaufnahme (Beta) starten.", - "linkMore": "Mehr erfahren", + "linkMore": "Dokumentation öffnen", + "linkAriaLabel": "Dokumentation zum Aufzeichnungszugang öffnen - öffnet in neuem Fenster", "dividerLabel": "ODER", "login": { "heading": "Anmeldung erforderlich", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index e4ae4b41..034246b6 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -327,7 +327,8 @@ }, "moreTools": { "body": "Access more tools to enhance your meetings.", - "moreLink": "Learn more", + "linkAriaLabel": "Open documentation about tools - opens in new window", + "moreLink": "Open documentation", "tools": { "transcript": { "title": "Transcribe", @@ -371,11 +372,13 @@ "starting": "Starting…", "anotherModeStarted": "Screen recording is running. Switch panels and stop it." }, - "linkMore": "Learn more", + "linkMore": "Open documentation", + "linkAriaLabel": "Open documentation about transcription - opens in new window", "notAdminOrOwner": { "heading": "Restricted Access", "body": "For security reasons, only the meeting creator or an admin can start a transcription (beta).", - "linkMore": "Learn more", + "linkMore": "Open documentation", + "linkAriaLabel": "Open documentation about transcription access - opens in new window", "dividerLabel": "OR", "login": { "heading": "Login Required", @@ -390,7 +393,8 @@ "premium": { "heading": "Premium feature", "body": "This feature is reserved for public agents. If your email address is not authorized, please contact support to get access.", - "linkMore": "Learn more", + "linkMore": "Open documentation", + "linkAriaLabel": "Open documentation about premium access - opens in new window", "dividerLabel": "OR", "login": { "heading": "You are not logged in!", @@ -407,7 +411,8 @@ "heading": "Record this call for later", "body": "Record up to {{max_duration}} of meeting.", "bodyWithoutMaxDuration": "Record your meeting without limit.", - "linkMore": "Learn more", + "linkMore": "Open documentation", + "linkAriaLabel": "Open documentation about recording - opens in new window", "details": { "receiver": "The recording will be sent to the host and co-hosts.", "destination": "This recording will be temporarily stored on our servers", @@ -425,7 +430,8 @@ "notAdminOrOwner": { "heading": "Restricted Access", "body": "For security reasons, only the meeting creator or an admin can start a recording (beta).", - "linkMore": "Learn more", + "linkMore": "Open documentation", + "linkAriaLabel": "Open documentation about recording access - opens in new window", "dividerLabel": "OR", "login": { "heading": "Login Required", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 548ac4c0..f06afb32 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -326,8 +326,9 @@ "messagesLog": "Messages du chat" }, "moreTools": { - "body": "Accèder à d'avantage d'outils pour améliorer vos réunions.", - "moreLink": "En savoir plus", + "body": "Accéder à davantage d'outils pour améliorer vos réunions.", + "linkAriaLabel": "Ouvrir la documentation sur les outils - ouvre dans une nouvelle fenêtre", + "moreLink": "Ouvrir la documentation", "tools": { "transcript": { "title": "Transcrire", @@ -371,11 +372,13 @@ "starting": "Démarrage…", "anotherModeStarted": "Un enregistrement est en cours.
Changez de menu et arrêtez le." }, - "linkMore": "En savoir plus", + "linkMore": "Ouvrir la documentation", + "linkAriaLabel": "Ouvrir la documentation sur la transcription - ouvre dans une nouvelle fenêtre", "notAdminOrOwner": { "heading": "Accès restreint", "body": "Pour des raisons de sécurité, seul le créateur ou un administrateur de la réunion peut lancer une transcription (beta).", - "linkMore": "En savoir plus", + "linkMore": "Ouvrir la documentation", + "linkAriaLabel": "Ouvrir la documentation sur l'accès à la transcription - ouvre dans une nouvelle fenêtre", "dividerLabel": "OU", "login": { "heading": "Connexion requise", @@ -390,7 +393,7 @@ "premium": { "heading": "Fonctionnalité premium", "body": "Cette fonctionnalité est réservée aux agents publics. Si votre adresse email n’est pas autorisée, contactez le support pour obtenir l'accès.", - "linkMore": "En savoir plus", + "linkMore": "Ouvrir la documentation", "dividerLabel": "OU", "login": { "heading": "Vous n'êtes pas connecté !", @@ -400,14 +403,16 @@ "heading": "Demander à l'organisateur", "body": "L'hôte recevra une notification et pourra démarrer la transcription pour vous.", "buttonLabel": "Demander" - } + }, + "linkAriaLabel": "Ouvrir la documentation sur l'accès premium - ouvre dans une nouvelle fenêtre" } }, "screenRecording": { "heading": "Enregistrez cet appel pour plus tard", "body": "Enregistrez jusqu'à {{max_duration}} de réunion.", "bodyWithoutMaxDuration": "Enregistrez votre réunion sans limite.", - "linkMore": "En savoir plus", + "linkMore": "Ouvrir la documentation", + "linkAriaLabel": "Ouvrir la documentation sur l'enregistrement - ouvre dans une nouvelle fenêtre", "details": { "receiver": "L'enregistrement sera envoyé à l'organisateur et aux coorganisateurs.", "destination": "Cet enregistrement sera conservé temporairement sur nos serveurs", @@ -425,7 +430,8 @@ "notAdminOrOwner": { "heading": "Accès restreint", "body": "Pour des raisons de sécurité, seul le créateur ou un administrateur de la réunion peut lancer un enregistrement (beta).", - "linkMore": "En savoir plus", + "linkMore": "Ouvrir la documentation", + "linkAriaLabel": "Ouvrir la documentation sur l'accès à l'enregistrement - ouvre dans une nouvelle fenêtre", "dividerLabel": "OU", "login": { "heading": "Connexion requise", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index a0a1fca9..4979c86c 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -327,7 +327,8 @@ }, "moreTools": { "body": "Je krijgt toegang tot meer tools om je vergaderingen te verbeteren.", - "moreLink": "Lees meer", + "linkAriaLabel": "Documentatie over tools openen - opent in nieuw venster", + "moreLink": "Documentatie openen", "tools": { "transcript": { "title": "Transcriberen", @@ -371,11 +372,13 @@ "starting": "Wordt gestart…", "anotherModeStarted": "Er loopt een opname.
Ga naar het menu en stop deze." }, - "linkMore": "Meer informatie", + "linkMore": "Documentatie openen", + "linkAriaLabel": "Documentatie over transcriptie openen - opent in nieuw venster", "notAdminOrOwner": { "heading": "Toegang beperkt", "body": "Om veiligheidsredenen kan alleen de maker of een beheerder van de vergadering een transcriptie starten (beta).", - "linkMore": "Meer informatie", + "linkMore": "Documentatie openen", + "linkAriaLabel": "Documentatie over transcriptietoegang openen - opent in nieuw venster", "dividerLabel": "OF", "login": { "heading": "Inloggen vereist", @@ -390,7 +393,8 @@ "premium": { "heading": "Premiumfunctie", "body": "Deze functie is voorbehouden aan openbare medewerkers. Als uw e-mailadres niet is toegestaan, neem dan contact op met de support om toegang te krijgen.", - "linkMore": "Meer informatie", + "linkMore": "Documentatie openen", + "linkAriaLabel": "Documentatie over premiumtoegang openen - opent in nieuw venster", "dividerLabel": "OF", "login": { "heading": "Inloggen vereist", @@ -407,7 +411,8 @@ "heading": "Neem dit gesprek op voor later", "body": "Neem tot {{max_duration}} van de vergadering op.", "bodyWithoutMaxDuration": "Neem je vergadering onbeperkt op.", - "linkMore": "Meer informatie", + "linkMore": "Documentatie openen", + "linkAriaLabel": "Documentatie over opname openen - opent in nieuw venster", "details": { "receiver": "De opname wordt verzonden naar de organisator en co-organisatoren.", "destination": "Deze opname wordt tijdelijk op onze servers bewaard", @@ -425,7 +430,8 @@ "notAdminOrOwner": { "heading": "Toegang beperkt", "body": "Om veiligheidsredenen kan alleen de maker of een beheerder van de vergadering een opname starten (beta).", - "linkMore": "Meer informatie", + "linkMore": "Documentatie openen", + "linkAriaLabel": "Documentatie over opnametoegang openen - opent in nieuw venster", "dividerLabel": "OF", "login": { "heading": "Inloggen vereist",