Merge pull request microsoft#53494 from JacksonKearl/a11y/viewlet-headings

Jackson Kearl · web-flow · commit 47e4319871ca · 2018-07-10T08:57:51.000-07:00
Use HTML headings for viewlet titles.
diff --git a/src/vs/workbench/browser/media/part.css b/src/vs/workbench/browser/media/part.css
@@ -30,9 +30,12 @@
 	padding-left: 12px;
 }
 
-.monaco-workbench > .part > .title > .title-label span {
+.monaco-workbench > .part > .title > .title-label h2 {
 	font-size: 11px;
 	cursor: default;
+	font-weight: normal;
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
 }
 
 .monaco-workbench > .part > .title > .title-label a {
diff --git a/src/vs/workbench/browser/parts/compositePart.ts b/src/vs/workbench/browser/parts/compositePart.ts
@@ -434,7 +434,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 		$(parent).div({
 			'class': 'title-label'
 		}, div => {
-			titleLabel = div.span();
+			titleLabel = div.element('h2');
 		});
 
 		const $this = this;
diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css
@@ -21,7 +21,7 @@
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before,
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label a,
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a,
-.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label span,
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label h2,
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label span {
 	cursor: pointer;
 }
diff --git a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css
@@ -12,7 +12,7 @@
 	visibility: hidden !important;
 }
 
-.monaco-workbench > .sidebar > .title > .title-label span {
+.monaco-workbench > .sidebar > .title > .title-label h2 {
 	text-transform: uppercase;
 }
 
diff --git a/src/vs/workbench/browser/parts/views/media/panelviewlet.css b/src/vs/workbench/browser/parts/views/media/panelviewlet.css
@@ -3,8 +3,12 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-panel-view .panel > .panel-header > .title {
+.monaco-panel-view .panel > .panel-header h3.title {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
+	font-size: 11px;
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
+	display: flex;
 }
diff --git a/src/vs/workbench/browser/parts/views/panelViewlet.ts b/src/vs/workbench/browser/parts/views/panelViewlet.ts
@@ -100,7 +100,7 @@ export abstract class ViewletPanel extends Panel implements IView {
 	protected renderHeader(container: HTMLElement): void {
 		this.headerContainer = container;
 
-		this.renderHeaderTitle(container);
+		this.renderHeaderTitle(container, this.title);
 
 		const actions = append(container, $('.actions'));
 		this.toolbar = new ToolBar(actions, this.contextMenuService, {
@@ -119,8 +119,8 @@ export abstract class ViewletPanel extends Panel implements IView {
 		this.updateActionsVisibility();
 	}
 
-	protected renderHeaderTitle(container: HTMLElement): void {
-		append(container, $('.title', null, this.title));
+	protected renderHeaderTitle(container: HTMLElement, title: string): void {
+		append(container, $('h3.title', null, title));
 	}
 
 	focus(): void {
diff --git a/src/vs/workbench/parts/debug/electron-browser/callStackView.ts b/src/vs/workbench/parts/debug/electron-browser/callStackView.ts
@@ -88,10 +88,10 @@ export class CallStackView extends TreeViewsViewletPanel {
 	}
 
 	protected renderHeaderTitle(container: HTMLElement): void {
-		const title = dom.append(container, $('.title.debug-call-stack-title'));
-		const name = dom.append(title, $('span'));
-		name.textContent = this.options.title;
-		this.pauseMessage = dom.append(title, $('span.pause-message'));
+		let titleContainer = dom.append(container, $('.debug-call-stack-title'));
+		super.renderHeaderTitle(titleContainer, this.options.title);
+
+		this.pauseMessage = dom.append(titleContainer, $('span.pause-message'));
 		this.pauseMessage.hidden = true;
 		this.pauseMessageLabel = dom.append(this.pauseMessage, $('span.label'));
 	}
diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsViews.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsViews.ts
@@ -71,9 +71,8 @@ export class ExtensionsListView extends ViewletPanel {
 		super({ ...(options as IViewletPanelOptions), ariaHeaderLabel: options.title }, keybindingService, contextMenuService, configurationService);
 	}
 
-	renderHeader(container: HTMLElement): void {
-		const titleDiv = append(container, $('div.title'));
-		append(titleDiv, $('span')).textContent = this.options.title;
+	renderHeaderTitle(container: HTMLElement): void {
+		super.renderHeaderTitle(container, this.options.title);
 
 		this.badgeContainer = append(container, $('.count-badge-wrapper'));
 		this.badge = new CountBadge(this.badgeContainer);
diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css
@@ -6,4 +6,9 @@
 .monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.extensions {
 	-webkit-mask: url('extensions-dark.svg') no-repeat 50% 50%;
 	-webkit-mask-size: 21px;
+}
+
+.extensions .split-view-view .panel-header .count-badge-wrapper {
+	position: absolute;
+	right: 12px;
 }
diff --git a/src/vs/workbench/parts/files/electron-browser/views/openEditorsView.ts b/src/vs/workbench/parts/files/electron-browser/views/openEditorsView.ts
@@ -176,8 +176,7 @@ export class OpenEditorsView extends ViewletPanel {
 	}
 
 	protected renderHeaderTitle(container: HTMLElement): void {
-		const title = dom.append(container, $('.title'));
-		dom.append(title, $('span', null, this.title));
+		super.renderHeaderTitle(container, this.title);
 
 		const count = dom.append(container, $('.count'));
 		this.dirtyCountElement = dom.append(count, $('.monaco-count-badge'));
diff --git a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css
@@ -51,7 +51,7 @@
 	display: none;
 }
 
-.scm-viewlet .scm-provider > .name > .type {
+.scm-viewlet .scm-provider > .type {
 	opacity: 0.7;
 	margin-left: 0.5em;
 	font-size: 0.9em;
diff --git a/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts b/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts
@@ -765,19 +765,20 @@ export class RepositoryPanel extends ViewletPanel {
 	}
 
 	protected renderHeaderTitle(container: HTMLElement): void {
-		const header = append(container, $('.title.scm-provider'));
-		const name = append(header, $('.name'));
-		const title = append(name, $('span.title'));
-		const type = append(name, $('span.type'));
+		let title: string;
+		let type: string;
 
 		if (this.repository.provider.rootUri) {
-			title.textContent = basename(this.repository.provider.rootUri.fsPath);
-			type.textContent = this.repository.provider.label;
+			title = basename(this.repository.provider.rootUri.fsPath);
+			type = this.repository.provider.label;
 		} else {
-			title.textContent = this.repository.provider.label;
-			type.textContent = '';
+			title = this.repository.provider.label;
+			type = '';
 		}
 
+		super.renderHeaderTitle(container, title);
+		addClass(container, 'scm-provider');
+		append(container, $('span.type', null, type));
 		const onContextMenu = mapEvent(stop(domEvent(container, 'contextmenu')), e => new StandardMouseEvent(e));
 		onContextMenu(this.onContextMenu, this, this.disposables);
 	}
diff --git a/test/smoke/src/areas/workbench/viewlet.ts b/test/smoke/src/areas/workbench/viewlet.ts
@@ -12,6 +12,6 @@ export abstract class Viewlet {
 	constructor(protected code: Code) { }
 
 	async waitForTitle(fn: (title: string) => boolean): Promise<void> {
-		await this.code.waitForTextContent('.monaco-workbench-container .part.sidebar > .title > .title-label > span', undefined, fn);
+		await this.code.waitForTextContent('.monaco-workbench-container .part.sidebar > .title > .title-label > h2', undefined, fn);
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -30,9 +30,12 @@`
`30`	`30`	`padding-left: 12px;`
`31`	`31`	`}`
`32`	`32`
`33`		`-.monaco-workbench > .part > .title > .title-label span {`
	`33`	`+.monaco-workbench > .part > .title > .title-label h2 {`
`34`	`34`	`font-size: 11px;`
`35`	`35`	`cursor: default;`
	`36`	`+ font-weight: normal;`
	`37`	`+ -webkit-margin-before: 0;`
	`38`	`+ -webkit-margin-after: 0;`
`36`	`39`	`}`
`37`	`40`
`38`	`41`	`.monaco-workbench > .part > .title > .title-label a {`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before,`
`22`	`22`	`.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label a,`
`23`	`23`	`.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a,`
`24`		`-.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label span,`
	`24`	`+.monaco-workbench > .part.editor > .content .editor-group-container > .title .title-label h2,`
`25`	`25`	`.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label span {`
`26`	`26`	`cursor: pointer;`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`visibility: hidden !important;`
`13`	`13`	`}`
`14`	`14`
`15`		`-.monaco-workbench > .sidebar > .title > .title-label span {`
	`15`	`+.monaco-workbench > .sidebar > .title > .title-label h2 {`
`16`	`16`	`text-transform: uppercase;`
`17`	`17`	`}`
`18`	`18`
Original file line number	Diff line number	Diff line change
`@@ -88,10 +88,10 @@ export class CallStackView extends TreeViewsViewletPanel {`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`protected renderHeaderTitle(container: HTMLElement): void {`
`91`		`- const title = dom.append(container, $('.title.debug-call-stack-title'));`
`92`		`- const name = dom.append(title, $('span'));`
`93`		`- name.textContent = this.options.title;`
`94`		`- this.pauseMessage = dom.append(title, $('span.pause-message'));`
	`91`	`+ let titleContainer = dom.append(container, $('.debug-call-stack-title'));`
	`92`	`+ super.renderHeaderTitle(titleContainer, this.options.title);`
	`93`	`+`
	`94`	`+ this.pauseMessage = dom.append(titleContainer, $('span.pause-message'));`
`95`	`95`	`this.pauseMessage.hidden = true;`
`96`	`96`	`this.pauseMessageLabel = dom.append(this.pauseMessage, $('span.label'));`
`97`	`97`	`}`
Original file line number	Diff line number	Diff line change
`@@ -176,8 +176,7 @@ export class OpenEditorsView extends ViewletPanel {`
`176`	`176`	`}`
`177`	`177`
`178`	`178`	`protected renderHeaderTitle(container: HTMLElement): void {`
`179`		`- const title = dom.append(container, $('.title'));`
`180`		`- dom.append(title, $('span', null, this.title));`
	`179`	`+ super.renderHeaderTitle(container, this.title);`
`181`	`180`
`182`	`181`	`const count = dom.append(container, $('.count'));`
`183`	`182`	`this.dirtyCountElement = dom.append(count, $('.monaco-count-badge'));`