SelectBox: Use visually-hidden for describedby with VoiceOver. Fixes: microsoft#60429

cleidigh · web-flow · commit 931c22033db3 · 2018-10-11T20:31:54.000-04:00
diff --git 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
@@ -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');
