Desktop: Accessibility: Add setting to disable custom scrollbars

See:
- https://www.w3.org/WAI/WCAG22/quickref/#target-size-minimum
   - Joplin's custom scrollbars are thinner than the minimum target
     size.
- laurent22#10795

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx

@@ -48,7 +48,10 @@ function defaultRenderedBody(): RenderedBody {
 }
 
 function markupRenderOptions(override: MarkupToHtmlOptions = null): MarkupToHtmlOptions {
-	return { ...override };
+	return {
+		customScrollbars: Setting.value('ui.customScrollbars'),
+		...override,
+	};
 }
 
 const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditorRef>) => {

packages/app-desktop/gui/NoteEditor/NoteEditor.tsx

@@ -201,6 +201,7 @@ function NoteEditorContent(props: NoteEditorProps) {
 			contentMaxWidth: props.contentMaxWidth,
 			contentMaxWidthTarget: options.contentMaxWidthTarget,
 			whiteBackgroundNoteRendering: options.whiteBackgroundNoteRendering,
+			customScrollbars: Setting.value('ui.customScrollbars'),
 		});
 	}, [props.themeId, props.customCss, props.contentMaxWidth]);
 

packages/app-desktop/gui/NoteEditor/utils/types.ts

@@ -81,6 +81,7 @@ export interface MarkupToHtmlOptions {
 	bodyOnly?: boolean;
 	mapsToLine?: boolean;
 	useCustomPdfViewer?: boolean;
+	customScrollbars?: boolean;
 	noteId?: string;
 	vendorDir?: string;
 	platformName?: string;

packages/app-desktop/gui/Sidebar/styles/folder-and-tag-list.scss

@@ -13,7 +13,7 @@
 	}
 }
 
-body:not(.-native-scrollbars) .folder-and-tag-list {
+:root:not(.-native-scrollbars) .folder-and-tag-list {
 	::-webkit-scrollbar {
 		width: calc(var(--scrollbar-size) + 1px);
 	}

packages/app-desktop/gui/StyleSheets/StyleSheetContainer.tsx

@@ -98,10 +98,10 @@ const useAppliedCss = (doc: Document|null, css: string) => {
 
 const useThemeFlag = (doc: Document|null, flag: string, enabled: boolean) => {
 	useEffect(() => {
-		if (enabled && doc?.body) {
-			doc.body.classList.add(flag);
+		if (enabled && doc) {
+			doc.documentElement.classList.add(flag);
 			return () => {
-				doc.body.classList.remove(flag);
+				doc.documentElement.classList.remove(flag);
 			};
 		}
 

packages/app-desktop/main.scss

@@ -33,7 +33,7 @@ a {
 	text-decoration: none;
 }
 
-body:not(.-native-scrollbars) {
+:root:not(.-native-scrollbars) {
 	::-webkit-scrollbar {
 		width: 7px;
 		height: 7px;

packages/renderer/MdToHtml.ts

@@ -644,6 +644,7 @@ export default class MdToHtml implements MarkupRenderer {
 
 		let cssStrings = noteStyle(options.theme, {
 			contentMaxWidth: options.contentMaxWidth,
+			customScrollbars: options.customScrollbars,
 		});
 
 		let output: RenderResult = { ...this.allProcessedAssets(allRules, options.theme, options.codeTheme) };

packages/renderer/noteStyle.ts

@@ -13,8 +13,12 @@ export interface Options {
 	contentMaxWidthTarget?: string;
 	themeId?: number;
 	whiteBackgroundNoteRendering?: boolean;
+	customScrollbars?: boolean;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+type Theme = any;
+
 const notLoadedCss = `
 	.not-loaded-resource img {
 		width: 1.15em;
@@ -36,6 +40,29 @@ const notLoadedCss = `
 	}
 `;
 
+const customScrollbarCss = (theme: Theme) => `
+	::-webkit-scrollbar {
+		width: 7px;
+		height: 7px;
+	}
+	::-webkit-scrollbar-corner {
+		background: none;
+	}
+	::-webkit-scrollbar-thumb {
+		background: color-mix(in srgb, ${theme.color} 26%, transparent);
+		border-radius: 5px;
+	}
+	::-webkit-scrollbar-track:hover {
+		background: color-mix(in srgb, ${theme.color} 10%, rgba(150, 150, 150, 0.05));
+	}
+	::-webkit-scrollbar-thumb:hover {
+		background: color-mix(in srgb, ${theme.color} 70%, transparent);
+	}
+	::-webkit-scrollbar-track {
+		border: none;
+	}
+`;
+
 // If we are viewing an HTML note, it means it comes from the web clipper or
 // emil-to-note, in which case we don't apply any specific theme. We just need
 // to ensure the background is white so that we don't end up with a dark theme
@@ -72,8 +99,7 @@ export const whiteBackgroundNoteStyle = () => {
 	`;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-export default function(theme: any, options: Options = null) {
+export default function(theme: Theme, options: Options = null) {
 	options = {
 		contentMaxWidth: 0,
 		...options,
@@ -117,27 +143,7 @@ export default function(theme: any, options: Options = null) {
 			border-radius: 3px;
 			background-color: ${theme.codeBackgroundColor};
 		}
-		::-webkit-scrollbar {
-			width: 7px;
-			height: 7px;
-		}
-		::-webkit-scrollbar-corner {
-			background: none;
-		}
-		::-webkit-scrollbar-track {
-			border: none;
-		}
-		::-webkit-scrollbar-thumb {
-			background: rgba(100, 100, 100, 0.3); 
-			border-radius: 5px;
-		}
-		::-webkit-scrollbar-track:hover {
-			background: rgba(0, 0, 0, 0.1); 
-		}
-		::-webkit-scrollbar-thumb:hover {
-			background: rgba(100, 100, 100, 0.7); 
-		}
-
+		${options.customScrollbars ? customScrollbarCss(theme) : ''}
 		${maxWidthCss}
 
 		/* Remove top padding and margin from first child so that top of rendered text is aligned to top of text editor text */

packages/renderer/types.ts

@@ -19,6 +19,7 @@ export interface FsDriver {
 
 export interface RenderOptions {
 	contentMaxWidth?: number;
+	customScrollbars?: boolean;
 	bodyOnly?: boolean;
 	splitted?: boolean;
 	enableLongPress?: boolean;