From 931c22033db3cc8d5dff265889307ed4076ac2d3 Mon Sep 17 00:00:00 2001
From: Christopher Leidigh <cleidigh@Gmail.com>
Date: Thu, 11 Oct 2018 20:31:54 -0400
Subject: [PATCH] SelectBox: Use visually-hidden for describedby with
 VoiceOver. Fixes: #60429

---
 src/vs/base/browser/ui/selectBox/selectBoxCustom.css | 12 ++++++++++--
 src/vs/base/browser/ui/selectBox/selectBoxCustom.ts  | 10 +++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.css b/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
index 9bf02542ec4..c2f95bd9f13 100644
--- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
+++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
@@ -78,8 +78,16 @@
 	white-space: nowrap;
 }
 
-.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text-description {
-	display: none;
+/* Accepted CSS hiding technique for accessibility reader text  */
+/* https://webaim.org/techniques/css/invisiblecontent/ */
+
+.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .visually-hidden {
+		position: absolute;
+		left: -10000px;
+		top: auto;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
 }
 
 .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
index fe455555e10..af3e03e1ba7 100644
--- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
@@ -5,7 +5,6 @@
 
 import 'vs/css!./selectBoxCustom';
 
-import * as nls from 'vs/nls';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Event, Emitter, chain } from 'vs/base/common/event';
 import { KeyCode, KeyCodeUtils } from 'vs/base/common/keyCodes';
@@ -50,6 +49,7 @@ class SelectListRenderer implements IRenderer<ISelectOptionItem, ISelectListTemp
 		data.root = container;
 		data.optionText = dom.append(container, $('.option-text'));
 		data.optionDescriptionText = dom.append(container, $('.option-text-description'));
+		dom.addClass(data.optionDescriptionText, 'visually-hidden');
 
 		return data;
 	}
@@ -60,18 +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) + ',.');
 
 		if (typeof element.optionDescriptionText === 'string') {
 			const optionDescriptionId = (optionText.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
-			data.root.setAttribute('aria-describedby', optionDescriptionId);
+			data.optionText.setAttribute('aria-describedby', optionDescriptionId);
 			data.optionDescriptionText.id = optionDescriptionId;
-			data.optionDescriptionText.setAttribute('aria-label', element.optionDescriptionText);
+			data.optionDescriptionText.innerText = element.optionDescriptionText;
 		}
 
-		// Workaround for list labels
-		data.root.setAttribute('aria-selected', 'true');
-
 		// pseudo-select disabled option
 		if (optionDisabled) {
 			dom.addClass((<HTMLElement>data.root), 'option-disabled');
-- 
GitLab