From b9f4a8f07ff29227f1f3f8e4a8b9bf2dd91d187f Mon Sep 17 00:00:00 2001
From: Arsenie Coseac <124933924+acoseac@users.noreply.github.com>
Date: Sun, 16 Aug 2026 21:37:18 +0200
Subject: [PATCH] fix(webapp): basic accessibility improvements

Accessible names: the mobile navigation toggle and the create button in
the CRUD lists are icon-only and were exposed to assistive technology
without a name. Two dialog close controls were bare <v-icon> elements
carrying a click handler, so they were neither focusable nor operable by
keyboard; they now use the same button pattern as the close control in
TOTPVerifyDialog.

Headings: page titles rendered as <div>, so views such as the login page
had no heading at all and screen reader users had nothing to navigate by.
Toolbar titles now render as <h1> through Vuetify's tag prop, and the
step titles on the domain setup page as <h2>. Neither changes appearance.

Progress bar: it appears on every request and, while active, was exposed
to assistive technology as an unnamed progressbar, which is the reported
irritation. It is decorative, so it is now hidden from the accessibility
tree; the visual behaviour is unchanged.

Follows the review on #890 by adding accessible names only where there is
no visible text, rather than duplicating text the accessible name is
already computed from.

Closes #472
---
 www/webapp/src/App.vue                          | 13 ++++++++++++-
 www/webapp/src/views/ChangeEmail.vue            |  2 +-
 www/webapp/src/views/ConfirmationPage.vue       |  2 +-
 .../src/views/Console/DomainSetupDialog.vue     | 13 ++++++++++---
 .../src/views/Console/TOTPVerifyDialog.vue      |  4 ++--
 www/webapp/src/views/CrudList.vue               | 17 +++++++++++++----
 www/webapp/src/views/DeleteAccount.vue          |  2 +-
 www/webapp/src/views/DomainSetup.vue            | 16 ++++++++--------
 www/webapp/src/views/DomainSetupPage.vue        |  6 +++---
 www/webapp/src/views/DonatePage.vue             |  6 +++---
 www/webapp/src/views/DynSetup.vue               |  2 +-
 www/webapp/src/views/LoginPage.vue              |  2 +-
 www/webapp/src/views/MFA.vue                    |  4 ++--
 www/webapp/src/views/ResetPassword.vue          |  2 +-
 www/webapp/src/views/SignUp.vue                 |  2 +-
 www/webapp/src/views/WelcomePage.vue            |  2 +-
 16 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/www/webapp/src/App.vue b/www/webapp/src/App.vue
index a95078a6a..722186ff1 100644
--- a/www/webapp/src/App.vue
+++ b/www/webapp/src/App.vue
@@ -47,7 +47,12 @@
       <v-btn class="mx-4" color="primary" variant="flat" :to="{name: 'signup', query: $route.query}" v-if="!authenticated">Create Account</v-btn>
       <v-btn class="mx-4 ml-0" color="primary" variant="flat" :to="{name: 'login'}" v-if="!authenticated">Log In</v-btn>
       <v-btn class="mx-4 ml-0" color="primary" variant="outlined" @click="logout" v-if="authenticated">Log Out</v-btn>
-      <v-app-bar-nav-icon class="d-md-none" @click.stop="drawer = !drawer" />
+      <v-app-bar-nav-icon
+              class="d-md-none"
+              aria-label="Navigation menu"
+              :aria-expanded="String(drawer)"
+              @click.stop="drawer = !drawer"
+      />
       <template #extension v-if="authenticated">
         <div class="authenticated-tabs d-flex align-center w-100 bg-primary text-white">
           <v-tabs v-model="activeTab" class="flex-grow-1 text-white" bg-color="primary" color="white" slider-color="white" grow>
@@ -116,11 +121,17 @@
           </v-btn>
         </template>
       </v-banner>
+      <!--
+        Purely decorative: it appears on every request, and announcing that is
+        more noise than help. Screen reader users learn the outcome from the
+        result itself (or from an error alert).
+      -->
       <v-progress-linear
               :active="user.working"
               :indeterminate="user.working"
               color="secondary"
               style="z-index: 3"
+              aria-hidden="true"
       ></v-progress-linear>
       <router-view/>
     </v-main>
diff --git a/www/webapp/src/views/ChangeEmail.vue b/www/webapp/src/views/ChangeEmail.vue
index 48493a90a..2979bd769 100644
--- a/www/webapp/src/views/ChangeEmail.vue
+++ b/www/webapp/src/views/ChangeEmail.vue
@@ -22,7 +22,7 @@
                                 color="primary"
                                 flat
                         >
-                            <v-toolbar-title>Change Account Email Address</v-toolbar-title>
+                            <v-toolbar-title tag="h1">Change Account Email Address</v-toolbar-title>
                         </v-toolbar>
                         <v-card-text>
                             <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/ConfirmationPage.vue b/www/webapp/src/views/ConfirmationPage.vue
index 503a6d313..632453f7b 100644
--- a/www/webapp/src/views/ConfirmationPage.vue
+++ b/www/webapp/src/views/ConfirmationPage.vue
@@ -17,7 +17,7 @@
                   color="primary"
                   flat
           >
-            <v-toolbar-title class="capitalize">{{ actionName }} Confirmation</v-toolbar-title>
+            <v-toolbar-title class="capitalize" tag="h1">{{ actionName }} Confirmation</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/Console/DomainSetupDialog.vue b/www/webapp/src/views/Console/DomainSetupDialog.vue
index b68664f09..4b7573bf0 100644
--- a/www/webapp/src/views/Console/DomainSetupDialog.vue
+++ b/www/webapp/src/views/Console/DomainSetupDialog.vue
@@ -8,11 +8,18 @@
   >
     <v-card>
       <v-card-title class="domain-setup-title">
-        <div class="text-h6">
+        <h2 class="text-h6">
           Setup Instructions for <b>{{ domain }}</b>
-        </div>
+        </h2>
         <v-spacer/>
-        <v-icon :icon="mdiClose" @click.stop="close" />
+        <v-btn
+            icon
+            variant="text"
+            aria-label="Close dialog"
+            @click.stop="close"
+        >
+          <v-icon :icon="mdiClose" />
+        </v-btn>
       </v-card-title>
       <v-divider/>
 
diff --git a/www/webapp/src/views/Console/TOTPVerifyDialog.vue b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
index 3cb202055..4051c9535 100644
--- a/www/webapp/src/views/Console/TOTPVerifyDialog.vue
+++ b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
@@ -9,9 +9,9 @@
     <v-form @submit.prevent="verify" ref="form">
       <v-card>
         <v-card-title class="d-flex align-center">
-          <span class="text-h6">
+          <h2 class="text-h6">
             Verify TOTP: <b>{{ displayName }}</b>
-          </span>
+          </h2>
           <v-spacer/>
           <v-btn
             icon
diff --git a/www/webapp/src/views/CrudList.vue b/www/webapp/src/views/CrudList.vue
index c844da06d..20e3baacc 100644
--- a/www/webapp/src/views/CrudList.vue
+++ b/www/webapp/src/views/CrudList.vue
@@ -36,7 +36,7 @@
             <template #top>
               <!-- Headline & Toolbar, Including New Form -->
               <v-toolbar class="bg-white" flat>
-                <v-toolbar-title>{{ headlines.table }}</v-toolbar-title>
+                <v-toolbar-title tag="h1">{{ headlines.table }}</v-toolbar-title>
                 <v-spacer />
                 <v-text-field
                         v-model="search"
@@ -61,6 +61,7 @@
                         size="small"
                         icon
                         variant="flat"
+                        :aria-label="headlines.create"
                         :disabled="user.working"
                 >
                   <v-icon :icon="mdiPlus" />
@@ -86,9 +87,17 @@
                   <v-card>
                     <v-form ref="createForm" v-model="valid" @submit.prevent="save()">
                       <v-card-title>
-                        <span class="text-h5">{{ headlines.create }}</span>
+                        <!-- d-inline keeps the previous <span> layout; only the semantics change -->
+                        <h2 class="text-h5 d-inline">{{ headlines.create }}</h2>
                         <v-spacer />
-                        <v-icon :icon="mdiClose" @click.stop="close" />
+                        <v-btn
+                                icon
+                                variant="text"
+                                aria-label="Close dialog"
+                                @click.stop="close"
+                        >
+                          <v-icon :icon="mdiClose" />
+                        </v-btn>
                       </v-card-title>
                       <v-divider />
                       <v-progress-linear
@@ -280,7 +289,7 @@
             <v-card>
               <v-form @submit.prevent="destroy(destroyDialogItem)">
                 <v-card-title>
-                  <span class="text-h5">{{ headlines.destroy }}</span>
+                  <h2 class="text-h5 d-inline">{{ headlines.destroy }}</h2>
                 </v-card-title>
 
                 <v-divider />
diff --git a/www/webapp/src/views/DeleteAccount.vue b/www/webapp/src/views/DeleteAccount.vue
index 28e6ceb6d..be334fe72 100644
--- a/www/webapp/src/views/DeleteAccount.vue
+++ b/www/webapp/src/views/DeleteAccount.vue
@@ -22,7 +22,7 @@
                                 color="primary"
                                 flat
                         >
-                            <v-toolbar-title>Delete Account</v-toolbar-title>
+                            <v-toolbar-title tag="h1">Delete Account</v-toolbar-title>
                         </v-toolbar>
                         <v-card-text>
                             <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/DomainSetup.vue b/www/webapp/src/views/DomainSetup.vue
index 62dda2d9d..512cc94d4 100644
--- a/www/webapp/src/views/DomainSetup.vue
+++ b/www/webapp/src/views/DomainSetup.vue
@@ -10,10 +10,10 @@
     </p>
 
     <div v-if="!user.authenticated">
-      <div class="my-2 text-h6">
+      <h2 class="my-2 text-h6">
         <v-icon class="text-primary" :icon="mdiNumeric0Circle" />
         Configure your DNS records
-      </div>
+      </h2>
       <p>Before delegating your domain, you might want to take the following steps:</p>
       <ul>
         <li><router-link :to="{name: 'reset-password'}" target="_blank">Set up a password for your deSEC account</router-link>,</li>
@@ -22,10 +22,10 @@
       </ul>
     </div>
 
-    <div class="mb-2 mt-5 text-h6">
+    <h2 class="mb-2 mt-5 text-h6">
       <v-icon class="text-primary" :icon="mdiNumeric1Circle" />
       Delegate your domain
-    </div>
+    </h2>
     <p>
       Forward the following information to the organization/person where you bought the domain
       <strong>{{ domain }}</strong> (usually your provider or technical administrator).
@@ -73,10 +73,10 @@
     </v-card>
     <p>Once your provider processes this information, the Internet will start directing DNS queries to deSEC.</p>
 
-    <div class="mb-2 mt-5 text-h6">
+    <h2 class="mb-2 mt-5 text-h6">
       <v-icon class="text-primary" :icon="mdiNumeric2Circle" />
       Enable DNSSEC
-    </div>
+    </h2>
     <div v-if="user.authenticated">
       <p>
         You also need to forward the following DNSSEC information to your domain provider.
@@ -130,10 +130,10 @@
         <v-alert type="error" v-else>Parameters could not be retrieved. (Are you logged in?)</v-alert>
       </v-card>
 
-      <div class="mb-2 mt-5 text-h6">
+      <h2 class="mb-2 mt-5 text-h6">
         <v-icon class="text-primary" :icon="mdiNumeric3Circle" />
         Check Setup
-      </div>
+      </h2>
       <p>
         All set up correctly? <a :href="`https://dnssec-analyzer.verisignlabs.com/${domain}`" target="_blank">Take a
         look at DNSSEC Analyzer</a> to check the status of your domain.
diff --git a/www/webapp/src/views/DomainSetupPage.vue b/www/webapp/src/views/DomainSetupPage.vue
index 622914181..c880a41d8 100644
--- a/www/webapp/src/views/DomainSetupPage.vue
+++ b/www/webapp/src/views/DomainSetupPage.vue
@@ -7,7 +7,7 @@
               color="primary"
               flat
           >
-            <v-toolbar-title>Setup Instructions for <b>{{ domain }}</b></v-toolbar-title>
+            <v-toolbar-title tag="h1">Setup Instructions for <b>{{ domain }}</b></v-toolbar-title>
           </v-toolbar>
 
           <v-card-text>
@@ -20,7 +20,7 @@
     <v-row align="center" justify="center">
       <v-col cols="12" sm="8" md="3">
         <v-card>
-          <v-card-title><div class="text-h6">Find Help</div></v-card-title>
+          <v-card-title><h2 class="text-h6">Find Help</h2></v-card-title>
           <v-card-text>
             In our forum <router-link :to="{name: 'talk'}">talk.desec.io</router-link>, members of the community
             discuss ideas and applications of deSEC. If you have a question, chances are that you may be able to find
@@ -33,7 +33,7 @@
       </v-col>
       <v-col cols="12" sm="8" md="3">
         <v-card>
-          <v-card-title><div class="text-h6">Keep deSEC Going</div></v-card-title>
+          <v-card-title><h2 class="text-h6">Keep deSEC Going</h2></v-card-title>
           <v-card-text>
             To offer free DNS hosting for everyone, deSEC relies on donations only.
             If you like our service, please consider donating.
diff --git a/www/webapp/src/views/DonatePage.vue b/www/webapp/src/views/DonatePage.vue
index 548a9e78b..cc5ba157c 100644
--- a/www/webapp/src/views/DonatePage.vue
+++ b/www/webapp/src/views/DonatePage.vue
@@ -18,7 +18,7 @@
                   color="primary"
                   flat
           >
-            <v-toolbar-title>Donate</v-toolbar-title>
+            <v-toolbar-title tag="h2">Donate</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <v-expansion-panels class="mb-4">
@@ -158,7 +158,7 @@
               <strong>Based in Europe?</strong> You almost certainly can donate via direct debit or bank transfer (you
               only need your IBAN). <strong>No fees</strong> will be subtracted, so you can do more good!
             </p>
-            <div class="text-h6">Donation Receipts</div>
+            <h2 class="text-h6">Donation Receipts</h2>
             <p>
               deSEC e.V. is registered as a charitable organization in Germany. If you pay taxes here, your donation is
               tax-deductible, and we're happy to provide you with a donation receipt for that purpose. Note that for
@@ -173,7 +173,7 @@
                   color="primary"
                   flat
           >
-            <v-toolbar-title>Support our Quest</v-toolbar-title>
+            <v-toolbar-title tag="h2">Support our Quest</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <p>
diff --git a/www/webapp/src/views/DynSetup.vue b/www/webapp/src/views/DynSetup.vue
index fa462a76f..390636264 100644
--- a/www/webapp/src/views/DynSetup.vue
+++ b/www/webapp/src/views/DynSetup.vue
@@ -17,7 +17,7 @@
                   color="primary"
                   flat
           >
-            <v-toolbar-title>Domain Registration Completed</v-toolbar-title>
+            <v-toolbar-title tag="h1">Domain Registration Completed</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/LoginPage.vue b/www/webapp/src/views/LoginPage.vue
index c266f9f9d..1b95e5a36 100644
--- a/www/webapp/src/views/LoginPage.vue
+++ b/www/webapp/src/views/LoginPage.vue
@@ -22,7 +22,7 @@
                     color="primary"
                     flat
             >
-              <v-toolbar-title>Log In</v-toolbar-title>
+              <v-toolbar-title tag="h1">Log In</v-toolbar-title>
             </v-toolbar>
             <v-card-text>
               <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/MFA.vue b/www/webapp/src/views/MFA.vue
index 385e6e9d1..e6258971e 100644
--- a/www/webapp/src/views/MFA.vue
+++ b/www/webapp/src/views/MFA.vue
@@ -8,9 +8,9 @@
     <v-form @submit.prevent="verify" ref="form">
       <v-card>
         <v-card-title>
-          <div class="text-h6">
+          <h1 class="text-h6">
             2FA Required
-          </div>
+          </h1>
           <v-spacer/>
         </v-card-title>
         <v-divider/>
diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
index 70a8f3ca6..091844313 100644
--- a/www/webapp/src/views/ResetPassword.vue
+++ b/www/webapp/src/views/ResetPassword.vue
@@ -22,7 +22,7 @@
                                 color="primary"
                                 flat
                         >
-                            <v-toolbar-title>Reset Account Password</v-toolbar-title>
+                            <v-toolbar-title tag="h1">Reset Account Password</v-toolbar-title>
                         </v-toolbar>
                         <v-card-text>
                             <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index b75550048..2a9237f7f 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -23,7 +23,7 @@
                     color="primary"
                     flat
             >
-              <v-toolbar-title>Create new Account</v-toolbar-title>
+              <v-toolbar-title tag="h1">Create new Account</v-toolbar-title>
             </v-toolbar>
             <v-card-text>
               <error-alert :errors="errors"></error-alert>
diff --git a/www/webapp/src/views/WelcomePage.vue b/www/webapp/src/views/WelcomePage.vue
index 1d15244a7..1c1c0c1e4 100644
--- a/www/webapp/src/views/WelcomePage.vue
+++ b/www/webapp/src/views/WelcomePage.vue
@@ -17,7 +17,7 @@
                   color="primary"
                   flat
           >
-            <v-toolbar-title>Welcome to deSEC</v-toolbar-title>
+            <v-toolbar-title tag="h1">Welcome to deSEC</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <v-alert type="success">