Skip to content

fix(webapp): basic accessibility improvements #1236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acoseac wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(webapp): basic accessibility improvements #1236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion www/webapp/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/ChangeEmail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/ConfirmationPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 10 additions & 3 deletions www/webapp/src/views/Console/DomainSetupDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment on lines +15 to +22

@peterthomassen peterthomassen Aug 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, this button now is focused when the dialog opens first:

Image

Clicking next to it removes the focus. Can you please make sure it isn't focused right away?

@peterthomassen peterthomassen Aug 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I now realize this also happens for other dialog (like the 2FA setup email notice from TOTPVerifyDialog.vue). It's not required for this PR, but if you have a solution idea, that'd be appreciated!

@acoseac acoseac Aug 19, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had a look at this one. It reproduces only when creating a domain: the create dialog closes as the setup dialog opens, so the element that had focus disappears, and Vuetify moves focus to the first focusable child, which is the close button. Opening the same dialog from the info icon on a domain row doesn't do it.

I tried some obvious one-liners, making the card itself focusable via tabindex or autofocus. Both stop the close button getting focus, but focus then lands on the + button behind the dialog, because the closing create dialog restores focus to its own activator. From there, tabbing walks straight into the table behind the overlay. That seems like a worse trade than the focus ring.

So maybe best to leave it as is here, and treating initial focus in dialogs as its own issue, including TOTPVerifyDialog since it has the same shape.

</v-card-title>
<v-divider/>

Expand Down
4 changes: 2 additions & 2 deletions www/webapp/src/views/Console/TOTPVerifyDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 13 additions & 4 deletions www/webapp/src/views/CrudList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -61,6 +61,7 @@
size="small"
icon
variant="flat"
:aria-label="headlines.create"
:disabled="user.working"
>
<v-icon :icon="mdiPlus" />
Expand All @@ -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
Expand Down Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/DeleteAccount.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions www/webapp/src/views/DomainSetup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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).
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions www/webapp/src/views/DomainSetupPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions www/webapp/src/views/DonatePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/DynSetup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/LoginPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions www/webapp/src/views/MFA.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/ResetPassword.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/SignUp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/webapp/src/views/WelcomePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading