Skip to content
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

Jump to bottom

feat(a11y): add aria-labels to various buttons #890

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

feat(a11y): add aria-labels to various buttons #890

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
9 changes: 6 additions & 3 deletions www/webapp/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@
<v-icon :color="item.post_icon_color" class="ml-1 text--darken-1" small v-if="item.post_icon">{{ item.post_icon }}</v-icon>
</span>
</div>
<v-btn class="mx-4" color="primary" depressed :to="{name: 'signup', query: $route.query}" v-if="!user.authenticated">Create Account</v-btn>
<v-btn class="mx-4 mr-0" color="primary" depressed :to="{name: 'login'}" v-if="!user.authenticated">Log In</v-btn>
<v-btn class="mx-4 mr-0" color="primary" depressed outlined @click="logout" v-if="user.authenticated">Log Out</v-btn>
<v-btn class="mx-4" color="primary" depressed :to="{name: 'signup', query: $route.query}" v-if="!user.authenticated" aria-label="Create Account">Create Account</v-btn>
<v-btn class="mx-4 mr-0" color="primary" depressed :to="{name: 'login'}" v-if="!user.authenticated" aria-label="Log In">Log In</v-btn>
<v-btn class="mx-4 mr-0" color="primary" depressed outlined @click="logout" v-if="user.authenticated" aria-label="Log Out">Log Out</v-btn>
<v-app-bar-nav-icon class="d-md-none" @click.stop="drawer = !drawer" />
<template #extension v-if="user.authenticated">
<v-tabs background-color="primary darken-1" fixed-tabs>
Expand All @@ -68,6 +68,7 @@
text
class="align-self-center mr-4"
v-on="on"
aria-label="more"
>
more
<v-icon right>{{ mdiMenuDown }}</v-icon>
Expand Down Expand Up @@ -105,13 +106,15 @@
depressed
:href="alert.href"
v-if="alert.href"
:aria-label="alert.button || 'More'"
>
{{ alert.button || 'More' }}
</v-btn>
<v-btn
color="primary"
text
@click="user.unalert(alert.id)"
aria-label="Hide"
>
Hide
</v-btn>
Expand Down
3 changes: 2 additions & 1 deletion www/webapp/src/components/ActivateAccountActionHandler.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
</audio>
<br/>
<v-btn-toggle>
<v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
<v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking" aria-label="Refresh"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
</v-btn-toggle>
&nbsp;
<v-btn-toggle v-model="captcha_kind">
Expand All @@ -55,6 +55,7 @@
:disabled="working || !valid"
:loading="working"
tabindex="2"
aria-label="Submit"
>Submit</v-btn>
</div>
<v-alert type="success" v-if="success">
Expand Down
3 changes: 2 additions & 1 deletion www/webapp/src/components/DonateDirectDebitForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
may be the name appearing on your bank statement.
</p>
<p>Again, thank you so much.</p>
<v-btn depressed outlined block :to="{name: 'home'}">Done</v-btn>
<v-btn depressed outlined block :to="{name: 'home'}" aria-label="Done">Done</v-btn>
</v-alert>
<v-form
v-if="!done"
Expand Down Expand Up @@ -91,6 +91,7 @@
color="primary"
type="submit"
:loading="working"
aria-label="Donate Now"
>Donate Now</v-btn>
</v-form>
</div>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/components/Field/RecordList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
small
text
v-if="!readonly && !disabled"
aria-label="Add another value"
><v-icon>{{ mdiPlus }}</v-icon> add another value</v-btn>
</div>
</template>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/components/ResetPasswordActionHandler.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
:disabled="working || !valid"
:loading="working"
tabindex="2"
aria-label="Submit"
>Submit</v-btn>
</div>
<v-alert type="success" v-else>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/views/ChangeEmail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
type="submit"
:loading="working"
tabindex="3"
aria-label="Change Email Address"
>Change Email Address
</v-btn>
</v-card-actions>
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 @@ -40,7 +40,7 @@
If you like our service, please consider donating.
</p>
<p>
<v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
<v-btn block outlined :to="{name: 'donate'}" aria-label="Donate">Donate</v-btn>
</p>
</v-card-text>
<v-card-actions>
Expand Down
1 change: 1 addition & 0 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 @@ -72,6 +72,7 @@
:loading="working"
ref="submit"
tabindex="3"
aria-label="Verify"
>Verify</v-btn>
</v-col>
<v-col cols="auto"></v-col>
Expand Down
7 changes: 6 additions & 1 deletion www/webapp/src/views/CrudList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
:timeout="-1"
>
{{ errors[errors.length - 1] }}
<v-btn @click="snackbar = false">
<v-btn @click="snackbar = false" aria-label="Close">
Close
</v-btn>
</v-snackbar>
Expand Down Expand Up @@ -61,6 +61,7 @@
fab
depressed
:disabled="user.working"
aria-label="Add new entry"
>
<v-icon>{{ mdiPlus }}</v-icon>
</v-btn>
Expand Down Expand Up @@ -170,6 +171,7 @@
:outlined="!createDialogSuccess"
:disabled="createDialogWorking"
@click.native="close"
:aria-label="createDialogSuccess ? 'Close' : 'Cancel'"
>
{{ createDialogSuccess ? 'Close' : 'Cancel' }}
</v-btn>
Expand All @@ -181,6 +183,7 @@
:disabled="createInhibited || !valid || createDialogWorking || createDialogSuccess"
:loading="createDialogWorking"
v-if="!createDialogSuccess"
aria-label="Save"
>
Save
</v-btn>
Expand Down Expand Up @@ -313,6 +316,7 @@
outlined
:disabled="destroyDialogWorking"
@click.native="destroyClose"
aria-label="Cancel"
>
Cancel
</v-btn>
Expand All @@ -322,6 +326,7 @@
depressed
type="submit"
:loading="destroyDialogWorking"
aria-label="Delete"
>
Delete
</v-btn>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/views/DeleteAccount.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
type="submit"
:loading="working"
tabindex="2"
aria-label="Delete Account"
>Delete Account
</v-btn>
</v-card-actions>
Expand Down
7 changes: 4 additions & 3 deletions www/webapp/src/views/DomainSetup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<v-col cols="auto">Nameservers</v-col>
<v-spacer></v-spacer>
<v-col class="text-right">
<v-btn @click="copyToClipboard(ns.join('\n'))" text small>
<v-btn @click="copyToClipboard(ns.join('\n'))" text small aria-label="Copy nameservers">
<v-icon>{{ mdiContentCopy }}</v-icon>
Copy
</v-btn>
Expand Down Expand Up @@ -74,7 +74,7 @@
<v-col cols="auto">DS Format</v-col>
<v-spacer></v-spacer>
<v-col class="text-right">
<v-btn @click="copyToClipboard(ds.join('\n'))" text small>
<v-btn @click="copyToClipboard(ds.join('\n'))" text small aria-label="Copy DS information">
<v-icon>{{ mdiContentCopy }}</v-icon>
Copy
</v-btn>
Expand All @@ -94,7 +94,7 @@
<v-col cols="auto">DNSKEY Format</v-col>
<v-spacer></v-spacer>
<v-col class="text-right">
<v-btn @click="copyToClipboard(dnskey.join('\n'))" text small>
<v-btn @click="copyToClipboard(dnskey.join('\n'))" text small aria-label="Copy DNSKey information">
<v-icon>{{ mdiContentCopy }}</v-icon>
Copy
</v-btn>
Expand Down Expand Up @@ -129,6 +129,7 @@
text
v-bind="attrs"
@click="snackbar = false"
aria-label="Close"
>
Close
</v-btn>
Expand Down
4 changes: 2 additions & 2 deletions www/webapp/src/views/DomainSetupPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
the answer there.
</v-card-text>
<v-card-actions>
<v-btn block outlined :to="{name: 'talk'}">Find Help</v-btn>
<v-btn block outlined :to="{name: 'talk'}" aria-label="Find help">Find Help</v-btn>
</v-card-actions>
</v-card>
</v-col>
Expand All @@ -40,7 +40,7 @@
If you like our service, please consider donating.
</v-card-text>
<v-card-actions>
<v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
<v-btn block outlined :to="{name: 'donate'}" aria-label="Donate">Donate</v-btn>
</v-card-actions>
</v-card>
</v-col>
Expand Down
6 changes: 3 additions & 3 deletions www/webapp/src/views/DynSetup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
Please verify that your client is using the credentials provided by deSEC and then come back to check
again.
</p>
<v-btn depressed outlined block @click="check" :loading="working">Check Again</v-btn>
<v-btn depressed outlined block @click="check" :loading="working" aria-label="Check Again">Check Again</v-btn>
</v-alert>
<v-alert type="success" v-if="ips !== undefined && ips.length > 0">
<p>
Expand All @@ -129,7 +129,7 @@
Enjoy!
</p>
<p>
<v-btn depressed outlined block @click="check" :loading="working">Update</v-btn>
<v-btn depressed outlined block @click="check" :loading="working" aria-label="Update">Update</v-btn>
</p>
<p>
Please note that deSEC only assigns your IP address to your domain name.
Expand All @@ -155,7 +155,7 @@
If you like our service, please consider donating.
</p>
<p>
<v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
<v-btn block outlined :to="{name: 'donate'}" aria-label="Donate">Donate</v-btn>
</p>
</v-card-text>
<v-card-actions>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/views/HomePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
depressed
x-large
block
aria-label="Create Account"
>
Create Account
</v-btn>
Expand Down
2 changes: 2 additions & 0 deletions www/webapp/src/views/LoginPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
:disabled="!valid"
:loading="working"
tabindex="4"
aria-label="Log In"
>
Log In
</v-btn>
Expand All @@ -74,6 +75,7 @@
color="primary"
:to="{name: 'reset-password', params: email ? {email: email} : {}}"
tabindex="5"
aria-label="Forgot password"
>
Forgot password
</v-btn>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/views/MFA.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
:loading="working"
ref="submit"
tabindex="3"
aria-label="Verify"
>Verify</v-btn>
</v-col>
<v-col cols="auto"></v-col>
Expand Down
1 change: 1 addition & 0 deletions www/webapp/src/views/SignUp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@
type="submit"
:loading="working"
tabindex="7"
aria-label="Sign up"
>Sign up</v-btn>
</v-card-actions>
</v-card>
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 @@ -31,7 +31,7 @@
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn outlined text depressed :to="{name: 'home'}">Home</v-btn>
<v-btn outlined text depressed :to="{name: 'home'}" aria-label="Home">Home</v-btn>
</v-card-actions>
</v-card>
</v-form>
Expand Down