development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 21:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dialog role to editor find widget (#172979)

Browse source 
* Add aria role + label to dialog. Close bttn last.

* Stash current css layout changes.

* Pixel perfect layout. Update close button selector

* Uncomment line. Add localization for dialog label.

* Remove unnecessary newlines.

* Move in DOM to maintain existing focus order.

---------

Co-authored-by: Peng Lyu <penn.lv@gmail.com>
This commit is contained in:
Jacob Jaeggli 2023-06-06 12:11:35 -07:00 committed by GitHub
parent d4f29ca3f9
commit 56f11d9b49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/vs/editor/contrib/find/browser/findWidget.css
View file

@ -55,7 +55,7 @@
.monaco-editor .find-widget > .find-part,
.monaco-editor .find-widget > .replace-part {
margin: 3px 0 0 17px;
margin: 3px 25px 0 17px;
font-size: 12px;
display: flex;
}
@ -228,3 +228,10 @@
top: 1px;
left: 2px;
}
/* Close button position. */
.monaco-editor .find-widget > .button.codicon-widget-close {
position: absolute;
top: 5px;
right: 4px;
}

7
src/vs/editor/contrib/find/browser/findWidget.ts
View file

@ -59,6 +59,7 @@ export interface IFindController {
getGlobalBufferTerm(): Promise<string>;
}
const NLS_FIND_DIALOG_LABEL = nls.localize('label.findDialog', "Find / Replace");
const NLS_FIND_INPUT_LABEL = nls.localize('label.find', "Find");
const NLS_FIND_INPUT_PLACEHOLDER = nls.localize('placeholder.find', "Find");
const NLS_PREVIOUS_MATCH_BTN_LABEL = nls.localize('label.previousMatchButton', "Previous Match");
@ -1093,8 +1094,6 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL
}
}));
actionsContainer.appendChild(this._closeBtn.domNode);
// Replace input
this._replaceInput = this._register(new ContextScopedReplaceInput(null, undefined, {
label: NLS_REPLACE_INPUT_LABEL,
@ -1193,11 +1192,15 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL
this._domNode = document.createElement('div');
this._domNode.className = 'editor-widget find-widget';
this._domNode.setAttribute('aria-hidden', 'true');
this._domNode.ariaLabel = NLS_FIND_DIALOG_LABEL;
this._domNode.role = 'dialog';
// We need to set this explicitly, otherwise on IE11, the width inheritence of flex doesn't work.
this._domNode.style.width = `${FIND_WIDGET_INITIAL_WIDTH}px`;
this._domNode.appendChild(this._toggleReplaceBtn.domNode);
this._domNode.appendChild(findPart);
this._domNode.appendChild(this._closeBtn.domNode);
this._domNode.appendChild(replacePart);
this._resizeSash = new Sash(this._domNode, this, { orientation: Orientation.VERTICAL, size: 2 });