Client - make language dropdown keyboard-navigable

This commit is contained in:
Sam 2023-07-12 19:53:37 +02:00
parent 3b59c4599f
commit 4b3270f546
2 changed files with 54 additions and 39 deletions

View File

@ -1,15 +1,21 @@
<template>
<div class="dropdown-wrapper">
<div class="dropdown-selected" @click="toggleDropdown">
<button
:aria-expanded="isOpen"
class="dropdown-selector transparent"
@click="toggleDropdown"
>
<slot></slot>
</div>
</button>
<ul class="dropdown-list" v-if="isOpen">
<li
class="dropdown-item"
:class="{ selected: option.value === selected }"
v-for="(option, index) in dropdownOptions"
:key="index"
tabindex="0"
@click="updateSelected(option)"
@keydown.enter="updateSelected(option)"
>
{{ option.label }}
</li>
@ -51,36 +57,39 @@
</script>
<style scoped lang="scss">
.dropdown-list {
list-style-type: none;
background-color: #ffffff;
padding: 0 !important;
margin-top: 5px;
margin-left: -20px !important;
position: absolute;
text-align: left;
border: solid 1px lightgrey;
box-shadow: 2px 2px 5px lightgrey;
width: auto !important;
li {
padding: 3px 8px;
}
}
.dropdown-item {
cursor: pointer;
&.selected {
font-weight: bold;
@import '~@/scss/vars.scss';
.dropdown-wrapper {
.dropdown-selector {
margin: 0;
padding: $default-padding * 0.5;
}
&.selected::after {
content: ' ✔';
}
.dropdown-list {
list-style-type: none;
background-color: #ffffff;
padding: 0 !important;
margin-top: 5px;
margin-left: -20px !important;
position: absolute;
text-align: left;
border: solid 1px lightgrey;
box-shadow: 2px 2px 5px lightgrey;
width: auto !important;
&:hover {
background-color: var(--dropdown-hover-color);
.dropdown-item {
padding: 3px 12px;
&.selected {
font-weight: bold;
}
&.selected::after {
content: ' ✔';
}
&:hover {
background-color: var(--dropdown-hover-color);
}
}
}
}
</style>

View File

@ -175,6 +175,7 @@
font-size: 1.2em;
font-weight: bold;
margin-right: 10px;
line-height: 1.6em;
}
.fa {
@ -194,7 +195,7 @@
display: flex;
flex: 1;
justify-content: space-between;
line-height: 1.8em;
line-height: 2em;
width: 100%;
.nav-items-close {
@ -213,11 +214,14 @@
}
.nav-item {
padding: 0 10px;
::v-deep(.dropdown-list) {
z-index: 1000;
margin-left: -160px !important;
width: 180px !important;
&.dropdown-wrapper {
padding: 0;
margin-left: 2px;
::v-deep(.dropdown-list) {
z-index: 1000;
margin-left: -150px !important;
width: 180px !important;
}
}
}
@ -330,10 +334,12 @@
.nav-item {
padding: 7px 25px;
::v-deep(.dropdown-list) {
margin-left: initial !important;
width: auto !important;
&.dropdown-wrapper {
padding-left: 15px;
::v-deep(.dropdown-list) {
margin-left: initial !important;
width: auto !important;
}
}
}