a11y: Add opt-in setting to underline links within p elements (micros…

…oft#216842)
aaronchucarroll · Jun 21, 2024 · a3a8dd5 · a3a8dd5
1 parent 7fca5bc
commit a3a8dd5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json
@@ -854,6 +854,7 @@
 		"--z-index-run-button-container",
 		"--zoom-factor",
 		"--test-bar-width",
-		"--widget-color"
+		"--widget-color",
+		"--text-link-decoration"
 	]
 }
diff --git a/src/vs/platform/accessibility/browser/accessibilityService.ts b/src/vs/platform/accessibility/browser/accessibilityService.ts
@@ -24,6 +24,9 @@ export class AccessibilityService extends Disposable implements IAccessibilitySe
 	protected _systemMotionReduced: boolean;
 	protected readonly _onDidChangeReducedMotion = new Emitter<void>();
 
+	private _linkUnderlinesEnabled: boolean;
+	protected readonly _onDidChangeLinkUnderline = new Emitter<void>();
+
 	constructor(
 		@IContextKeyService private readonly _contextKeyService: IContextKeyService,
 		@ILayoutService private readonly _layoutService: ILayoutService,
@@ -50,7 +53,10 @@ export class AccessibilityService extends Disposable implements IAccessibilitySe
 		this._systemMotionReduced = reduceMotionMatcher.matches;
 		this._configMotionReduced = this._configurationService.getValue<'auto' | 'on' | 'off'>('workbench.reduceMotion');
 
+		this._linkUnderlinesEnabled = this._configurationService.getValue('accessibility.underlineLinks');
+
 		this.initReducedMotionListeners(reduceMotionMatcher);
+		this.initLinkUnderlineListeners();
 	}
 
 	private initReducedMotionListeners(reduceMotionMatcher: MediaQueryList) {
@@ -72,6 +78,29 @@ export class AccessibilityService extends Disposable implements IAccessibilitySe
 		this._register(this.onDidChangeReducedMotion(() => updateRootClasses()));
 	}
 
+	private initLinkUnderlineListeners() {
+		this._register(this._configurationService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration('accessibility.underlineLinks')) {
+				const linkUnderlinesEnabled = this._configurationService.getValue<boolean>('accessibility.underlineLinks');
+				this._linkUnderlinesEnabled = linkUnderlinesEnabled;
+				this._onDidChangeLinkUnderline.fire();
+			}
+		}));
+
+		const updateLinkUnderlineClasses = () => {
+			const underlineLinks = this._linkUnderlinesEnabled;
+			this._layoutService.mainContainer.classList.toggle('underline-links', underlineLinks);
+		};
+
+		updateLinkUnderlineClasses();
+
+		this._register(this.onDidChangeLinkUnderlines(() => updateLinkUnderlineClasses()));
+	}
+
+	public onDidChangeLinkUnderlines(listener: () => void) {
+		return this._onDidChangeLinkUnderline.event(listener);
+	}
+
 	get onDidChangeScreenReaderOptimized(): Event<void> {
 		return this._onDidChangeScreenReaderOptimized.event;
 	}

diff --git a/src/vs/workbench/browser/media/style.css b/src/vs/workbench/browser/media/style.css
@@ -87,6 +87,15 @@ body.web {
 	text-decoration: none;
 }
 
+
+.monaco-workbench p > a {
+	text-decoration: var(--text-link-decoration);
+}
+
+.monaco-workbench.underline-links {
+	--text-link-decoration: underline;
+}
+
 .monaco-workbench.hc-black p > a,
 .monaco-workbench.hc-light p > a {
 	text-decoration: underline !important;

diff --git a/src/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration.ts b/src/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration.ts
@@ -662,6 +662,11 @@ const configuration: IConfigurationNode = {
 				'announcement': 'never'
 			}
 		},
+		'accessibility.underlineLinks': {
+			'type': 'boolean',
+			'description': localize('accessibility.underlineLinks', "Controls whether links should be underlined in the workbench."),
+			'default': false,
+		},
 	}
 };