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
This commit is contained in:
Yann Kozon 2021-01-18 11:11:13 +01:00 committed by GitHub
parent b4e7c82a7c
commit a8db5b3782
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 4 additions and 3 deletions

View file

@ -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:" 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 cancel: Cancel
enable: Enable enable: Enable
qrcode_label: QR code
entry: entry:
default_title: Title of the entry default_title: Title of the entry
page_titles: page_titles:

View file

@ -84,7 +84,7 @@
<h3>{{ 'config.form_settings.android_configuration'|trans }}</h3> <h3>{{ 'config.form_settings.android_configuration'|trans }}</h3>
<a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}">{{ 'config.form_settings.android_instruction' | trans }}</a> <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}">{{ 'config.form_settings.android_instruction' | trans }}</a>
<br/> <br/>
<img id="androidQrcode" /> <img id="androidQrcode" alt="{{ 'config.otp.app.qrcode_label' | trans }}" />
<script> <script>
document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}'); document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');
</script> </script>

View file

@ -110,7 +110,7 @@
<div class="input-field col s12"> <div class="input-field col s12">
<h5>{{ 'config.form_settings.android_configuration'|trans }}</h5> <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> <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> </div>
<script> <script>
document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}'); document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');

View file

@ -12,7 +12,7 @@
<div class="card-panel red white-text"> <div class="card-panel red white-text">
{{ 'import.pocket.config_missing.description'|trans }} {{ '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> </div>
{% endif %} {% endif %}