self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Desktop: Fixes #9982: Show focus indicator when navigating with keyboard (#9989)

Browse Source
This commit is contained in:
Henry Heino 2024-03-02 07:54:16 -08:00 committed by GitHub
parent f0f6590312
commit 4827d0bf92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app-desktop/gui/NoteList/style.scss
View File

@ -36,6 +36,10 @@
width: 2px;
height: 2px;
}
&:focus-visible {
outline: none;
}
}
.note-list-item-wrapper.-provisional {

17
packages/app-desktop/main.scss
View File

@ -141,9 +141,24 @@ a {
to {transform: rotate(360deg);}
}
*:focus {
*:focus-visible {
outline: 1px solid var(--joplin-color-warn);
}
// The browser-default focus-visible indicator was originally removed for aesthetic
// reasons. However, this causes accessibility issues.
//
// As a comprimise, we disable the focus-visible indicator in cases where the user is
// probably not navigating with the keyboard. Note that :focus-visible alone is not
// sufficient because it matches any focused input (https://stackoverflow.com/a/66109577).
//
// See https://github.com/laurent22/joplin/issues/9982.
input:not([type=button]):not([type=checkbox]), select {
&:focus-visible {
outline: none;
}
}
/* =========================================================================================
General classes

2
packages/lib/services/noteList/defaultListRenderer.ts
View File

@ -57,7 +57,7 @@ const renderer: ListRenderer = {
background-color: var(--joplin-selected-color);
}
&:hover {
&:hover, :focus-visible > & > .content {
background-color: var(--joplin-background-color-hover3);
}