From 042be17cfa97cfda03348d44beabb1bd919d3045 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 9 Mar 2026 11:26:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20MoreLi?=
 =?UTF-8?q?nk=20a11y=20and=20UX=20on=20home=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render MoreLink once in LeftColumn, make full phrase clickable and add icon.
---
 CHANGELOG.md                                      |  1 +
 .../src/features/home/components/MoreLink.tsx     | 14 ++++++++------
 src/frontend/src/features/home/routes/Home.tsx    | 15 +--------------
 src/frontend/src/locales/de/home.json             |  2 +-
 src/frontend/src/locales/en/home.json             |  2 +-
 src/frontend/src/locales/fr/home.json             |  2 +-
 src/frontend/src/locales/nl/home.json             |  2 +-
 7 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00a51a98..6ecd8b5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 ### Changed
 
 - ♿️(frontend) sync html lang attribute with i18n for screen readers #1111
+- ♿️(frontend) improve MoreLink a11y and UX on home page #1112
 
 ## [1.10.0] - 2026-03-05
 
diff --git a/src/frontend/src/features/home/components/MoreLink.tsx b/src/frontend/src/features/home/components/MoreLink.tsx
index 7b5db650..10263f73 100644
--- a/src/frontend/src/features/home/components/MoreLink.tsx
+++ b/src/frontend/src/features/home/components/MoreLink.tsx
@@ -2,23 +2,25 @@ import { A, Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { useConfig } from '@/api/useConfig'
 
+const appTitle = import.meta.env.VITE_APP_TITLE ?? 'LaSuite Meet'
+
 export const MoreLink = () => {
   const { t } = useTranslation('home')
   const { data } = useConfig()
 
-  if (!data?.manifest_link) return
+  if (!data?.manifest_link) return null
 
   return (
-    <Text as={'p'} variant={'sm'} style={{ padding: '1rem 0' }}>
+    <Text as="p" variant="sm" style={{ padding: '1rem 0' }}>
       <A
         href={data?.manifest_link}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={t('moreLinkLabel')}
+        externalIcon
+        aria-label={t('moreLinkLabel', { appTitle })}
       >
-        {t('moreLink')}
-      </A>{' '}
-      {t('moreAbout', { appTitle: `${import.meta.env.VITE_APP_TITLE}` })}
+        {t('moreLink')} {t('moreAbout', { appTitle })}
+      </A>
     </Text>
   )
 }
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index be81e49f..e6d8cf27 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -258,23 +258,10 @@ export const Home = () => {
               </DialogTrigger>
             </div>
             <Separator />
-            <div
-              className={css({
-                display: { base: 'none', lg: 'inline' },
-              })}
-            >
-              <MoreLink />
-            </div>
+            <MoreLink />
           </LeftColumn>
           <RightColumn>
             <IntroSlider />
-            <div
-              className={css({
-                display: { base: 'inline', lg: 'none' },
-              })}
-            >
-              <MoreLink />
-            </div>
           </RightColumn>
         </Columns>
         <LaterMeetingDialog
diff --git a/src/frontend/src/locales/de/home.json b/src/frontend/src/locales/de/home.json
index bdc3839e..ec8fbd6b 100644
--- a/src/frontend/src/locales/de/home.json
+++ b/src/frontend/src/locales/de/home.json
@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "Sie können einem Meeting beitreten, indem Sie den vollständigen Link in die Adressleiste Ihres Browsers einfügen.",
   "joinMeetingTipHeading": "Wussten Sie schon?",
   "loginToCreateMeeting": "Melden Sie sich an, um ein Meeting zu erstellen",
-  "moreLinkLabel": "Mehr erfahren – neues Tab",
+  "moreLinkLabel": "Mehr erfahren über {{appTitle}} – neues Tab",
   "moreLink": "Mehr erfahren",
   "moreAbout": "über {{appTitle}}",
   "createMenu": {
diff --git a/src/frontend/src/locales/en/home.json b/src/frontend/src/locales/en/home.json
index 7cc6543a..e23d0f4e 100644
--- a/src/frontend/src/locales/en/home.json
+++ b/src/frontend/src/locales/en/home.json
@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "You can join a meeting by pasting its full link in the browser's address bar.",
   "joinMeetingTipHeading": "Did you know?",
   "loginToCreateMeeting": "Login to create a meeting",
-  "moreLinkLabel": "Learn more - new tab",
+  "moreLinkLabel": "Learn more about {{appTitle}} - new tab",
   "moreLink": "Learn more",
   "moreAbout": "about {{appTitle}}",
   "createMenu": {
diff --git a/src/frontend/src/locales/fr/home.json b/src/frontend/src/locales/fr/home.json
index 73e8ccae..5a967d98 100644
--- a/src/frontend/src/locales/fr/home.json
+++ b/src/frontend/src/locales/fr/home.json
@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "Vous pouvez rejoindre une réunion en copiant directement son lien complet dans la barre d'adresse du navigateur.",
   "joinMeetingTipHeading": "Astuce",
   "loginToCreateMeeting": "Connectez-vous pour créer une réunion",
-  "moreLinkLabel": "En savoir plus - nouvelle fenêtre",
+  "moreLinkLabel": "En savoir plus sur {{appTitle}} - nouvelle fenêtre",
   "moreLink": "En savoir plus",
   "moreAbout": "sur {{appTitle}}",
   "createMenu": {
diff --git a/src/frontend/src/locales/nl/home.json b/src/frontend/src/locales/nl/home.json
index 63199cd8..c4afc876 100644
--- a/src/frontend/src/locales/nl/home.json
+++ b/src/frontend/src/locales/nl/home.json
@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "U kunt deelnemen aan een vergadering door de volledige link in de adresbalk van de browser te plakken.",
   "joinMeetingTipHeading": "Wist u dat?",
   "loginToCreateMeeting": "Log in om een vergadering te maken",
-  "moreLinkLabel": "Meer informatie - nieuw tabblad",
+  "moreLinkLabel": "Meer informatie over {{appTitle}} - nieuw tabblad",
   "moreLink": "Meer informatie",
   "moreAbout": "over {{appTitle}}",
   "createMenu": {