set aria-selected on focused and selected list items

isidorn · isidorn · commit 7aca51e3d98c · 2020-03-05T12:54:30.000+01:00
diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts
@@ -180,19 +180,19 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {
 	}
 }
 
-class SelectionTrait<T> extends Trait<T> {
+class FocusTrait<T> extends Trait<T> {
 
-	constructor() {
-		super('selected');
+	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 Trait('focused');
-		this.selection = new SelectionTrait();
+		this.selection = new Trait('selected');
+		this.focus = new FocusTrait(this.selection.contains);
 
 		mixin(_options, defaultStyles, false);
 
diff --git a/src/vs/base/parts/tree/browser/treeView.ts b/src/vs/base/parts/tree/browser/treeView.ts
@@ -219,12 +219,9 @@ export class ViewItem implements IViewItem {
 		if (this.model.hasTrait('focused')) {
 			const base64Id = strings.safeBtoa(this.model.id);
 			this.element.setAttribute('id', base64Id);
-		} else {
-			this.element.removeAttribute('id');
-		}
-		if (this.model.hasTrait('selected')) {
 			this.element.setAttribute('aria-selected', 'true');
 		} else {
+			this.element.removeAttribute('id');
 			this.element.setAttribute('aria-selected', 'false');
 		}
 		if (this.model.hasChildren()) {

Original file line number	Diff line number	Diff line change
`@@ -180,19 +180,19 @@ class Trait<T> implements ISpliceable<boolean>, IDisposable {`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`
`183`		`-class SelectionTrait<T> extends Trait<T> {`
	`183`	`+class FocusTrait<T> extends Trait<T> {`
`184`	`184`
`185`		`- constructor() {`
`186`		`- super('selected');`
	`185`	`+ constructor(private isAriaSelected: (index: number) => boolean) {`
	`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 Trait('focused');`
`1202`		`- this.selection = new SelectionTrait();`
	`1201`	`+ this.selection = new Trait('selected');`
	`1202`	`+ this.focus = new FocusTrait(this.selection.contains);`
`1203`	`1203`
`1204`	`1204`	`mixin(_options, defaultStyles, false);`
`1205`	`1205`