From efebd681b6333377eb318f156c83c1382812e786 Mon Sep 17 00:00:00 2001
From: Charles Gagnon <chgagnon@microsoft.com>
Date: Thu, 7 Nov 2019 09:32:02 -0800
Subject: [PATCH] Add level to dialog titles and form component titles (#8233)

* Add level to dialog titles and form component titles

* Switch to h1

* h2 instead of role and aria-level
---
 .../browser/modelComponents/formContainer.component.ts   | 9 ++++-----
 .../services/dialog/browser/dialogContainer.component.ts | 2 +-
 .../services/dialog/browser/media/dialogModal.css        | 7 +++++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/sql/workbench/browser/modelComponents/formContainer.component.ts b/src/sql/workbench/browser/modelComponents/formContainer.component.ts
index 7b3b4cb47b..faa1512d19 100644
--- a/src/sql/workbench/browser/modelComponents/formContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/formContainer.component.ts
@@ -44,12 +44,11 @@ class FormItem {
 				</div>
 			</div>
 			<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
-
 					<ng-container *ngIf="isHorizontal(item)">
-						<div *ngIf="hasItemTitle(item)" class="form-cell form-cell-title" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
+						<h2 *ngIf="hasItemTitle(item)" class="form-cell form-cell-title" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
 							{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
 							<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
-						</div>
+						</h2>
 						<div class="form-cell">
 							<div class="form-component-container">
 								<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
@@ -66,10 +65,10 @@ class FormItem {
 						</div>
 					</ng-container>
 					<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
-						<div class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
+						<h2 class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
 							{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
 							<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
-						</div>
+						</h2>
 						<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
 							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
 							</model-component-wrapper>
diff --git a/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts b/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
index ccbcfe9aa6..187a820500 100644
--- a/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
+++ b/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
@@ -28,7 +28,7 @@ export interface DialogComponentParams extends IBootstrapParams {
 	template: `
 		<div class="dialogContainer" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
 			<div class="dialogModal-wizardHeader" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
-				<div *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">Step {{_dialogPane.pageNumber}}</div>
+				<h1 *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">Step {{_dialogPane.pageNumber}}</h1>
 				<h1 class="wizardPageTitle" role="alert">{{_dialogPane.title}}</h1>
 				<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
 			</div>
diff --git a/src/sql/workbench/services/dialog/browser/media/dialogModal.css b/src/sql/workbench/services/dialog/browser/media/dialogModal.css
index 8d4b9b5b7b..2281a1ca27 100644
--- a/src/sql/workbench/services/dialog/browser/media/dialogModal.css
+++ b/src/sql/workbench/services/dialog/browser/media/dialogModal.css
@@ -71,6 +71,13 @@
 	font-weight: bold;
 }
 
+.dialogContainer .dialogModal-wizardHeader h1.wizardPageNumber {
+	margin-block-start: 0px;
+	margin-block-end: 0px;
+	font-weight: normal;
+	font-size: 11px;
+}
+
 .dialogContainer {
 	display: flex;
 	flex-direction: column;