Change:
Repro: Alt+F1 ! If should be in the center as that's the most obvious location Version: 1.80.0-insider (user setup) Commit: Date: 2023-06-28T08:01:04.380Z Electron: 22.3.14 ElectronBuildId: Chromium: 108.0.5359.215 16.17.1 V8: 10.8.168.25-electron.0 OS: Windows_NT x64 10.0.
Putting it here makes the most sense to me because that's where we put other components - like the quick pick. I want to get feedback from low vision users
That's fine, but if you're styling like the command palette we should position it in a similar way ! So below the title bar and not quite and maybe a little less wide
Re , we should also size the height similar to quick pick
But shouldn't the height be determined by the contents?
yes, but have a similar height cap to the quick pick
We should also use the same font as the quick pick
I think you've convinced me - this should be in the center.
Personally I preferred the top position, I'd just render it as the quick pick: Same position and same style. VS Code does not have many vertically centered dialogs. If you want to make it vertically centered, I'd suggest to align it with other vertically centered dialogs, like the trust dialog (notice the background shadow): ! ! Generally, I think, if there is no particular reason to be different, we should try to have a consistent UI throughout the entire product. I'm still in favor of the top position, as the workspace trust dialog is the only vertically centered dialog I know of and it is strongly modal (you have to click one of the buttons to make it disappear). FYI
Fading the background like the trust dialog is good imo, I like centered as it's a very special mode and it's modal as in clicking outside will always dismiss it, unlike the quick pick which may not dismiss when clicking outside. In the end the visual appearance isn't that important really, I just want it to be very obvious when the accessible view is up.
I agree that we should try to align with existing design. My personal preference is to have it positioned like the quick pick. But in the end, it is not super important as pointed out.
One issue with doing it as the quick pick is it would look wrong being so narrow, and making is narrow would make it less accessible, say if a low vision user was using it.
Not sure it needs to be as narrow as quick pick. I just think the positioning of the quick pick is fitting. So the top and center. It could be wider or longer.
Now that we have the focus border, it is more obvious, so fine to be at the top IMO.
This is still not fixed imo, it should follow quick pick and look like this (native title bar): ! Not this (custom title bar): !
Verified off main :+1:

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> }