From c58aac938781f4f982569b6c0f0e482a9ca5ab29 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sat, 18 Jan 2025 04:41:45 -0800
Subject: [PATCH] Desktop: Accessibility: Improve sidebar content contrast
 (#11638)

---
 packages/app-desktop/gui/Sidebar/styles/index.ts    | 7 ++++++-
 packages/app-desktop/integration-tests/wcag.spec.ts | 4 ----
 packages/lib/theme.ts                               | 2 +-
 packages/lib/themes/light.ts                        | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/app-desktop/gui/Sidebar/styles/index.ts b/packages/app-desktop/gui/Sidebar/styles/index.ts
index ff59ce8a47..95b8d9861d 100644
--- a/packages/app-desktop/gui/Sidebar/styles/index.ts
+++ b/packages/app-desktop/gui/Sidebar/styles/index.ts
@@ -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;
diff --git a/packages/app-desktop/integration-tests/wcag.spec.ts b/packages/app-desktop/integration-tests/wcag.spec.ts
index 4caaef4b3d..600c8c5aeb 100644
--- a/packages/app-desktop/integration-tests/wcag.spec.ts
+++ b/packages/app-desktop/integration-tests/wcag.spec.ts
@@ -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();
 
diff --git a/packages/lib/theme.ts b/packages/lib/theme.ts
index 590054cd9e..c34b29885d 100644
--- a/packages/lib/theme.ts
+++ b/packages/lib/theme.ts
@@ -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(),
 
diff --git a/packages/lib/themes/light.ts b/packages/lib/themes/light.ts
index f3ad8546cb..0755695016 100644
--- a/packages/lib/themes/light.ts
+++ b/packages/lib/themes/light.ts
@@ -24,7 +24,7 @@ const theme: Theme = {
 	backgroundColor2: '#313640',
 	color2: '#ffffff',
 	selectedColor2: '#131313',
-	colorError2: '#ff6c6c',
+	colorError2: '#ff7070',
 	colorWarn2: '#ffcb81',
 	colorWarn3: '#ff7626',