list: improve aria-selected to be set on each selected element. Set aria-multiselectable when mutli selct is supported

isidorn · isidorn · commit 474021359517 · 2020-03-04T16:05:36.000+01:00
diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts
@@ -180,10 +180,10 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
 	}
 }
 
-class FocusTrait<T> extends Trait<T> {
+class SelectionTrait<T> extends Trait<T> {
 
 	constructor() {
-		super('focused');
+		super('selected');
 	}
 
 	renderIndex(index: number, container: HTMLElement): void {
@@ -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 Trait('focused');
+		this.selection = new SelectionTrait();
 
 		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,13 +218,15 @@ 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);
 		} else {
-			this.element.setAttribute('aria-selected', 'false');
 			this.element.removeAttribute('id');
 		}
+		if (this.model.hasTrait('selected')) {
+			this.element.setAttribute('aria-selected', 'true');
+		} else {
+			this.element.setAttribute('aria-selected', 'false');
+		}
 		if (this.model.hasChildren()) {
 			this.element.setAttribute('aria-expanded', String(!!this._styles['expanded']));
 		} else {

Original file line number	Diff line number	Diff line change
`@@ -180,10 +180,10 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`
`183`		`-class FocusTrait<T> extends Trait<T> {`
	`183`	`+class SelectionTrait<T> extends Trait<T> {`
`184`	`184`
`185`	`185`	`constructor() {`
`186`		`- super('focused');`
	`186`	`+ super('selected');`
`187`	`187`	`}`
`188`	`188`
`189`	`189`	`renderIndex(index: number, container: HTMLElement): void {`
`@@ -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`		`- this.selection = new Trait('selected');`
	`1201`	`+ this.focus = new Trait('focused');`
	`1202`	`+ this.selection = new SelectionTrait();`
`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> {`