JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: make sure users are able to tab through all navigation dropdown items.

Browse Source 
Change-Id: Ia6148d96cbe385e25bc1107b974288fb98000fe8
This commit is contained in:
Malcolm Bouzi 2022-11-08 19:07:01 -05:00
parent 5f089873e0
commit 3ae057261e
4 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -31,15 +31,15 @@
</a>
</div>
</div>
<div class="account-area__dropdown__item" @click="navigateToBilling">
<div tabindex="0" class="account-area__dropdown__item" @click="navigateToBilling" @keyup.enter="navigateToBilling">
<BillingIcon />
<p class="account-area__dropdown__item__label">Billing</p>
</div>
<div class="account-area__dropdown__item" @click="navigateToSettings">
<div tabindex="0" class="account-area__dropdown__item" @click="navigateToSettings" @keyup.enter="navigateToSettings">
<SettingsIcon />
<p class="account-area__dropdown__item__label">Account Settings</p>
</div>
<div class="account-area__dropdown__item" @click="onLogout">
<div tabindex="0" class="account-area__dropdown__item" @click="onLogout" @keyup.enter="onLogout">
<LogoutIcon />
<p class="account-area__dropdown__item__label">Logout</p>
</div>
@ -313,6 +313,13 @@ export default class AccountArea extends Vue {
&__link {
max-height: 16px;
}
&__link:focus {
svg :deep(path) {
fill: var(--c-blue-3);
}
}
}
}
@ -336,7 +343,7 @@ export default class AccountArea extends Vue {
}
&:hover {
background-color: #f7f8fb;
background-color: #f5f6fa;
p {
color: var(--c-blue-3);
@ -346,6 +353,10 @@ export default class AccountArea extends Vue {
fill: var(--c-blue-3);
}
}
&:focus {
background-color: #f5f6fa;
}
}
}
}

15
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -21,7 +21,7 @@
<VLoader width="30px" height="30px" />
</div>
<div v-else class="project-selection__dropdown__items">
<div class="project-selection__dropdown__items__choice" @click.prevent.stop="closeDropdown">
<div tabindex="0" class="project-selection__dropdown__items__choice" @click.prevent.stop="closeDropdown">
<div class="project-selection__dropdown__items__choice__mark-container">
<CheckmarkIcon class="project-selection__dropdown__items__choice__mark-container__image" />
</div>
@ -34,15 +34,16 @@
:key="project.id"
class="project-selection__dropdown__items__choice"
@click.prevent.stop="onProjectSelected(project.id)"
@keyup.enter="onProjectSelected(project.id)"
>
<p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
</div>
</div>
<div class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick">
<div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick" @keyup.enter="onProjectsLinkClick">
<ManageIcon />
<p class="project-selection__dropdown__link-container__label">Manage Projects</p>
</div>
<div class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick">
<div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick" @keyup.enter="onCreateLinkClick">
<CreateProjectIcon />
<p class="project-selection__dropdown__link-container__label">Create new</p>
</div>
@ -402,6 +403,10 @@ export default class ProjectSelection extends Vue {
object-fit: cover;
}
}
&:focus {
background-color: #f5f6fa;
}
}
}
@ -435,6 +440,10 @@ export default class ProjectSelection extends Vue {
fill: var(--c-blue-3);
}
}
&:focus {
background-color: #f5f6fa;
}
}
}
}

16
web/satellite/src/components/navigation/QuickStartLinks.vue
View File

@ -3,35 +3,35 @@
<template>
<div>
<div class="dropdown-item" aria-roledescription="create-project-route" @click.stop="navigateToNewProject">
<div tabindex="0" class="dropdown-item" aria-roledescription="create-project-route" @click.stop="navigateToNewProject" @keyup.enter="navigateToNewProject">
<NewProjectIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">New Project</h2>
<p class="dropdown-item__text__label">Create a new project.</p>
</div>
</div>
<div class="dropdown-item" aria-roledescription="create-ag-route" @click.stop="navigateToCreateAG">
<div tabindex="0" class="dropdown-item" aria-roledescription="create-ag-route" @click.stop="navigateToCreateAG" @keyup.enter="navigateToCreateAG">
<CreateAGIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Create an Access Grant</h2>
<p class="dropdown-item__text__label">Start the wizard to create a new access grant.</p>
</div>
</div>
<div class="dropdown-item" aria-roledescription="create-s3-credentials-route" @click.stop="navigateToAccessGrantS3">
<div tabindex="0" class="dropdown-item" aria-roledescription="create-s3-credentials-route" @click.stop="navigateToAccessGrantS3" @keyup.enter="navigateToAccessGrantS3">
<S3Icon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Create S3 Gateway Credentials</h2>
<p class="dropdown-item__text__label">Start the wizard to generate S3 credentials.</p>
</div>
</div>
<div class="dropdown-item" aria-roledescription="objects-route" @click.stop="navigateToBuckets">
<div tabindex="0" class="dropdown-item" aria-roledescription="objects-route" @click.stop="navigateToBuckets" @keyup.enter="navigateToBuckets">
<UploadInWebIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Upload in Web</h2>
<p class="dropdown-item__text__label">Start uploading files in the web browser.</p>
</div>
</div>
<div class="dropdown-item" aria-roledescription="cli-flow-route" @click.stop="navigateToCLIFlow">
<div tabindex="0" class="dropdown-item" aria-roledescription="cli-flow-route" @click.stop="navigateToCLIFlow" @keyup.enter="navigateToCLIFlow">
<UploadInCLIIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Upload using CLI</h2>
@ -141,3 +141,9 @@ export default class QuickStartLinks extends Vue {
}
}
</script>
<style scoped lang="scss">
.dropdown-item:focus {
background-color: #f5f6fa;
}
</style>

8
web/satellite/src/components/navigation/ResourcesLinks.vue
View File

@ -94,3 +94,11 @@ export default class ResourcesLinks extends Vue {
}
}
</script>
<style scoped lang="scss">
.dropdown-item:focus {
background-color: #f5f6fa;
outline: auto;
outline-color: var(--c-blue-3);
}
</style>