diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 127adddf3..af311de03 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -160,6 +160,10 @@ a.card {
background: $secondary;
color: #3c376e;
+ &:focus {
+ outline: 3px solid $violet-3;
+ }
+
&:hover {
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
transform: scale(1.01, 1.01);
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 938e90250..c42d69712 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -71,6 +71,7 @@
{{ $t("Administration") }}
-
- {{ $t("Log out") }}
+
+ {{ $t("Log out") }}
@@ -317,28 +318,51 @@ nav {
font-weight: bold;
}
+ &:focus-visible,
+ &:not(.has-dropdown.is-active):focus-within {
+ outline: 2px solid $violet-3;
+ }
+
svg {
height: 1.75rem;
}
}
- .navbar-dropdown .navbar-item {
- cursor: pointer;
-
- span {
- display: flex;
+ ::v-deep .navbar-item.is-active .navbar-dropdown {
+ display: flex;
+ flex-direction: column;
+ .navbar-item {
+ flex: 1;
}
+ }
- &.is-active {
- background: $secondary;
- }
+ .navbar-dropdown {
+ .navbar-item {
+ cursor: pointer;
+ border: none;
+ background: none;
+ font: inherit;
- span.icon.is-medium {
- display: flex;
- }
+ span {
+ display: flex;
+ }
- img {
- max-height: 2.5em;
+ &.is-active {
+ background: $secondary;
+ }
+
+ span.icon.is-medium {
+ display: flex;
+ }
+
+ img {
+ max-height: 2.5em;
+ }
+
+ &:focus-visible,
+ &:focus-within {
+ outline: 3px solid $violet-3;
+ }
}
}
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index b84d3c227..95019d89f 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -351,6 +351,7 @@