diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.css b/src/vs/base/browser/ui/selectBox/selectBoxCustom.css index 9bf02542ec44416a28150201980cada45f066d1d..c2f95bd9f13d324b67014dcd1ab45dd1e2249720 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 fe455555e109aedca2a716d4a1ddaa11cea13ed8..af3e03e1ba7ce12c318701a4a3822a7b051d138f 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 IRendererelement).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((data.root), 'option-disabled');