mirror of
https://github.com/Microsoft/vscode
synced 2024-10-01 08:50:48 +00:00
a11y: Add opt-in setting to underline links within p elements (#216842)
This commit is contained in:
parent
7fca5bc172
commit
a3a8dd5b01
|
@ -854,6 +854,7 @@
|
|||
"--z-index-run-button-container",
|
||||
"--zoom-factor",
|
||||
"--test-bar-width",
|
||||
"--widget-color"
|
||||
"--widget-color",
|
||||
"--text-link-decoration"
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue