feat(navigation): use focus-visible for nav items
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
kolaente 2024-09-17 12:30:17 +02:00
parent 4dd9d5de67
commit 65a2814b2a
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 35 additions and 12 deletions

@ -3,7 +3,7 @@
class="list-menu loader-container is-loading-small"
:class="{'is-loading': isLoading}"
>
<div>
<div class="navigation-item">
<BaseButton
v-if="canCollapse && childProjects?.length > 0"
class="collapse-project-button"
@ -193,4 +193,18 @@ const childProjects = computed(() => {
.is-touch .handle.has-color-bubble {
display: none !important;
}
.navigation-item:has(*:focus-visible) {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
background-color: var(--white);
.favorite, .menu-list-dropdown {
opacity: 1;
}
}
.navigation-item a:focus-visible {
// The focus ring is already added to the navigation-item, so we don't need to add it again.
box-shadow: none;
}
</style>

@ -377,7 +377,7 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
background-color: var(--grey-100);
}
&:focus-within, &:focus {
&:focus-within {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
a.task-link {
@ -385,6 +385,16 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
}
}
@supports not selector(:focus-within) {
:focus {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
a.task-link {
box-shadow: none;
}
}
}
.tasktext,
&.tasktext {
text-overflow: ellipsis;

@ -5,17 +5,16 @@
outline: none;
}
:focus {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
a, button {
&:focus-visible {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
:focus:not(:focus-visible) {
outline: 0;
}
:focus-visible,
:-moz-focusring {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
@supports not selector(:focus-visible) {
&:focus {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
}
}
:root {