♿️(frontend) improve ui and qria labels for help article links

Screen readers now announce full link text instead of "Learn more".

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
 

src/frontend/src/features/recording/components/NoAccessView.tsx

@@ -79,11 +79,20 @@ export const NoAccessView = ({
           })}
         >
           {t(`${i18nKey}.body`)}
-          <br />
           {helpArticle && (
-            <A href={helpArticle} target="_blank">
+            <>
-              {t(`${i18nKey}.linkMore`)}
+              {' '}
-            </A>
+              <A
+                href={helpArticle}
+                target="_blank"
+                rel="noopener noreferrer"
+                externalIcon
+                color="note"
+                aria-label={t(`${i18nKey}.linkAriaLabel`)}
+              >
+                {t(`${i18nKey}.linkMore`)}
+              </A>
+            </>
           )}
         </Text>
       </VStack>

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -151,12 +151,16 @@ export const ScreenRecordingSidePanel = () => {
         </H>
         <Text variant="body" fullWidth>
           {recordingMaxDuration
-            ? t('body', {
+            ? t('body', { max_duration: recordingMaxDuration })
-                max_duration: recordingMaxDuration,
-              })
             : t('bodyWithoutMaxDuration')}{' '}
           {data?.support?.help_article_recording && (
-            <A href={data.support.help_article_recording} target="_blank">
+            <A
+              href={data.support.help_article_recording}
+              target="_blank"
+              rel="noopener noreferrer"
+              externalIcon
+              aria-label={t('linkAriaLabel')}
+            >
               {t('linkMore')}
             </A>
           )}

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -187,12 +187,16 @@ export const TranscriptSidePanel = () => {
         </H>
         <Text variant="body" fullWidth>
           {recordingMaxDuration
-            ? t('body', {
+            ? t('body', { max_duration: recordingMaxDuration })
-                max_duration: recordingMaxDuration,
-              })
             : t('bodyWithoutMaxDuration')}{' '}
           {data?.support?.help_article_transcript && (
-            <A href={data.support.help_article_transcript} target="_blank">
+            <A
+              href={data.support.help_article_transcript}
+              target="_blank"
+              rel="noopener noreferrer"
+              externalIcon
+              aria-label={t('linkAriaLabel')}
+            >
               {t('linkMore')}
             </A>
           )}
@@ -208,6 +212,7 @@ export const TranscriptSidePanel = () => {
                   href={data.transcription_destination}
                   target="_blank"
                   rel="noopener noreferrer"
+                  externalIcon
                 >
                   {data.transcription_destination.replace('https://', '')}
                 </A>

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 && (
-          <>
+          <A
-            <A href={data?.support?.help_article_more_tools} target="_blank">
+            href={data.support.help_article_more_tools}
-              {t('moreLink')}
+            target="_blank"
-            </A>
+            rel="noopener noreferrer"
-            .
+            externalIcon
-          </>
+            color="note"
+            aria-label={t('linkAriaLabel')}
+          >
+            {t('moreLink')}
+          </A>
         )}
       </Text>
       {isTranscriptEnabled && (

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. <br/> 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",

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",

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.",
+    "body": "Accéder à davantage d'outils pour améliorer vos réunions.",
-    "moreLink": "En savoir plus",
+    "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. <br/> 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",

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. <br/> 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",