Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-09-22 23:05:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Custom selectbox should add decorator label and description to aria label, and should not use aria-describedby

Browse Source 
Fix #107662
This commit is contained in:
Rob Lourens
2020-09-30 10:44:39 -07:00
parent 1463659e24
commit 9003ae2d53
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
+13 -12
View File
@@ -29,7 +29,6 @@ const SELECT_OPTION_ENTRY_TEMPLATE_ID = 'selectOption.entry.template';
interface ISelectListTemplateData {
root: HTMLElement;
text: HTMLElement;
itemDescription: HTMLElement;
decoratorRight: HTMLElement;
disposables: IDisposable[];
}
@@ -44,8 +43,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
data.root = container;
data.text = dom.append(container, $('.option-text'));
data.decoratorRight = dom.append(container, $('.option-decorator-right'));
data.itemDescription = dom.append(container, $('.option-text-description'));
data.itemDescription.classList.add('visually-hidden');
return data;
}
@@ -59,13 +56,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
data.text.textContent = text;
data.decoratorRight.innerText = (!!decoratorRight ? decoratorRight : '');
if (typeof element.description === 'string') {
const itemDescriptionId = (text.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
data.text.setAttribute('aria-describedby', itemDescriptionId);
data.itemDescription.id = itemDescriptionId;
data.itemDescription.innerText = element.description;
}
// pseudo-select disabled option
if (isDisabled) {
data.root.classList.add('option-disabled');
@@ -107,7 +97,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
private selectionDetailsPane!: HTMLElement;
private _skipLayout: boolean = false;
private _sticky: boolean = false; // for dev purposes only
private _sticky: boolean = true; // for dev purposes only
constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
@@ -705,7 +695,18 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
keyboardSupport: false,
mouseSupport: false,
accessibilityProvider: {
getAriaLabel: (element) => element.text,
getAriaLabel: element => {
let label = element.text;
if (element.decoratorRight) {
label += `. ${element.decoratorRight}`;
}
if (element.description) {
label += `. ${element.description}`;
}
return label;
},
getWidgetAriaLabel: () => localize({ key: 'selectBox', comment: ['Behave like native select dropdown element.'] }, "Select Box"),
getRole: () => 'option',
getWidgetRole: () => 'listbox'