Merge pull request microsoft#92019 from microsoft/isidorn/list-multi-select

isidorn · web-flow · commit 583dc037dc55 · 2020-03-05T12:56:18.000+01:00
list: improve aria-selected to be set on each selected element. Set a…
diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts
@@ -182,17 +182,17 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
 
 class FocusTrait<T> extends Trait<T> {
 
-	constructor() {
+	constructor(private isAriaSelected: (index: number) => boolean) {
 		super('focused');
 	}
 
 	renderIndex(index: number, container: HTMLElement): void {
 		super.renderIndex(index, container);
 
-		if (this.contains(index)) {
+		if (this.contains(index) || this.isAriaSelected(index)) {
 			container.setAttribute('aria-selected', 'true');
 		} else {
-			container.removeAttribute('aria-selected');
+			container.setAttribute('aria-selected', 'false');
 		}
 	}
 }
@@ -1198,8 +1198,8 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		renderers: IListRenderer<any /* TODO@joao */, any>[],
 		private _options: IListOptions<T> = DefaultOptions
 	) {
-		this.focus = new FocusTrait();
 		this.selection = new Trait('selected');
+		this.focus = new FocusTrait(this.selection.contains);
 
 		mixin(_options, defaultStyles, false);
 
@@ -1272,6 +1272,9 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		if (_options.ariaLabel) {
 			this.view.domNode.setAttribute('aria-label', localize('aria list', "{0}. Use the navigation keys to navigate.", _options.ariaLabel));
 		}
+		if (_options.multipleSelectionSupport) {
+			this.view.domNode.setAttribute('aria-multiselectable', 'true');
+		}
 	}
 
 	protected createMouseController(options: IListOptions<T>): MouseController<T> {
diff --git a/src/vs/base/parts/tree/browser/treeView.ts b/src/vs/base/parts/tree/browser/treeView.ts
@@ -218,12 +218,11 @@ export class ViewItem implements IViewItem {
 		}
 		if (this.model.hasTrait('focused')) {
 			const base64Id = strings.safeBtoa(this.model.id);
-
-			this.element.setAttribute('aria-selected', 'true');
 			this.element.setAttribute('id', base64Id);
+			this.element.setAttribute('aria-selected', 'true');
 		} else {
-			this.element.setAttribute('aria-selected', 'false');
 			this.element.removeAttribute('id');
+			this.element.setAttribute('aria-selected', 'false');
 		}
 		if (this.model.hasChildren()) {
 			this.element.setAttribute('aria-expanded', String(!!this._styles['expanded']));

Original file line number	Diff line number	Diff line change
`@@ -182,17 +182,17 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {`
`182`	`182`
`183`	`183`	`class FocusTrait<T> extends Trait<T> {`
`184`	`184`
`185`		`- constructor() {`
	`185`	`+ constructor(private isAriaSelected: (index: number) => boolean) {`
`186`	`186`	`super('focused');`
`187`	`187`	`}`
`188`	`188`
`189`	`189`	`renderIndex(index: number, container: HTMLElement): void {`
`190`	`190`	`super.renderIndex(index, container);`
`191`	`191`
`192`		`- if (this.contains(index)) {`
	`192`	`+ if (this.contains(index) \|\| this.isAriaSelected(index)) {`
`193`	`193`	`container.setAttribute('aria-selected', 'true');`
`194`	`194`	`} else {`
`195`		`- container.removeAttribute('aria-selected');`
	`195`	`+ container.setAttribute('aria-selected', 'false');`
`196`	`196`	`}`
`197`	`197`	`}`
`198`	`198`	`}`
`@@ -1198,8 +1198,8 @@ export class List<T> implements ISpliceable<T>, IDisposable {`
`1198`	`1198`	`renderers: IListRenderer<any /* TODO@joao */, any>[],`
`1199`	`1199`	`private _options: IListOptions<T> = DefaultOptions`
`1200`	`1200`	`) {`
`1201`		`- this.focus = new FocusTrait();`
`1202`	`1201`	`this.selection = new Trait('selected');`
	`1202`	`+ this.focus = new FocusTrait(this.selection.contains);`
`1203`	`1203`
`1204`	`1204`	`mixin(_options, defaultStyles, false);`
`1205`	`1205`
`@@ -1272,6 +1272,9 @@ export class List<T> implements ISpliceable<T>, IDisposable {`
`1272`	`1272`	`if (_options.ariaLabel) {`
`1273`	`1273`	`this.view.domNode.setAttribute('aria-label', localize('aria list', "{0}. Use the navigation keys to navigate.", _options.ariaLabel));`
`1274`	`1274`	`}`
	`1275`	`+ if (_options.multipleSelectionSupport) {`
	`1276`	`+ this.view.domNode.setAttribute('aria-multiselectable', 'true');`
	`1277`	`+ }`
`1275`	`1278`	`}`
`1276`	`1279`
`1277`	`1280`	`protected createMouseController(options: IListOptions<T>): MouseController<T> {`