Skip to content

Commit 9003ae2

Browse files
committed
Custom selectbox should add decorator label and description to aria label, and should not use aria-describedby
Fix microsoft#107662
1 parent 1463659 commit 9003ae2

1 file changed

Lines changed: 13 additions & 12 deletions

File tree

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ const SELECT_OPTION_ENTRY_TEMPLATE_ID = 'selectOption.entry.template';
2929
interface ISelectListTemplateData {
3030
root: HTMLElement;
3131
text: HTMLElement;
32-
itemDescription: HTMLElement;
3332
decoratorRight: HTMLElement;
3433
disposables: IDisposable[];
3534
}
@@ -44,8 +43,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
4443
data.root = container;
4544
data.text = dom.append(container, $('.option-text'));
4645
data.decoratorRight = dom.append(container, $('.option-decorator-right'));
47-
data.itemDescription = dom.append(container, $('.option-text-description'));
48-
data.itemDescription.classList.add('visually-hidden');
4946

5047
return data;
5148
}
@@ -59,13 +56,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
5956
data.text.textContent = text;
6057
data.decoratorRight.innerText = (!!decoratorRight ? decoratorRight : '');
6158

62-
if (typeof element.description === 'string') {
63-
const itemDescriptionId = (text.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
64-
data.text.setAttribute('aria-describedby', itemDescriptionId);
65-
data.itemDescription.id = itemDescriptionId;
66-
data.itemDescription.innerText = element.description;
67-
}
68-
6959
// pseudo-select disabled option
7060
if (isDisabled) {
7161
data.root.classList.add('option-disabled');
@@ -107,7 +97,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
10797
private selectionDetailsPane!: HTMLElement;
10898
private _skipLayout: boolean = false;
10999

110-
private _sticky: boolean = false; // for dev purposes only
100+
private _sticky: boolean = true; // for dev purposes only
111101

112102
constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
113103

@@ -705,7 +695,18 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
705695
keyboardSupport: false,
706696
mouseSupport: false,
707697
accessibilityProvider: {
708-
getAriaLabel: (element) => element.text,
698+
getAriaLabel: element => {
699+
let label = element.text;
700+
if (element.decoratorRight) {
701+
label += `. ${element.decoratorRight}`;
702+
}
703+
704+
if (element.description) {
705+
label += `. ${element.description}`;
706+
}
707+
708+
return label;
709+
},
709710
getWidgetAriaLabel: () => localize({ key: 'selectBox', comment: ['Behave like native select dropdown element.'] }, "Select Box"),
710711
getRole: () => 'option',
711712
getWidgetRole: () => 'listbox'

0 commit comments

Comments
 (0)