From 55b465c196a0b5d5132ce22b2e20cf174ed50419 Mon Sep 17 00:00:00 2001 From: Derk-Jan Hartman Date: Tue, 19 Dec 2023 21:12:52 +0100 Subject: [PATCH] Provide an alt label to the SVG qr code The raw svg was represented to a11y dom as 256x256 images (due to the 'use'). Convert the raw SVG to a base64 encoded img data uri and provide it with an alt attribute describing the function. While the qr code is duplicate with the 'manual' code below it, it is not decorative so should not suppress alt. It's a big image and if you use touch interaction, it would create a big blank spot. It is useful to know for users that the QR code is there. The img wrapping should also make the SVG usage slightly safer. It avoids any potential remote resource usage from inside the SVG. While this is not a direct danger right now, compromised php packages can happen, and this limits the impact in that case. Bug: T151550 Change-Id: I568927ace95a1fdf9cd7990bc7de8461718aa1c1 --- i18n/en.json | 3 ++- i18n/qqq.json | 3 ++- src/HTMLForm/TOTPEnableForm.php | 7 ++++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/i18n/en.json b/i18n/en.json index 935b188f..9154fb56 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -99,5 +99,6 @@ "oathauth-verify-enabled": "{{GENDER:$1|$1}} has two-factor authentication enabled.", "oathauth-verify-disabled": "{{GENDER:$1|$1}} does not have two-factor authentication enabled.", "oathauth-prefs-disabledgroups": "Disabled {{PLURAL:$1|group|groups}}:", - "oathauth-prefs-disabledgroups-help": "{{GENDER:$2|Your membership}} in {{PLURAL:$1|this group|these groups}} is disabled until you enable [[Special:Manage Two-factor authentication|two-factor authentication]]." + "oathauth-prefs-disabledgroups-help": "{{GENDER:$2|Your membership}} in {{PLURAL:$1|this group|these groups}} is disabled until you enable [[Special:Manage Two-factor authentication|two-factor authentication]].", + "oathauth-qrcode-alt": "Scannable QR code representing the secret key." } diff --git a/i18n/qqq.json b/i18n/qqq.json index 8517ccb1..fe49fb69 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -114,5 +114,6 @@ "oathauth-verify-enabled": "Notice that a user has 2FA enabled, shown on success at [[Special:VerifyOATHForUser]].\n$1 - Name of user", "oathauth-verify-disabled": "Notice that a user does not have 2FA enabled, shown on success at [[Special:VerifyOATHForUser]].\n$1 - Name of user", "oathauth-prefs-disabledgroups": "Label on Special:Preferences for groups in which the user's membership has been disabled for a lack of two-factor authentication.\n$1 - Number of groups", - "oathauth-prefs-disabledgroups-help": "Help message shown on Special:Preferences for the {{mw-msg|oathauth-prefs-disabledgroups}} field.\n$1 - Number of groups\n$2 - User name for GENDER" + "oathauth-prefs-disabledgroups-help": "Help message shown on Special:Preferences for the {{mw-msg|oathauth-prefs-disabledgroups}} field.\n$1 - Number of groups\n$2 - User name for GENDER", + "oathauth-qrcode-alt": "Accessibility label for the QR code image shown to users when enabling the TOTP on the [[Special:OATHManage]] page." } diff --git a/src/HTMLForm/TOTPEnableForm.php b/src/HTMLForm/TOTPEnableForm.php index ba842442..65b5536d 100644 --- a/src/HTMLForm/TOTPEnableForm.php +++ b/src/HTMLForm/TOTPEnableForm.php @@ -75,7 +75,12 @@ class TOTPEnableForm extends OATHAuthOOUIHTMLForm { ], 'qrcode' => [ 'type' => 'info', - 'default' => $qrCode->getString(), + 'default' => Html::element( 'img', [ + 'src' => $qrCode->getDataUri(), + 'alt' => $this->msg( 'oathauth-qrcode-alt' ), + 'width' => 256, + 'height' => 256, + ] ), 'raw' => true, 'section' => 'step2', ],