From 9003ae2d5355cefc6348fac8efd391b00a46024d Mon Sep 17 00:00:00 2001
From: Rob Lourens <roblourens@gmail.com>
Date: Wed, 30 Sep 2020 10:40:24 -0700
Subject: [PATCH] Custom selectbox should add decorator label and description
 to aria label, and should not use aria-describedby Fix #107662

---
 .../browser/ui/selectBox/selectBoxCustom.ts   | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
index b9b99af5342..c2395b8d6f7 100644
--- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
@@ -29,7 +29,6 @@ const SELECT_OPTION_ENTRY_TEMPLATE_ID = 'selectOption.entry.template';
 interface ISelectListTemplateData {
 	root: HTMLElement;
 	text: HTMLElement;
-	itemDescription: HTMLElement;
 	decoratorRight: HTMLElement;
 	disposables: IDisposable[];
 }
@@ -44,8 +43,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
 		data.root = container;
 		data.text = dom.append(container, $('.option-text'));
 		data.decoratorRight = dom.append(container, $('.option-decorator-right'));
-		data.itemDescription = dom.append(container, $('.option-text-description'));
-		data.itemDescription.classList.add('visually-hidden');
 
 		return data;
 	}
@@ -59,13 +56,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
 		data.text.textContent = text;
 		data.decoratorRight.innerText = (!!decoratorRight ? decoratorRight : '');
 
-		if (typeof element.description === 'string') {
-			const itemDescriptionId = (text.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
-			data.text.setAttribute('aria-describedby', itemDescriptionId);
-			data.itemDescription.id = itemDescriptionId;
-			data.itemDescription.innerText = element.description;
-		}
-
 		// pseudo-select disabled option
 		if (isDisabled) {
 			data.root.classList.add('option-disabled');
@@ -107,7 +97,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 	private selectionDetailsPane!: HTMLElement;
 	private _skipLayout: boolean = false;
 
-	private _sticky: boolean = false; // for dev purposes only
+	private _sticky: boolean = true; // for dev purposes only
 
 	constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
 
@@ -705,7 +695,18 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 			keyboardSupport: false,
 			mouseSupport: false,
 			accessibilityProvider: {
-				getAriaLabel: (element) => element.text,
+				getAriaLabel: element => {
+					let label = element.text;
+					if (element.decoratorRight) {
+						label += `. ${element.decoratorRight}`;
+					}
+
+					if (element.description) {
+						label += `. ${element.description}`;
+					}
+
+					return label;
+				},
 				getWidgetAriaLabel: () => localize({ key: 'selectBox', comment: ['Behave like native select dropdown element.'] }, "Select Box"),
 				getRole: () => 'option',
 				getWidgetRole: () => 'listbox'