diff --git a/src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts b/src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts index 56a078d38719e613c637447db4eeb278d073a73c..d88475e263cc1f33620a0bfd133749e23e4b354e 100644 --- a/src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts +++ b/src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts @@ -445,6 +445,7 @@ export class DebugEditorContribution implements IDebugEditorContribution { this.exceptionWidget = this.instantiationService.createInstance(ExceptionWidget, this.editor, exceptionInfo, debugSession); this.exceptionWidget.show({ lineNumber, column }, 0); + this.exceptionWidget.focus(); this.editor.revealLine(lineNumber); this.exceptionWidgetVisible.set(true); } diff --git a/src/vs/workbench/contrib/debug/browser/exceptionWidget.ts b/src/vs/workbench/contrib/debug/browser/exceptionWidget.ts index cd2ef11bb3072764c9cccd21fdd9e748d73f2b82..7cc8ad9d5b835791dd89a9b99fd77085a9a23ca0 100644 --- a/src/vs/workbench/contrib/debug/browser/exceptionWidget.ts +++ b/src/vs/workbench/contrib/debug/browser/exceptionWidget.ts @@ -36,7 +36,7 @@ export class ExceptionWidget extends ZoneWidget { @IThemeService themeService: IThemeService, @IInstantiationService private readonly instantiationService: IInstantiationService ) { - super(editor, { showFrame: true, showArrow: true, frameWidth: 1, className: 'exception-widget-container' }); + super(editor, { showFrame: true, showArrow: true, isAccessible: true, frameWidth: 1, className: 'exception-widget-container' }); this.applyTheme(themeService.getColorTheme()); this._disposables.add(themeService.onDidColorThemeChange(this.applyTheme.bind(this))); @@ -69,13 +69,14 @@ export class ExceptionWidget extends ZoneWidget { const fontInfo = this.editor.getOption(EditorOption.fontInfo); container.style.fontSize = `${fontInfo.fontSize}px`; container.style.lineHeight = `${fontInfo.lineHeight}px`; - + container.tabIndex = 0; const title = $('.title'); const label = $('.label'); dom.append(title, label); const actions = $('.actions'); dom.append(title, actions); label.textContent = this.exceptionInfo.id ? nls.localize('exceptionThrownWithId', 'Exception has occurred: {0}', this.exceptionInfo.id) : nls.localize('exceptionThrown', 'Exception has occurred.'); + let ariaLabel = label.textContent; const actionBar = new ActionBar(actions); actionBar.push(new Action('editor.closeExceptionWidget', nls.localize('close', "Close"), 'codicon codicon-close', true, async () => { @@ -88,6 +89,7 @@ export class ExceptionWidget extends ZoneWidget { if (this.exceptionInfo.description) { let description = $('.description'); description.textContent = this.exceptionInfo.description; + ariaLabel += ', ' + this.exceptionInfo.description; dom.append(container, description); } @@ -97,7 +99,9 @@ export class ExceptionWidget extends ZoneWidget { const linkedStackTrace = linkDetector.linkify(this.exceptionInfo.details.stackTrace, true, this.debugSession ? this.debugSession.root : undefined); stackTrace.appendChild(linkedStackTrace); dom.append(container, stackTrace); + ariaLabel += ', ' + this.exceptionInfo.details.stackTrace; } + container.setAttribute('aria-label', ariaLabel); } protected _doLayout(_heightInPixel: number | undefined, _widthInPixel: number | undefined): void { @@ -110,4 +114,9 @@ export class ExceptionWidget extends ZoneWidget { this._relayout(computedLinesNumber); } + + focus(): void { + // Focus into the container for accessibility purposes so the exception and stack trace gets read + this.container?.focus(); + } }