From 63520761ff311a874ac805b6fae4e1da6e0a56be Mon Sep 17 00:00:00 2001
From: Christopher Leidigh <cleidigh@Gmail.com>
Date: Thu, 6 Sep 2018 19:13:00 -0400
Subject: [PATCH] SelectBox: Add aria-describedby for enum descriptions. Fixes:
 #57710 (#58129)

---
 .../browser/ui/selectBox/selectBoxCustom.css  |  4 ++++
 .../browser/ui/selectBox/selectBoxCustom.ts   | 24 +++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.css b/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
index 72901ceaaaa..9bf02542ec4 100644
--- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
+++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
@@ -78,6 +78,10 @@
 	white-space: nowrap;
 }
 
+.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text-description {
+	display: none;
+}
+
 .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
 	flex: 1 1 auto;
 	align-self: flex-start;
diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
index 4c755623956..38d320fa647 100644
--- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
@@ -27,12 +27,14 @@ const SELECT_OPTION_ENTRY_TEMPLATE_ID = 'selectOption.entry.template';
 
 export interface ISelectOptionItem {
 	optionText: string;
+	optionDescriptionText?: string;
 	optionDisabled: boolean;
 }
 
 interface ISelectListTemplateData {
 	root: HTMLElement;
 	optionText: HTMLElement;
+	optionDescriptionText: HTMLElement;
 	disposables: IDisposable[];
 }
 
@@ -47,6 +49,7 @@ class SelectListRenderer implements IRenderer<ISelectOptionItem, ISelectListTemp
 		data.disposables = [];
 		data.root = container;
 		data.optionText = dom.append(container, $('.option-text'));
+		data.optionDescriptionText = dom.append(container, $('.option-text-description'));
 
 		return data;
 	}
@@ -57,7 +60,14 @@ class SelectListRenderer implements IRenderer<ISelectOptionItem, ISelectListTemp
 		const optionDisabled = (<ISelectOptionItem>element).optionDisabled;
 
 		data.optionText.textContent = optionText;
-		data.root.setAttribute('aria-label', nls.localize('selectAriaOption', "{0}", optionText));
+		data.root.setAttribute('aria-label', nls.localize('selectAriaOption', "{0}", optionText) + ',.');
+
+		if (typeof element.optionDescriptionText === 'string') {
+			const optionDescriptionId = (optionText.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
+			data.root.setAttribute('aria-describedby', optionDescriptionId);
+			data.optionDescriptionText.id = optionDescriptionId;
+			data.optionDescriptionText.setAttribute('aria-label', element.optionDescriptionText);
+		}
 
 		// Workaround for list labels
 		data.root.setAttribute('aria-selected', 'true');
@@ -258,7 +268,9 @@ export class SelectBoxList implements ISelectBoxDelegate, IVirtualDelegate<ISele
 					const element = this.options[index];
 					let optionDisabled: boolean;
 					index === this.disabledOptionIndex ? optionDisabled = true : optionDisabled = false;
-					listEntries.push({ optionText: element, optionDisabled: optionDisabled });
+					const optionDescription = this.detailsProvider ? this.detailsProvider(index) : { details: null, isMarkdown: false };
+
+					listEntries.push({ optionText: element, optionDisabled: optionDisabled, optionDescriptionText: optionDescription.details });
 				}
 
 				this.selectList.splice(0, this.selectList.length, listEntries);
@@ -296,6 +308,14 @@ export class SelectBoxList implements ISelectBoxDelegate, IVirtualDelegate<ISele
 
 	public setDetailsProvider(provider: (index: number) => { details: string, isMarkdown: boolean }): void {
 		this.detailsProvider = provider;
+
+
+		if (this.options) {
+			const currentOptions = this.options;
+			this.options = [];
+			this.setOptions(currentOptions, this.selected, this.disabledOptionIndex);
+		}
+
 	}
 
 	public focus(): void {
-- 
GitLab