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> </a>
</div> </div>
</div> </div>
<div class="account-area__dropdown__item" @click="navigateToBilling"> <div tabindex="0" class="account-area__dropdown__item" @click="navigateToBilling" @keyup.enter="navigateToBilling">
<BillingIcon /> <BillingIcon />
<p class="account-area__dropdown__item__label">Billing</p> <p class="account-area__dropdown__item__label">Billing</p>
</div> </div>
<div class="account-area__dropdown__item" @click="navigateToSettings"> <div tabindex="0" class="account-area__dropdown__item" @click="navigateToSettings" @keyup.enter="navigateToSettings">
<SettingsIcon /> <SettingsIcon />
<p class="account-area__dropdown__item__label">Account Settings</p> <p class="account-area__dropdown__item__label">Account Settings</p>
</div> </div>
<div class="account-area__dropdown__item" @click="onLogout"> <div tabindex="0" class="account-area__dropdown__item" @click="onLogout" @keyup.enter="onLogout">
<LogoutIcon /> <LogoutIcon />
<p class="account-area__dropdown__item__label">Logout</p> <p class="account-area__dropdown__item__label">Logout</p>
</div> </div>
@ -313,6 +313,13 @@ export default class AccountArea extends Vue {
&__link { &__link {
max-height: 16px; max-height: 16px;
} }
&__link:focus {
svg :deep(path) {
fill: var(--c-blue-3);
}
}
} }
} }
@ -336,7 +343,7 @@ export default class AccountArea extends Vue {
} }
&:hover { &:hover {
background-color: #f7f8fb; background-color: #f5f6fa;
p { p {
color: var(--c-blue-3); color: var(--c-blue-3);
@ -346,6 +353,10 @@ export default class AccountArea extends Vue {
fill: var(--c-blue-3); 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" /> <VLoader width="30px" height="30px" />
</div> </div>
<div v-else class="project-selection__dropdown__items"> <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"> <div class="project-selection__dropdown__items__choice__mark-container">
<CheckmarkIcon class="project-selection__dropdown__items__choice__mark-container__image" /> <CheckmarkIcon class="project-selection__dropdown__items__choice__mark-container__image" />
</div> </div>
@ -34,15 +34,16 @@
:key="project.id" :key="project.id"
class="project-selection__dropdown__items__choice" class="project-selection__dropdown__items__choice"
@click.prevent.stop="onProjectSelected(project.id)" @click.prevent.stop="onProjectSelected(project.id)"
@keyup.enter="onProjectSelected(project.id)"
> >
<p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p> <p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
</div> </div>
</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 /> <ManageIcon />
<p class="project-selection__dropdown__link-container__label">Manage Projects</p> <p class="project-selection__dropdown__link-container__label">Manage Projects</p>
</div> </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 /> <CreateProjectIcon />
<p class="project-selection__dropdown__link-container__label">Create new</p> <p class="project-selection__dropdown__link-container__label">Create new</p>
</div> </div>
@ -402,6 +403,10 @@ export default class ProjectSelection extends Vue {
object-fit: cover; object-fit: cover;
} }
} }
&:focus {
background-color: #f5f6fa;
}
} }
} }
@ -435,6 +440,10 @@ export default class ProjectSelection extends Vue {
fill: var(--c-blue-3); fill: var(--c-blue-3);
} }
} }
&:focus {
background-color: #f5f6fa;
}
} }
} }
} }

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

@ -3,35 +3,35 @@
<template> <template>
<div> <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" /> <NewProjectIcon class="dropdown-item__icon" />
<div class="dropdown-item__text"> <div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">New Project</h2> <h2 class="dropdown-item__text__title">New Project</h2>
<p class="dropdown-item__text__label">Create a new project.</p> <p class="dropdown-item__text__label">Create a new project.</p>
</div> </div>
</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" /> <CreateAGIcon class="dropdown-item__icon" />
<div class="dropdown-item__text"> <div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Create an Access Grant</h2> <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> <p class="dropdown-item__text__label">Start the wizard to create a new access grant.</p>
</div> </div>
</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" /> <S3Icon class="dropdown-item__icon" />
<div class="dropdown-item__text"> <div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Create S3 Gateway Credentials</h2> <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> <p class="dropdown-item__text__label">Start the wizard to generate S3 credentials.</p>
</div> </div>
</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" /> <UploadInWebIcon class="dropdown-item__icon" />
<div class="dropdown-item__text"> <div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Upload in Web</h2> <h2 class="dropdown-item__text__title">Upload in Web</h2>
<p class="dropdown-item__text__label">Start uploading files in the web browser.</p> <p class="dropdown-item__text__label">Start uploading files in the web browser.</p>
</div> </div>
</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" /> <UploadInCLIIcon class="dropdown-item__icon" />
<div class="dropdown-item__text"> <div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Upload using CLI</h2> <h2 class="dropdown-item__text__title">Upload using CLI</h2>
@ -141,3 +141,9 @@ export default class QuickStartLinks extends Vue {
} }
} }
</script> </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> </script>
<style scoped lang="scss">
.dropdown-item:focus {
background-color: #f5f6fa;
outline: auto;
outline-color: var(--c-blue-3);
}
</style>