Change:
New enum/select box detailed descriptions should be read by reader. Add describedby attribute handling for details provider within selectbox.
Either describedby or just
Yep, I've thought about live/alert also. By my research this does not really match the expected taxonomy for the accessibility tree, an extended description is pretty much exactly what describedby is for. That said, describedby probably will not be happy changing which will mean I will need the static set of descriptions in the Dom. Not a big deal, just another example of where nothing is straightforward. But, that's why we get paid the big bucks ... well at least you :-o ! What I really want to solve is getting rid of the multiple 'clickable' readings. I think I may have a way to avoid that which will be very important for these descriptions given the number of links.
Good point, I have no idea if pointing all of the selectbox items at the same details box will work, or if there's something we can do to order events to make it work better. Or maybe changing the 'id' of the details element for each item. I'm very curious what's causing that! Very weird.
describedby can have a list of IDs associated with it. like labeled by and most other ARIA aspects it does not like things changing underneath it, that of course is what aria-live is for but, but everything I read says use this judiciously. I think having a separate set of descriptions (modified for reader output/minimal clickable) will not be a big deal. Just as the options are static, so are the descriptions so hiding them in the select for use will not be an issue. I haven't done the definitive experiment yet but, I believe the multiple clickable issue has to do with something like this: I think the reader can find these as all clickable elements when they are descendents of a managed accessibility tree. my research has yet to determine if this is considered a bug or as designed

Discussion:
white-space: nowrap; } <ins> .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text-description { display: none; } </ins> .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control { flex: 1 1 auto; align-self: flex-start;

export interface ISelectOptionItem { optionText: string; <ins> optionDescriptionText?: string; </ins> optionDisabled: boolean; } interface ISelectListTemplateData { root: HTMLElement; optionText: HTMLElement; <ins> optionDescriptionText: HTMLElement; </ins> disposables: IDisposable[]; }

data.disposables = []; data.root = container; data.optionText = dom.append(container, $('.option-text')); <ins> data.optionDescriptionText = dom.append(container, $('.option-text-description')); </ins> return data; }

const optionDisabled = (<ISelectOptionItem>element).optionDisabled; data.optionText.textContent = optionText; <del> data.root.setAttribute('aria-label', nls.localize('selectAriaOption', "{0}", optionText)); </del> <ins> 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); } </ins> // Workaround for list labels data.root.setAttribute('aria-selected', 'true');

const element = this.options[index]; let optionDisabled: boolean; index === this.disabledOptionIndex ? optionDisabled = true : optionDisabled = false; <del> listEntries.push({ optionText: element, optionDisabled: optionDisabled }); </del> <ins> const optionDescription = this.detailsProvider ? this.detailsProvider(index) : { details: null, isMarkdown: false }; listEntries.push({ optionText: element, optionDisabled: optionDisabled, optionDescriptionText: optionDescription.details }); </ins> } this.selectList.splice(0, this.selectList.length, listEntries);

public setDetailsProvider(provider: (index: number) => { details: string, isMarkdown: boolean }): void { this.detailsProvider = provider; <ins> if (this.options) { const currentOptions = this.options; this.options = []; this.setOptions(currentOptions, this.selected, this.disabledOptionIndex); } </ins> } public focus(): void {