Add dialog role to editor find widget (microsoft#172979)

* 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 <[email protected]>

Author: jjaeggli

src/vs/editor/contrib/find/browser/findWidget.css

@@ -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;
+}

src/vs/editor/contrib/find/browser/findWidget.ts

@@ -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 });