feat(mespapiers): QRCode accessibility

cozy · May 30, 2023 · 67e3383 · 67e3383
1 parent bda780c
commit 67e3383
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/ScanActions/QRCodeModal.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/ScanActions/QRCodeModal.jsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import { IllustrationDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Link from 'cozy-ui/transpiled/react/Link'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import QRCode from '../../../../assets/images/QRCode.png'
@@ -11,7 +12,7 @@ import playStoreIcon from '../../../../assets/images/playstore.png'
 import { ANDROID_APP_URL, IOS_APP_URL } from '../../../../constants/const'
 
 const QRCodeModal = ({ onClose }) => {
-  const { t } = useI18n()
+  const { t, lang } = useI18n()
 
   return (
     <IllustrationDialog
@@ -25,7 +26,14 @@ const QRCodeModal = ({ onClose }) => {
           className="u-flex u-flex-column u-flex-items-center u-flex-justify-center u-pt-3 u-pb-2 u-ph-1-half"
           data-testid="QRCodeModal"
         >
-          <img src={QRCode} width="100%" alt="" aria-hidden />
+          <Link
+            href={`https://cozy.io/${lang}/download`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={QRCode} width="100%" alt="" aria-hidden />
+            <span className="u-visuallyhidden">{t('QRCodeModal.a11n')}</span>
+          </Link>
           <Typography gutterBottom variant="h3" color="textPrimary">
             {t('QRCodeModal.title')}
           </Typography>

diff --git a/packages/cozy-mespapiers-lib/src/locales/en.json b/packages/cozy-mespapiers-lib/src/locales/en.json
@@ -438,7 +438,8 @@
   },
   "QRCodeModal": {
     "title": "Scan the QR Code",
-    "text": "Or go directly to the <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>l’app-store</a><br>or <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Google Play</a> to install the Cozy Cloud app"
+    "text": "Or go directly to the <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>l’app-store</a><br>or <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Google Play</a> to install the Cozy Cloud app",
+    "a11n": "Aller sur la page de téléchargement de l'application Cozy Cloud"
   },
   "InstallAppModal": {
     "title": "Install the app",

diff --git a/packages/cozy-mespapiers-lib/src/locales/fr.json b/packages/cozy-mespapiers-lib/src/locales/fr.json
@@ -438,7 +438,8 @@
   },
   "QRCodeModal": {
     "title": "Scanner le QR Code",
-    "text": "Ou rendez vous directement sur <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>l’app-store</a><br>ou sur <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Google Play</a> pour installer l’app Cozy Cloud"
+    "text": "Ou rendez vous directement sur <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>l’app-store</a><br>ou sur <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Google Play</a> pour installer l’app Cozy Cloud",
+    "a11n": "Aller sur la page de téléchargement de l'application Cozy Cloud"
   },
   "InstallAppModal": {
     "title": "Installer l’application",