From 6c9b78b053e561fe1e7491559c053258d51ab172 Mon Sep 17 00:00:00 2001
From: Henry Heino <personalizedrefrigerator@gmail.com>
Date: Wed, 23 Oct 2024 08:11:23 -0700
Subject: [PATCH] Desktop: Accessibility: Fix errors found by automated
 accessibility testing

---
 .eslintignore                                 |  2 +
 .gitignore                                    |  2 +
 packages/app-desktop/gui/Button/Button.tsx    |  3 +-
 .../gui/ConfigScreen/ConfigScreen.tsx         |  2 +-
 .../app-desktop/gui/ConfigScreen/Sidebar.tsx  |  4 +-
 .../controls/SettingDescription.tsx           |  2 +-
 .../styles/setting-description.scss           |  5 ++
 packages/app-desktop/gui/FolderIconBox.tsx    |  2 +-
 packages/app-desktop/gui/ItemList.tsx         |  1 -
 .../app-desktop/gui/MainScreen/MainScreen.tsx |  4 +-
 .../NoteBody/CodeMirror/v6/CodeMirror.tsx     |  1 +
 .../gui/NoteEditor/NoteTitle/NoteTitleBar.tsx |  1 +
 .../app-desktop/gui/NoteList/NoteList2.tsx    |  9 ++--
 .../gui/NoteListWrapper/NoteListWrapper.tsx   |  2 +-
 packages/app-desktop/gui/NoteTextViewer.tsx   |  2 +
 packages/app-desktop/gui/Sidebar/Sidebar.tsx  |  2 +-
 .../Sidebar/hooks/useOnRenderListWrapper.tsx  |  1 -
 .../listItemComponents/AllNotesItem.tsx       |  2 +-
 .../Sidebar/listItemComponents/HeaderItem.tsx |  2 +-
 .../gui/ToolbarButton/ToolbarButton.tsx       |  2 +-
 packages/app-desktop/gui/styles/index.scss    |  1 +
 .../gui/styles/note-editor-wrapper.scss       |  6 +++
 .../integration-tests/models/Sidebar.ts       |  2 +
 .../integration-tests/util/setDarkMode.ts     |  9 ++++
 .../integration-tests/util/test.ts            |  2 +
 .../integration-tests/wcag.spec.ts            | 52 +++++++++++++++++++
 packages/app-desktop/package.json             |  1 +
 .../components/NoteEditor/NoteEditor.tsx      |  2 +
 .../editor/CodeMirror/configFromSettings.ts   |  1 +
 .../testUtil/createEditorSettings.ts          |  1 +
 packages/editor/types.ts                      |  2 +
 packages/lib/themes/light.ts                  |  4 +-
 packages/tools/cspell/dictionary4.txt         |  1 +
 yarn.lock                                     | 19 +++++++
 34 files changed, 134 insertions(+), 20 deletions(-)
 create mode 100644 packages/app-desktop/gui/styles/note-editor-wrapper.scss
 create mode 100644 packages/app-desktop/integration-tests/util/setDarkMode.ts
 create mode 100644 packages/app-desktop/integration-tests/wcag.spec.ts

diff --git a/.eslintignore b/.eslintignore
index 3bb40cf2090..4b6e0fe2b80 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -488,10 +488,12 @@ packages/app-desktop/integration-tests/util/createStartupArgs.js
 packages/app-desktop/integration-tests/util/extendedExpect.js
 packages/app-desktop/integration-tests/util/firstNonDevToolsWindow.js
 packages/app-desktop/integration-tests/util/getImageSourceSize.js
+packages/app-desktop/integration-tests/util/setDarkMode.js
 packages/app-desktop/integration-tests/util/setFilePickerResponse.js
 packages/app-desktop/integration-tests/util/setMessageBoxResponse.js
 packages/app-desktop/integration-tests/util/test.js
 packages/app-desktop/integration-tests/util/waitForNextOpenPath.js
+packages/app-desktop/integration-tests/wcag.spec.js
 packages/app-desktop/playwright.config.js
 packages/app-desktop/plugins/GotoAnything.js
 packages/app-desktop/services/autoUpdater/AutoUpdaterService.test.js
diff --git a/.gitignore b/.gitignore
index f1c19367a4a..798391187a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -465,10 +465,12 @@ packages/app-desktop/integration-tests/util/createStartupArgs.js
 packages/app-desktop/integration-tests/util/extendedExpect.js
 packages/app-desktop/integration-tests/util/firstNonDevToolsWindow.js
 packages/app-desktop/integration-tests/util/getImageSourceSize.js
+packages/app-desktop/integration-tests/util/setDarkMode.js
 packages/app-desktop/integration-tests/util/setFilePickerResponse.js
 packages/app-desktop/integration-tests/util/setMessageBoxResponse.js
 packages/app-desktop/integration-tests/util/test.js
 packages/app-desktop/integration-tests/util/waitForNextOpenPath.js
+packages/app-desktop/integration-tests/wcag.spec.js
 packages/app-desktop/playwright.config.js
 packages/app-desktop/plugins/GotoAnything.js
 packages/app-desktop/services/autoUpdater/AutoUpdaterService.test.js
diff --git a/packages/app-desktop/gui/Button/Button.tsx b/packages/app-desktop/gui/Button/Button.tsx
index 56e248ed31a..bb05108c9bf 100644
--- a/packages/app-desktop/gui/Button/Button.tsx
+++ b/packages/app-desktop/gui/Button/Button.tsx
@@ -224,7 +224,8 @@ const Button = React.forwardRef((props: Props, ref: any) => {
 	function renderIcon() {
 		if (!props.iconName) return null;
 		return <StyledIcon
-			aria-label={props.iconLabel ?? ''}
+			aria-label={props.iconLabel ?? undefined}
+			aria-hidden={!props.iconLabel}
 			animation={props.iconAnimation}
 			mr={iconOnly ? '0' : '6px'}
 			color={props.color}
diff --git a/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx b/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx
index 80d1da57288..25b00bc4b80 100644
--- a/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx
+++ b/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx
@@ -438,7 +438,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		}
 
 		return (
-			<div className="config-screen" style={{ display: 'flex', flexDirection: 'row', height: this.props.style.height }}>
+			<div className="config-screen" role="main" style={{ display: 'flex', flexDirection: 'row', height: this.props.style.height }}>
 				<Sidebar
 					selection={this.state.selectedSectionName}
 					onSelectionChange={this.sidebar_selectionChange}
diff --git a/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx b/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx
index 47c8999fefd..13789a54c42 100644
--- a/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx
+++ b/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx
@@ -56,7 +56,7 @@ export const StyledDivider = styled.div`
 	border-bottom: 1px solid ${(props: StyleProps) => props.theme.dividerColor};
 	background-color: ${(props: StyleProps) => props.theme.selectedColor2};
 	font-size: ${(props: StyleProps) => Math.round(props.theme.fontSize)}px;
-	opacity: 0.5;
+	opacity: 0.58;
 `;
 
 export const StyledListItemLabel = styled.span`
@@ -131,9 +131,9 @@ export default function Sidebar(props: Props) {
 				onKeyDown={onKeyDown}
 			>
 				<StyledListItemIcon
-					aria-label=''
 					className={Setting.sectionNameToIcon(section.name, AppType.Desktop)}
 					role='img'
+					aria-hidden='true'
 				/>
 				<StyledListItemLabel>
 					{Setting.sectionNameToLabel(section.name)}
diff --git a/packages/app-desktop/gui/ConfigScreen/controls/SettingDescription.tsx b/packages/app-desktop/gui/ConfigScreen/controls/SettingDescription.tsx
index 505d6768103..6af05a95d08 100644
--- a/packages/app-desktop/gui/ConfigScreen/controls/SettingDescription.tsx
+++ b/packages/app-desktop/gui/ConfigScreen/controls/SettingDescription.tsx
@@ -6,7 +6,7 @@ interface Props {
 }
 
 const SettingDescription: React.FC<Props> = props => {
-	return props.text ? <div className='setting-description' id={props.id}>{props.text}</div> : null;
+	return <div className={`setting-description ${!props.text ? '-empty' : ''}`} id={props.id}>{props.text}</div>;
 };
 
 export default SettingDescription;
diff --git a/packages/app-desktop/gui/ConfigScreen/styles/setting-description.scss b/packages/app-desktop/gui/ConfigScreen/styles/setting-description.scss
index 457e17eada6..f917748de4b 100644
--- a/packages/app-desktop/gui/ConfigScreen/styles/setting-description.scss
+++ b/packages/app-desktop/gui/ConfigScreen/styles/setting-description.scss
@@ -6,4 +6,9 @@
 	font-style: italic;
 	max-width: 70em;
 	margin-top: 5px;
+
+	&.-empty {
+		margin: 0;
+		padding: 0;
+	}
 }
diff --git a/packages/app-desktop/gui/FolderIconBox.tsx b/packages/app-desktop/gui/FolderIconBox.tsx
index 0f2e8ffd513..6385d9f50cc 100644
--- a/packages/app-desktop/gui/FolderIconBox.tsx
+++ b/packages/app-desktop/gui/FolderIconBox.tsx
@@ -17,7 +17,7 @@ export default function(props: Props) {
 	} else if (folderIcon.type === FolderIconType.DataUrl) {
 		return <img style={{ width, height, opacity }} src={folderIcon.dataUrl} />;
 	} else if (folderIcon.type === FolderIconType.FontAwesome) {
-		return <i style={{ fontSize: 18, width, opacity }} className={folderIcon.name} role='img'></i>;
+		return <i style={{ fontSize: 18, width, opacity }} className={folderIcon.name} role='img' aria-hidden={true}></i>;
 	} else {
 		throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
 	}
diff --git a/packages/app-desktop/gui/ItemList.tsx b/packages/app-desktop/gui/ItemList.tsx
index 145e177f047..ec687973c6d 100644
--- a/packages/app-desktop/gui/ItemList.tsx
+++ b/packages/app-desktop/gui/ItemList.tsx
@@ -211,7 +211,6 @@ class ItemList<ItemType> extends React.Component<Props<ItemType>, State> {
 				id={this.props.id}
 				role={this.props.role}
 				aria-label={this.props['aria-label']}
-				aria-setsize={items.length}
 
 				onScroll={this.onScroll}
 				onKeyDown={this.onKeyDown}
diff --git a/packages/app-desktop/gui/MainScreen/MainScreen.tsx b/packages/app-desktop/gui/MainScreen/MainScreen.tsx
index 521d93f63ea..2d22ac919ff 100644
--- a/packages/app-desktop/gui/MainScreen/MainScreen.tsx
+++ b/packages/app-desktop/gui/MainScreen/MainScreen.tsx
@@ -791,7 +791,9 @@ class MainScreenComponent extends React.Component<Props, State> {
 				} else if (this.props.settingEditorCodeView && this.props.enableLegacyMarkdownEditor) {
 					bodyEditor = 'CodeMirror5';
 				}
-				return <NoteEditor key={key} bodyEditor={bodyEditor} />;
+				return <div className='note-editor-wrapper' role='main' aria-label={_('Note')}>
+					<NoteEditor key={key} bodyEditor={bodyEditor} />
+				</div>;
 			},
 		};
 
diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx
index 14cf9e21968..6a2186d083d 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx
+++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx
@@ -386,6 +386,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 			spellcheckEnabled: Setting.value('editor.spellcheckBeta'),
 			keymap: keyboardMode,
 			indentWithTabs: true,
+			editorLabel: _('Markdown editor'),
 		};
 	}, [
 		props.contentMarkupLanguage, props.disabled, props.keyboardMode, styles.globalTheme,
diff --git a/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx b/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
index a863efc30a0..3be60699e56 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
+++ b/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
@@ -112,6 +112,7 @@ export default function NoteTitleBar(props: Props) {
 				type="text"
 				ref={props.titleInputRef}
 				placeholder={props.isProvisional ? (props.noteIsTodo ? _('Creating new to-do...') : _('Creating new note...')) : ''}
+				aria-label={props.isProvisional ? undefined : _('Note title')}
 				style={styles.titleInput}
 				readOnly={props.disabled}
 				onChange={props.onTitleChange}
diff --git a/packages/app-desktop/gui/NoteList/NoteList2.tsx b/packages/app-desktop/gui/NoteList/NoteList2.tsx
index 7c47bb25517..2e583f06063 100644
--- a/packages/app-desktop/gui/NoteList/NoteList2.tsx
+++ b/packages/app-desktop/gui/NoteList/NoteList2.tsx
@@ -281,12 +281,13 @@ const NoteList = (props: Props) => {
 		onItemContextMenu({ itemId: activeNoteId });
 	}, [onItemContextMenu, activeNoteId]);
 
+	const hasNotes = !!props.notes.length;
 	return (
 		<div
-			role='listbox'
-			aria-label={_('Notes')}
-			aria-activedescendant={getNoteElementIdFromJoplinId(activeNoteId)}
-			aria-multiselectable={true}
+			role={hasNotes ? 'listbox' : 'group'}
+			aria-label={hasNotes ? _('Notes') : null}
+			aria-activedescendant={activeNoteId ? getNoteElementIdFromJoplinId(activeNoteId) : undefined}
+			aria-multiselectable={hasNotes ? true : undefined}
 			tabIndex={0}
 
 			onFocus={onFocus}
diff --git a/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx b/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
index 96af332d531..092bed0845f 100644
--- a/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
+++ b/packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
@@ -175,7 +175,7 @@ export default function NoteListWrapper(props: Props) {
 	};
 
 	return (
-		<StyledRoot>
+		<StyledRoot role='navigation' aria-label={_('Note list')}>
 			<NoteListControls
 				height={controlHeight}
 				width={noteListSize.width}
diff --git a/packages/app-desktop/gui/NoteTextViewer.tsx b/packages/app-desktop/gui/NoteTextViewer.tsx
index debb4451eb5..d9e77d37671 100644
--- a/packages/app-desktop/gui/NoteTextViewer.tsx
+++ b/packages/app-desktop/gui/NoteTextViewer.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { reg } from '@joplin/lib/registry';
 import bridge from '../services/bridge';
 import { focus } from '@joplin/lib/utils/focusHandler';
+import { _ } from '@joplin/lib/locale';
 
 interface Props {
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
@@ -234,6 +235,7 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 				style={viewerStyle}
 				allow='fullscreen=* autoplay=* local-fonts=* encrypted-media=*'
 				allowFullScreen={true}
+				aria-label={_('Rendered note')}
 				src={`joplin-content://note-viewer/${__dirname}/note-viewer/index.html`}
 			></iframe>
 		);
diff --git a/packages/app-desktop/gui/Sidebar/Sidebar.tsx b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
index f55fdd7176c..f89fdbdbd0a 100644
--- a/packages/app-desktop/gui/Sidebar/Sidebar.tsx
+++ b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
@@ -74,7 +74,7 @@ const SidebarComponent = (props: Props) => {
 	);
 
 	return (
-		<StyledRoot className="sidebar">
+		<StyledRoot className="sidebar" role='navigation' aria-label={_('Sidebar')}>
 			<div style={{ flex: 1 }}><FolderAndTagList/></div>
 			<div style={{ flex: 0, padding: theme.mainPadding }}>
 				{syncReportComp}
diff --git a/packages/app-desktop/gui/Sidebar/hooks/useOnRenderListWrapper.tsx b/packages/app-desktop/gui/Sidebar/hooks/useOnRenderListWrapper.tsx
index af0140d1d2e..5fbfc475a16 100644
--- a/packages/app-desktop/gui/Sidebar/hooks/useOnRenderListWrapper.tsx
+++ b/packages/app-desktop/gui/Sidebar/hooks/useOnRenderListWrapper.tsx
@@ -33,7 +33,6 @@ const useOnRenderListWrapper = ({ selectedIndex, onKeyDown }: Props) => {
 			<div
 				role='tree'
 				className='sidebar-list-items-wrapper'
-				aria-setsize={listItems.length}
 				tabIndex={allowContainerFocus ? 0 : undefined}
 				onKeyDown={onKeyDown}
 			>
diff --git a/packages/app-desktop/gui/Sidebar/listItemComponents/AllNotesItem.tsx b/packages/app-desktop/gui/Sidebar/listItemComponents/AllNotesItem.tsx
index 2bfaf2c68cd..c42bb0290e4 100644
--- a/packages/app-desktop/gui/Sidebar/listItemComponents/AllNotesItem.tsx
+++ b/packages/app-desktop/gui/Sidebar/listItemComponents/AllNotesItem.tsx
@@ -60,7 +60,7 @@ const AllNotesItem: React.FC<Props> = props => {
 			itemCount={props.itemCount}
 		>
 			<EmptyExpandLink/>
-			<StyledAllNotesIcon aria-label='' role='img' className='icon-notes'/>
+			<StyledAllNotesIcon aria-hidden='true' role='img' className='icon-notes'/>
 			<StyledListItemAnchor
 				className="list-item"
 				isSpecialItem={true}
diff --git a/packages/app-desktop/gui/Sidebar/listItemComponents/HeaderItem.tsx b/packages/app-desktop/gui/Sidebar/listItemComponents/HeaderItem.tsx
index 08080961ce1..0626e193c76 100644
--- a/packages/app-desktop/gui/Sidebar/listItemComponents/HeaderItem.tsx
+++ b/packages/app-desktop/gui/Sidebar/listItemComponents/HeaderItem.tsx
@@ -59,7 +59,7 @@ const HeaderItem: React.FC<Props> = props => {
 			onDrop={props.onDrop}
 		>
 			<StyledHeader onClick={onClick}>
-				<StyledHeaderIcon aria-label='' role='img' className={item.iconName}/>
+				<StyledHeaderIcon aria-hidden='true' role='img' className={item.iconName}/>
 				<StyledHeaderLabel>{item.label}</StyledHeaderLabel>
 			</StyledHeader>
 		</ListItemWrapper>
diff --git a/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx b/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx
index 5c8233b696a..91c8ee46503 100644
--- a/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx
+++ b/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx
@@ -36,7 +36,7 @@ export default function ToolbarButton(props: Props) {
 	const iconName = getProp(props, 'iconName');
 	if (iconName) {
 		const iconProps: React.HTMLProps<HTMLDivElement> = {
-			'aria-label': '',
+			'aria-hidden': true,
 			role: 'img',
 			className: `toolbar-icon ${title ? '-has-title' : ''} ${iconName}`,
 		};
diff --git a/packages/app-desktop/gui/styles/index.scss b/packages/app-desktop/gui/styles/index.scss
index 1b6eed19c5b..fe14a5d7f42 100644
--- a/packages/app-desktop/gui/styles/index.scss
+++ b/packages/app-desktop/gui/styles/index.scss
@@ -9,3 +9,4 @@
 @use './editor-toolbar.scss';
 @use './user-webview-dialog-container.scss';
 @use './dialog-anchor-node.scss';
+@use './note-editor-wrapper.scss';
diff --git a/packages/app-desktop/gui/styles/note-editor-wrapper.scss b/packages/app-desktop/gui/styles/note-editor-wrapper.scss
new file mode 100644
index 00000000000..b82cf303a01
--- /dev/null
+++ b/packages/app-desktop/gui/styles/note-editor-wrapper.scss
@@ -0,0 +1,6 @@
+
+.note-editor-wrapper {
+	flex-grow: 1;
+	height: 100%;
+	width: 100%;
+}
\ No newline at end of file
diff --git a/packages/app-desktop/integration-tests/models/Sidebar.ts b/packages/app-desktop/integration-tests/models/Sidebar.ts
index 1a35d2a4b5c..d860198b892 100644
--- a/packages/app-desktop/integration-tests/models/Sidebar.ts
+++ b/packages/app-desktop/integration-tests/models/Sidebar.ts
@@ -4,9 +4,11 @@ import { ElectronApplication, Locator, Page } from '@playwright/test';
 
 export default class Sidebar {
 	public readonly container: Locator;
+	public readonly allNotes: Locator;
 
 	public constructor(page: Page, private mainScreen: MainScreen) {
 		this.container = page.locator('.rli-sideBar');
+		this.allNotes = this.container.getByText('All notes');
 	}
 
 	public async createNewFolder(title: string) {
diff --git a/packages/app-desktop/integration-tests/util/setDarkMode.ts b/packages/app-desktop/integration-tests/util/setDarkMode.ts
new file mode 100644
index 00000000000..a12ec57e5c9
--- /dev/null
+++ b/packages/app-desktop/integration-tests/util/setDarkMode.ts
@@ -0,0 +1,9 @@
+import { ElectronApplication } from '@playwright/test';
+
+const setDarkMode = (app: ElectronApplication, darkMode: boolean) => {
+	return app.evaluate(({ nativeTheme }, darkMode) => {
+		nativeTheme.themeSource = darkMode ? 'dark' : 'light';
+	}, darkMode);
+};
+
+export default setDarkMode;
diff --git a/packages/app-desktop/integration-tests/util/test.ts b/packages/app-desktop/integration-tests/util/test.ts
index 93729bed53e..d8d9dc8da70 100644
--- a/packages/app-desktop/integration-tests/util/test.ts
+++ b/packages/app-desktop/integration-tests/util/test.ts
@@ -4,6 +4,7 @@ import { _electron as electron, Page, ElectronApplication, test as base } from '
 import uuid from '@joplin/lib/uuid';
 import createStartupArgs from './createStartupArgs';
 import firstNonDevToolsWindow from './firstNonDevToolsWindow';
+import setDarkMode from './setDarkMode';
 
 
 type StartWithPluginsResult = { app: ElectronApplication; mainWindow: Page };
@@ -53,6 +54,7 @@ export const test = base.extend<JoplinFixtures>({
 	electronApp: async ({ profileDirectory }, use) => {
 		const startupArgs = createStartupArgs(profileDirectory);
 		const electronApp = await electron.launch({ args: startupArgs });
+		await setDarkMode(electronApp, false);
 
 		await use(electronApp);
 
diff --git a/packages/app-desktop/integration-tests/wcag.spec.ts b/packages/app-desktop/integration-tests/wcag.spec.ts
new file mode 100644
index 00000000000..97d6aae1b64
--- /dev/null
+++ b/packages/app-desktop/integration-tests/wcag.spec.ts
@@ -0,0 +1,52 @@
+import { test, expect } from './util/test';
+import MainScreen from './models/MainScreen';
+import SettingsScreen from './models/SettingsScreen';
+import AxeBuilder from '@axe-core/playwright';
+import { Page } from '@playwright/test';
+
+const createScanner = (page: Page) => {
+	return new AxeBuilder({ page })
+		.disableRules(['page-has-heading-one'])
+		.setLegacyMode(true);
+};
+
+const expectNoViolations = async (page: Page) => {
+	const results = await createScanner(page).analyze();
+	expect(results.violations).toEqual([]);
+};
+
+test.describe('wcag', () => {
+	for (const tabName of ['General', 'Plugins']) {
+		test(`should not detect significant issues in the settings screen ${tabName} tab`, async ({ electronApp, mainWindow }) => {
+			const mainScreen = new MainScreen(mainWindow);
+			await mainScreen.waitFor();
+
+			await mainScreen.openSettings(electronApp);
+
+			// Should be on the settings screen
+			const settingsScreen = new SettingsScreen(mainWindow);
+			await settingsScreen.waitFor();
+
+			const tabLocator = settingsScreen.getTabLocator(tabName);
+			await tabLocator.click();
+			await expect(tabLocator).toBeFocused();
+
+			await expectNoViolations(mainWindow);
+		});
+	}
+
+	test('should not detect significant issues in the main screen with an open note', async ({ mainWindow }) => {
+		const mainScreen = new MainScreen(mainWindow);
+		await mainScreen.waitFor();
+
+		// 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();
+		await mainScreen.createNewNote('Test');
+
+		const results = await createScanner(mainWindow)
+			.analyze();
+		expect(results.violations).toEqual([]);
+	});
+});
+
diff --git a/packages/app-desktop/package.json b/packages/app-desktop/package.json
index cab09bd9baa..3a52b2b33ab 100644
--- a/packages/app-desktop/package.json
+++ b/packages/app-desktop/package.json
@@ -124,6 +124,7 @@
   "homepage": "https://github.com/laurent22/joplin#readme",
   "devDependencies": {
     "7zip-bin": "5.2.0",
+    "@axe-core/playwright": "4.10.0",
     "@electron/rebuild": "3.6.0",
     "@joplin/default-plugins": "~3.1",
     "@joplin/tools": "~3.1",
diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
index c10fed28ae7..6807bfd6780 100644
--- a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
+++ b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
@@ -347,6 +347,8 @@ function NoteEditor(props: Props, ref: any) {
 		ignoreModifiers: false,
 
 		indentWithTabs: true,
+
+		editorLabel: _('Markdown editor'),
 	}), [props.themeId, props.readOnly]);
 
 	const injectedJavaScript = `
diff --git a/packages/editor/CodeMirror/configFromSettings.ts b/packages/editor/CodeMirror/configFromSettings.ts
index 2e931df7c24..26b1a8f44ea 100644
--- a/packages/editor/CodeMirror/configFromSettings.ts
+++ b/packages/editor/CodeMirror/configFromSettings.ts
@@ -46,6 +46,7 @@ const configFromSettings = (settings: EditorSettings) => {
 			autocapitalize: 'sentence',
 			autocorrect: settings.spellcheckEnabled ? 'true' : 'false',
 			spellcheck: settings.spellcheckEnabled ? 'true' : 'false',
+			'aria-label': settings.editorLabel,
 		}),
 		EditorState.readOnly.of(settings.readOnly),
 		indentUnit.of(settings.indentWithTabs ? '\t' : '    '),
diff --git a/packages/editor/CodeMirror/testUtil/createEditorSettings.ts b/packages/editor/CodeMirror/testUtil/createEditorSettings.ts
index 344564b4e87..cb06969969d 100644
--- a/packages/editor/CodeMirror/testUtil/createEditorSettings.ts
+++ b/packages/editor/CodeMirror/testUtil/createEditorSettings.ts
@@ -16,6 +16,7 @@ const createEditorSettings = (themeId: number) => {
 		themeData,
 
 		indentWithTabs: true,
+		editorLabel: 'Markdown editor',
 	};
 
 	return editorSettings;
diff --git a/packages/editor/types.ts b/packages/editor/types.ts
index 2c468b08bc4..edfddb430f5 100644
--- a/packages/editor/types.ts
+++ b/packages/editor/types.ts
@@ -166,6 +166,8 @@ export interface EditorSettings {
 	readOnly: boolean;
 
 	indentWithTabs: boolean;
+
+	editorLabel: string;
 }
 
 export type LogMessageCallback = (message: string)=> void;
diff --git a/packages/lib/themes/light.ts b/packages/lib/themes/light.ts
index 28e39b9e8eb..f3ad8546cb7 100644
--- a/packages/lib/themes/light.ts
+++ b/packages/lib/themes/light.ts
@@ -14,7 +14,7 @@ const theme: Theme = {
 	colorCorrect: 'green', // Opposite of colorError
 	colorWarn: 'rgb(228,86,0)',
 	colorWarnUrl: '#155BDA',
-	colorFaded: '#7C8B9E', // For less important text
+	colorFaded: '#627184', // For less important text
 	dividerColor: '#dddddd',
 	selectedColor: '#e5e5e5',
 	urlColor: '#155BDA',
@@ -32,7 +32,7 @@ const theme: Theme = {
 	// It's dark text over gray background.
 	backgroundColor3: '#F4F5F6',
 	backgroundColorHover3: '#CBDAF1',
-	color3: '#738598',
+	color3: '#627284',
 
 	// Color scheme "4" is used for secondary-style buttons. It makes a white
 	// button with blue text.
diff --git a/packages/tools/cspell/dictionary4.txt b/packages/tools/cspell/dictionary4.txt
index ae72b46fda6..bfa718a009f 100644
--- a/packages/tools/cspell/dictionary4.txt
+++ b/packages/tools/cspell/dictionary4.txt
@@ -133,3 +133,4 @@ rcompare
 tabindex
 Backblaze
 treeitem
+WCAG
diff --git a/yarn.lock b/yarn.lock
index b168bb3d702..2ab3b4dd8db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1411,6 +1411,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@axe-core/playwright@npm:4.10.0":
+  version: 4.10.0
+  resolution: "@axe-core/playwright@npm:4.10.0"
+  dependencies:
+    axe-core: ~4.10.0
+  peerDependencies:
+    playwright-core: ">= 1.0.0"
+  checksum: cba9b7f625c8ed510e661d8d014f7e924fb85175b918b818cb808eec848c3e8a2cbbe2960ccf8dd4b9f84a4a4ea33eeeace48de2560a4a5777dd0ee6281d0c81
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:7.12.11":
   version: 7.12.11
   resolution: "@babel/code-frame@npm:7.12.11"
@@ -7382,6 +7393,7 @@ __metadata:
   resolution: "@joplin/app-desktop@workspace:packages/app-desktop"
   dependencies:
     7zip-bin: 5.2.0
+    "@axe-core/playwright": 4.10.0
     "@electron/notarize": 2.3.2
     "@electron/rebuild": 3.6.0
     "@electron/remote": 2.1.2
@@ -15094,6 +15106,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axe-core@npm:~4.10.0":
+  version: 4.10.1
+  resolution: "axe-core@npm:4.10.1"
+  checksum: 1e71bc4b7cdad6e99dad9e4098a174932ed69052e7400e0fb57b585fff1764cc541580db375c643755250da7d68f811ba05fe0636c31d4238aa16e3f31587869
+  languageName: node
+  linkType: hard
+
 "axios@npm:^0.25.0":
   version: 0.25.0
   resolution: "axios@npm:0.25.0"