self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-17 20:48:11 +02:00
Code Issues Releases Activity

Desktop: Accessibility: Improve sidebar content contrast (#11638)

Browse Source
This commit is contained in:
Henry Heino 2025-01-18 04:41:45 -08:00 committed by GitHub
parent 29e55b8231
commit c58aac9387
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app-desktop/gui/Sidebar/styles/index.ts
View File

@ -61,7 +61,12 @@ export const StyledListItemAnchor = styled.a`
text-decoration: none;
color: ${(props: StyleProps) => listItemTextColor(props)};
cursor: default;
opacity: ${(props: StyleProps) => props.selected || props.shareId ? 1 : 0.8};
opacity: ${(props: StyleProps) => {
// So that the conflicts folder and shared folders have sufficient contrast,
// use an opacity of 1 even when unselected.
const needsHigherContrast = props.isConflictFolder || props.isSpecialItem;
return (props.selected || props.shareId || needsHigherContrast) ? 1 : 0.8;
}};
white-space: nowrap;
display: flex;
flex: 1;

4
packages/app-desktop/integration-tests/wcag.spec.ts
View File

@ -56,10 +56,6 @@ test.describe('wcag', () => {
await mainScreen.createNewNote('Test');
// For now, activate all notes to make it active. When inactive, it causes a contrast warning.
// This seems to be allowed under WCAG 2.2 SC 1.4.3 under the "Incidental" exception.
await mainScreen.sidebar.allNotes.click();
// Ensure that `:hover` styling is consistent between tests:
await mainScreen.noteEditor.noteTitleInput.hover();

2
packages/lib/theme.ts
View File

@ -215,7 +215,7 @@ export function extraStyles(theme: Theme) {
...fontSizes,
selectedDividerColor: Color(theme.dividerColor).darken(0.2).hex(),
iconColor,
colorFaded2: Color(theme.color2).alpha(0.5).rgb(),
colorFaded2: Color(theme.color2).alpha(0.52).rgb(),
colorHover2: Color(theme.color2).alpha(0.7).rgb(),
colorActive2: Color(theme.color2).alpha(0.9).rgb(),

2
packages/lib/themes/light.ts
View File

@ -24,7 +24,7 @@ const theme: Theme = {
backgroundColor2: '#313640',
color2: '#ffffff',
selectedColor2: '#131313',
colorError2: '#ff6c6c',
colorError2: '#ff7070',
colorWarn2: '#ffcb81',
colorWarn3: '#ff7626',