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

web/satellite: fix accessibility issues with sidebar navigation

Browse Source 
Fixes https://github.com/storj/storj/issues/5449

Change-Id: I095c6a70899cd9f5939ef8c802d0faa8322d441d
This commit is contained in:
Lizzy Thomson 2023-03-03 15:06:11 -07:00
parent 0696256769
commit 0559d19db5
3 changed files with 56 additions and 1 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

@ -3,7 +3,7 @@
<template>
<div ref="accountArea" class="account-area">
<div class="account-area__wrap" :class="{ active: isDropdown }" aria-roledescription="account-area" @click.stop="toggleDropdown">
<div role="button" tabindex="0" class="account-area__wrap" :class="{ active: isDropdown }" aria-roledescription="account-area" @keyup.enter="toggleDropdown" @click.stop="toggleDropdown">
<div class="account-area__wrap__left">
<AccountIcon class="account-area__wrap__left__icon" />
<p class="account-area__wrap__left__label">My Account</p>
@ -227,6 +227,8 @@ export default class AccountArea extends Vue {
&__wrap {
box-sizing: border-box;
padding: 22px 32px;
outline: none;
border: none;
border-left: 4px solid #fff;
width: 100%;
display: flex;
@ -267,6 +269,21 @@ export default class AccountArea extends Vue {
fill: var(--c-blue-3);
}
}
&:focus {
outline: none;
border-color: var(--c-grey-1);
background-color: var(--c-grey-1);
color: var(--c-blue-3);
p {
color: var(--c-blue-3);
}
:deep(path) {
fill: var(--c-blue-3);
}
}
}
&__dropdown {

18
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -27,8 +27,11 @@
<div class="navigation-area__container__wrap__border" />
<div ref="resourcesContainer" class="container-wrapper">
<div
role="button"
tabindex="0"
class="navigation-area__container__wrap__item-container"
:class="{ active: isResourcesDropdownShown }"
@keyup.enter="toggleResourcesDropdown"
@click.stop="toggleResourcesDropdown"
>
<div class="navigation-area__container__wrap__item-container__left">
@ -48,8 +51,11 @@
</div>
<div ref="quickStartContainer" class="container-wrapper">
<div
role="button"
tabindex="0"
class="navigation-area__container__wrap__item-container"
:class="{ active: isQuickStartDropdownShown }"
@keyup.enter="toggleQuickStartDropdown"
@click.stop="toggleQuickStartDropdown"
>
<div class="navigation-area__container__wrap__item-container__left">
@ -348,6 +354,7 @@ export default class NavigationArea extends Vue {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
border-left: 4px solid #fff;
color: var(--c-grey-6);
position: static;
@ -374,6 +381,17 @@ export default class NavigationArea extends Vue {
fill: var(--c-blue-3);
}
}
&:focus {
outline: none;
border-color: var(--c-grey-1);
background-color: var(--c-grey-1);
color: var(--c-blue-3);
:deep(path) {
fill: var(--c-blue-3);
}
}
}
&__border {

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

@ -4,9 +4,12 @@
<template>
<div ref="projectSelection" class="project-selection">
<div
role="button"
tabindex="0"
class="project-selection__selected"
:class="{ active: isDropdownShown }"
aria-roledescription="project-selection"
@keyup.enter="toggleSelection"
@click.stop.prevent="toggleSelection"
>
<div class="project-selection__selected__left">
@ -312,6 +315,8 @@ export default class ProjectSelection extends Vue {
&__selected {
box-sizing: border-box;
padding: 22px 32px;
outline: none;
border: none;
border-left: 4px solid #fff;
width: 100%;
display: flex;
@ -353,6 +358,21 @@ export default class ProjectSelection extends Vue {
fill: var(--c-blue-3);
}
}
&:focus {
outline: none;
border-color: var(--c-grey-1);
background-color: var(--c-grey-1);
color: var(--c-blue-3);
p {
color: var(--c-blue-3);
}
:deep(path) {
fill: var(--c-blue-3);
}
}
}
&__dropdown {