Change:
Testing <img width="992" alt="image" src=""Here's the accessible view consuming my entire VS code window. This just looks really bad, I wonder if it should be scrollable when the content is sufficiently large
Yeah wasn't really a priority since this is a feature for screen reader users, but we can enforce a max height/width. mentioned this earlier.
Yeah that was my initial thought, but the amount of vision is a spectrum and screenreader users may still be able to identify some elements on the screen and this obscures even the larger identifiable elements like the activity bar

Discussion:
import { CodeActionController } from 'vs/editor/contrib/codeAction/browser/codeActionController'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { AccessibilityVerbositySettingId, AccessibleViewAction, AccessibleViewNextAction, AccessibleViewPreviousAction } from 'vs/workbench/contrib/accessibility/browser/accessibilityContribution'; <ins> import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; </ins> <del> const enum DEFAULT { WIDTH = 800, TOP = 3 </del> <ins> const enum DIMENSIONS { MAX_WIDTH = 600 </ins> } export interface IAccessibleContentProvider {

@IContextViewService private readonly _contextViewService: IContextViewService, @IContextKeyService private readonly _contextKeyService: IContextKeyService, @IAccessibilityService private readonly _accessibilityService: IAccessibilityService, <del> @IKeybindingService private readonly _keybindingService: IKeybindingService </del> <ins> @IKeybindingService private readonly _keybindingService: IKeybindingService, @ILayoutService private readonly _layoutService: ILayoutService </ins> ) { super(); this._accessiblityHelpIsShown = accessibilityHelpIsShown.bindTo(this._contextKeyService);

show(provider: IAccessibleContentProvider): void { const delegate: IContextViewDelegate = { <del> getAnchor: () => { return { x: (window.innerWidth / 2) - (DEFAULT.WIDTH / 2), y: DEFAULT.TOP }; }, </del> <ins> getAnchor: () => { return { x: (window.innerWidth / 2) - ((Math.min(this._layoutService.dimension.width * 0.62 /* golden cut */, DIMENSIONS.MAX_WIDTH)) / 2), y: this._layoutService.offset.quickPickTop }; }, </ins> render: (container) => { container.classList.add('accessible-view-container'); return this._render(provider, container);

})); disposableStore.add(this._editorWidget.onDidBlurEditorText(() => this._contextViewService.hideContextView())); disposableStore.add(this._editorWidget.onDidContentSizeChange(() => this._layout())); <ins> disposableStore.add(this._layoutService.onDidLayout(() => this._layout())); </ins> return disposableStore; } private _layout(): void { <del> this._editorWidget.layout({ width: DEFAULT.WIDTH, height: this._editorWidget.getContentHeight() }); </del> <ins> const dimension = this._layoutService.dimension; const maxHeight = dimension.height && dimension.height * .4; const height = Math.min(maxHeight, this._editorWidget.getContentHeight()); const width = Math.min(dimension.width * 0.62 /* golden cut */, DIMENSIONS.MAX_WIDTH); this._editorWidget.layout({ width, height }); </ins> } private async _getTextModel(resource: URI): Promise<ITextModel | null> {

color: var(--vscode-editorWidget-foreground); box-shadow: 0 2px 8px var(--vscode-widget-shadow); border: 2px solid var(--vscode-focusBorder); <ins> border-radius: 6px; margin-top: -1px; z-index: 2550; </ins> }