From 146ebaa9e9c3f7430d1e2bf5d0319bfa961f0e75 Mon Sep 17 00:00:00 2001
From: Tim in 't Veld <50753699+timveld@users.noreply.github.com>
Date: Wed, 8 Apr 2026 15:06:14 +0200
Subject: [PATCH] Accessibility: index: aria-expanded on dropdown menu buttons,
 aliases: fieldset on permitted senders, mfa: fix incorrect id's and alt on qr
 code (#2555)

* accessibility: aria-expandedon dropdowns, fieldset on aliases > permitted senders, mfa label corrections and alt on qr image

* further change
---
 management/templates/aliases.html | 33 ++++++++++++++++++++++++-------
 management/templates/mfa.html     |  5 +++--
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/management/templates/aliases.html b/management/templates/aliases.html
index cf188149..8283928b 100644
--- a/management/templates/aliases.html
+++ b/management/templates/aliases.html
@@ -45,21 +45,40 @@
       </div>
     </div>
   </div>
-  <div class="form-group">
+<div class="form-group">
+  <fieldset>
+    <legend>
     <label for="addaliasSenders" class="col-sm-1 control-label">Permitted Senders</label>
+    </legend>
+
     <div class="col-sm-10">
       <div class="radio">
-        <label>
-          <input id="addaliasForwardsToNotAdvanced" name="addaliasForwardsToDivToggle" type="radio" checked onclick="$('#addaliasForwardsToDiv').toggle(false)">
-          Any mail user listed in the Forwards To box can send mail claiming to be from <span class="regularalias">the alias address</span><span class="catchall domainalias">any address on the alias domain</span>.
+        <label for="addaliasForwardsToNotAdvanced">
+          <input id="addaliasForwardsToNotAdvanced"
+                 name="addaliasForwardsToDivToggle"
+                 type="radio"
+                 checked
+                 onclick="$('#addaliasForwardsToDiv').toggle(false)">
+          Any mail user listed in the Forwards To box can send mail claiming to be from
+          <span class="regularalias">the alias address</span>
+          <span class="catchall domainalias">any address on the alias domain</span>.
         </label>
       </div>
+
       <div class="radio">
-        <label>
-          <input id="addaliasForwardsToAdvanced" name="addaliasForwardsToDivToggle" type="radio" id="addaliasForwardsToDivShower" onclick="$('#addaliasForwardsToDiv').toggle(true)">
-          I&rsquo;ll enter the mail users that can send mail claiming to be from <span class="regularalias">the alias address</span><span class="catchall domainalias">any address on the alias domain</span>.
+        <label for="addaliasForwardsToAdvanced">
+          <input id="addaliasForwardsToAdvanced"
+                 name="addaliasForwardsToDivToggle"
+                 type="radio"
+                 onclick="$('#addaliasForwardsToDiv').toggle(true)">
+          I&rsquo;ll enter the mail users that can send mail claiming to be from
+          <span class="regularalias">the alias address</span>
+          <span class="catchall domainalias">any address on the alias domain</span>.
         </label>
       </div>
+    </div>
+  </fieldset>
+</div>
       <div id="addaliasForwardsToDiv" style="margin-top: .5em; margin-left: 1.4em; display: none;">
         <textarea class="form-control" rows="3" id="addaliasSenders" placeholder="one user per line or separated by commas"></textarea>
       </div>
diff --git a/management/templates/mfa.html b/management/templates/mfa.html
index f45b263f..bfa9a8f6 100644
--- a/management/templates/mfa.html
+++ b/management/templates/mfa.html
@@ -67,12 +67,12 @@ and ensure every administrator account for this control panel does the same.</st
         </div>
 
         <div class="form-group">
-            <label for="otp-label" style="font-weight: normal">3. Optionally, give your device a label so that you can remember what device you set it up on:</label>
+            <label for="totp-setup-label" style="font-weight: normal">3. Optionally, give your device a label so that you can remember what device you set it up on:</label>
             <input type="text" id="totp-setup-label" class="form-control" placeholder="my phone" />
         </div>
 
         <div class="form-group">
-            <label for="otp" style="font-weight: normal">4. Use the app to generate your first six-digit code and enter it here:</label>
+            <label for="totp-setup-token" style="font-weight: normal">4. Use the app to generate your first six-digit code and enter it here:</label>
             <input type="text" id="totp-setup-token" class="form-control" placeholder="6-digit code" />
         </div>
 
@@ -132,6 +132,7 @@ and ensure every administrator account for this control panel does the same.</st
     function render_totp_setup(provisioned_totp) {
         var img = document.createElement('img');
         img.src = "data:image/png;base64," + provisioned_totp.qr_code_base64;
+        img.alt = "QR code, scan this in your authenticator app"
 
         var code = document.createElement('div');
         code.innerHTML = `Secret: ${provisioned_totp.secret}`;