ami/tl-vikunja
1
0
Fork 0
Code

feat(navigation): use focus-visible for nav items

Browse Source 
(cherry picked from commit 65a2814b2a43384dd6f3d412c8ab8094725d3255)
This commit is contained in:
kolaente 2024-09-17 12:30:17 +02:00
parent 51f26d14b9
commit e290d79c15
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
3 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/home/ProjectsNavigationItem.vue
View File

@ -3,7 +3,7 @@
class="list-menu loader-container is-loading-small" class="list-menu loader-container is-loading-small"
:class="{'is-loading': isLoading}" :class="{'is-loading': isLoading}"
> >
<div> <div class="navigation-item">
<BaseButton <BaseButton
v-if="canCollapse && childProjects?.length > 0" v-if="canCollapse && childProjects?.length > 0"
class="collapse-project-button" class="collapse-project-button"
@ -193,4 +193,18 @@ const childProjects = computed(() => {
.is-touch .handle.has-color-bubble { .is-touch .handle.has-color-bubble {
display: none !important; 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> </style>

12
frontend/src/components/tasks/partials/SingleTaskInProject.vue
View File

@ -377,7 +377,7 @@ function openTaskDetail(event: MouseEvent | KeyboardEvent) {
background-color: var(--grey-100); background-color: var(--grey-100);
} }
&:focus-within, &:focus { &:focus-within {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5); box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
a.task-link { 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,
&.tasktext { &.tasktext {
text-overflow: ellipsis; text-overflow: ellipsis;

19
frontend/src/styles/theme/theme.scss
View File

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