Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

always render toolbar when in screen reader mode #183150

Merged
merged 4 commits into from
May 22, 2023
Merged

always render toolbar when in screen reader mode #183150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ebde1b6
fix #4156
meganrogge May 22, 2023
13dd130
always show toolbar for screen reader mode
meganrogge May 22, 2023
ebb889e
Revert "fix #4156"
meganrogge May 22, 2023
8800bc8
listen for screen reader changes
meganrogge May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/vs/workbench/contrib/chat/browser/actions/chatAccessibilityHelp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@ export function getAccessibilityHelpText(accessor: ServicesAccessor, type: 'chat
if (type === 'chat') {
content.push(descriptionForCommand('chat.action.focus', localize('workbench.action.chat.focus', 'The Focus Chat command ({0}) focuses the chat request/response list, which can be navigated with UpArrow/DownArrow.',), localize('workbench.action.chat.focusNoKb', 'The Focus Chat List command focuses the chat request/response list, which can be navigated with UpArrow/DownArrow and is currently not triggerable by a keybinding.'), keybindingService));
content.push(descriptionForCommand('workbench.action.chat.focusInput', localize('workbench.action.chat.focusInput', 'The Focus Chat Input command ({0}) focuses the input box for chat requests.'), localize('workbench.action.interactiveSession.focusInputNoKb', 'Focus Chat Input command focuses the input box for chat requests and is currently not triggerable by a keybinding.'), keybindingService));
content.push('Chat responses may contain code blocks which can be tabbed to. Use typical editor keybindings to select and copy text. To further interact with these code blocks, run the following commands:');
content.push(descriptionForCommand('workbench.action.chat.insertCodeBlock', localize('workbench.action.chat.insertCodeBlock', 'Insert Code Block ({0}) inserts the code at the current cursor location in last active editor'), localize('workbench.action.chat.insertCodeBlockNoKb', 'Insert Code Block inserts the code at the current cursor location and is currently not triggerable by a keybinding.'), keybindingService));
content.push(descriptionForCommand('workbench.action.chat.insertIntoNewFile', localize('workbench.action.chat.insertIntoNewFile', 'Insert into New File ({0}) creates a new file with the code block as its content'), localize('workbench.action.chat.insertIntoNewFileNoKb', 'Insert into New File creates a new file with the code block as its content and is currently not triggerable by a keybinding.'), keybindingService));
content.push(descriptionForCommand('workbench.action.chat.runInTerminal', localize('workbench.action.chat.runInTerminal', 'Run in Terminal ({0}) runs the code block in the terminal'), localize('workbench.action.chat.runInTerminalNoKb', 'Run in Terminal runs the code block in the terminal and is currently not triggerable by a keybinding.'), keybindingService));
} else {
content.push(localize('interactiveSession.makeRequest', "Tab once to reach the make request button, which will re-run the request."));
const regex = /^(\/fix|\/explain)/;
Expand Down
25 changes: 22 additions & 3 deletions src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import { CONTEXT_RESPONSE_HAS_PROVIDER_ID, CONTEXT_RESPONSE_VOTE } from 'vs/work
import { IChatReplyFollowup, IChatService, ISlashCommand, InteractiveSessionVoteDirection } from 'vs/workbench/contrib/chat/common/chatService';
import { IChatRequestViewModel, IChatResponseViewModel, IChatWelcomeMessageViewModel, isRequestVM, isResponseVM, isWelcomeVM } from 'vs/workbench/contrib/chat/common/chatViewModel';
import { IWordCountResult, getNWords } from 'vs/workbench/contrib/chat/common/chatWordCounter';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { AccessibilityVerbositySettingId } from 'vs/workbench/contrib/accessibility/browser/accessibilityContribution';

const $ = dom.$;
Expand Down Expand Up @@ -583,11 +584,11 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
@IContextKeyService contextKeyService: IContextKeyService,
@ILanguageService private readonly languageService: ILanguageService,
@IModelService private readonly modelService: IModelService,
@IConfigurationService private readonly _configurationService: IConfigurationService
@IConfigurationService private readonly _configurationService: IConfigurationService,
@IAccessibilityService private readonly _accessibilityService: IAccessibilityService
) {
super();
this.element = $('.interactive-result-editor-wrapper');

this.contextKeyService = this._register(contextKeyService.createScoped(this.element));
const scopedInstantiationService = instantiationService.createChild(new ServiceCollection([IContextKeyService, this.contextKeyService]));
this.toolbar = this._register(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, this.element, MenuId.ChatCodeBlock, {
Expand All @@ -596,6 +597,13 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
}
}));

this._configureForScreenReader();
this._register(this._accessibilityService.onDidChangeScreenReaderOptimized(() => this._configureForScreenReader()));
this._register(this._configurationService.onDidChangeConfiguration((e) => {
if (e.affectedKeys.has(AccessibilityVerbositySettingId.Chat)) {
this._configureForScreenReader();
}
}));
const editorElement = dom.append(this.element, $('.interactive-result-editor'));
this.editor = this._register(scopedInstantiationService.createInstance(CodeEditorWidget, editorElement, {
...getSimpleEditorOptions(),
Expand All @@ -610,7 +618,7 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
scrollbar: {
alwaysConsumeMouseWheel: false
},
ariaLabel: this._configurationService.getValue(AccessibilityVerbositySettingId.Chat) ? localize('chat.codeBlockHelp', 'Code block, to discover ways this can be interacted with, search the command palette for Chat: Insert and Chat: Run.') : localize('chat.codeBlock', 'Code block'),
ariaLabel: localize('chat.codeBlockHelp', 'Code block'),
...this.getEditorOptionsFromConfig()
}, {
isSimpleWidget: true,
Expand Down Expand Up @@ -665,6 +673,17 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
this.editor.updateOptions({ padding: { top: defaultCodeblockPadding, bottom: bottomPadding } });
}

private _configureForScreenReader(): void {
const toolbarElt = this.toolbar.getElement();
if (this._accessibilityService.isScreenReaderOptimized()) {
toolbarElt.style.display = 'block';
toolbarElt.ariaLabel = this._configurationService.getValue(AccessibilityVerbositySettingId.Chat) ? localize('chat.codeBlock.toolbarVerbose', 'Toolbar for code block which can be reached via tab') : localize('chat.codeBlock.toolbar', 'Code block toolbar');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to reset the aria label too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That probably doesn't matter since they are not in screenreader mode

} else {
toolbarElt.style.display = '';
}

}

private getEditorOptionsFromConfig(): IEditorOptions {
return {
wordWrap: this.options.configuration.resultEditor.wordWrap,
Expand Down
Loading