From a8db5b3782b81288f2ce3348be9af93d03e1337e Mon Sep 17 00:00:00 2001
From: Yann Kozon <contact@yannkozon.com>
Date: Mon, 18 Jan 2021 11:11:13 +0100
Subject: [PATCH] Fix accessibility problem with the 2FA QR code (#4915)

* Add alt to qr code

* Add alt to qr code

* Fix contrast for api key link

* Add translate qrcode alt

* Add translatation for QR code alternative

* Fix extra space

* Add translation for qrcode image alternative
---
 src/Wallabag/CoreBundle/Resources/translations/messages.en.yml  | 1 +
 .../Resources/views/themes/baggy/Config/index.html.twig         | 2 +-
 .../Resources/views/themes/material/Config/index.html.twig      | 2 +-
 .../ImportBundle/Resources/views/Pocket/index.html.twig         | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Wallabag/CoreBundle/Resources/translations/messages.en.yml b/src/Wallabag/CoreBundle/Resources/translations/messages.en.yml
index 1134fc977..a0d5fb23b 100644
--- a/src/Wallabag/CoreBundle/Resources/translations/messages.en.yml
+++ b/src/Wallabag/CoreBundle/Resources/translations/messages.en.yml
@@ -212,6 +212,7 @@ config:
             two_factor_code_description_5: "If you can't see the QR Code or can't scan it, enter the following secret in your app:"
             cancel: Cancel
             enable: Enable
+            qrcode_label: QR code
 entry:
     default_title: Title of the entry
     page_titles:
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Config/index.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Config/index.html.twig
index b6edce39e..1af2ae04e 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Config/index.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Config/index.html.twig
@@ -84,7 +84,7 @@
                 <h3>{{ 'config.form_settings.android_configuration'|trans }}</h3>
                 <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}">{{ 'config.form_settings.android_instruction' | trans }}</a>
                 <br/>
-                <img id="androidQrcode" />
+                <img id="androidQrcode" alt="{{ 'config.otp.app.qrcode_label' | trans }}" />
                 <script>
                     document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');
                 </script>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig
index 22b38a1b6..93dc15f2b 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig
@@ -110,7 +110,7 @@
                                 <div class="input-field col s12">
                                     <h5>{{ 'config.form_settings.android_configuration'|trans }}</h5>
                                     <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}" class="waves-effect waves-light btn hide-on-large-only">{{ 'config.form_settings.android_instruction' | trans }}</a>
-                                    <img id="androidQrcode" class="hide-on-med-and-down" />
+                                    <img id="androidQrcode" class="hide-on-med-and-down" alt="{{ 'config.otp.app.qrcode_label' | trans }}" />
                                 </div>
                                 <script>
                                     document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');
diff --git a/src/Wallabag/ImportBundle/Resources/views/Pocket/index.html.twig b/src/Wallabag/ImportBundle/Resources/views/Pocket/index.html.twig
index 536e3d1ae..e58358b9c 100644
--- a/src/Wallabag/ImportBundle/Resources/views/Pocket/index.html.twig
+++ b/src/Wallabag/ImportBundle/Resources/views/Pocket/index.html.twig
@@ -12,7 +12,7 @@
                 <div class="card-panel red white-text">
                     {{ 'import.pocket.config_missing.description'|trans }}
 
-                    {{ 'import.pocket.config_missing.admin_message'|trans({'%keyurls%': '<a href="' ~ path('config') ~ '">', '%keyurle%':'</a>'})|raw }}
+                    {{ 'import.pocket.config_missing.admin_message'|trans({'%keyurls%': '<a href="' ~ path('config') ~ '" class="white-text"><strong>', '%keyurle%':'</strong></a>'})|raw }}
                 </div>
             {% endif %}