use aria-label for radio group (#20425)

This commit is contained in:
Alan Ren
2022-08-19 15:42:21 -07:00
committed by GitHub
parent ec215604a8
commit 45b0075353
2 changed files with 7 additions and 6 deletions

View File

@@ -8,12 +8,12 @@ import { Color } from 'vs/base/common/color';
import { Event, Emitter } from 'vs/base/common/event';
import { Widget } from 'vs/base/browser/ui/widget';
import * as DOM from 'vs/base/browser/dom';
import { generateUuid } from 'vs/base/common/uuid';
export interface ColorboxOptions {
name: string;
class?: string[];
label: string;
colorName: string;
}
export interface ColorboxStyle {
@@ -36,7 +36,7 @@ export class Colorbox extends Widget {
this.domNode = DOM.$('input');
this.domNode.type = 'radio';
this.domNode.name = opts.name;
this.domNode.id = opts.colorName;
this.domNode.id = generateUuid();
this._checked = false;
this.domNode.classList.add('colorbox');
@@ -45,8 +45,8 @@ export class Colorbox extends Widget {
}
this.domNode.setAttribute('aria-label', opts.label);
this.labelNode = DOM.$('label.colorbox-label');
this.labelNode.setAttribute('for', opts.colorName);
this.labelNode.innerText = opts.colorName;
this.labelNode.setAttribute('for', this.domNode.id);
this.labelNode.innerText = opts.label;
colorboxContainer.appendChild(this.domNode);
colorboxContainer.appendChild(this.labelNode);

View File

@@ -118,6 +118,8 @@ export class ServerGroupDialog extends Modal {
DOM.append(body, DOM.$('.dialog-label')).innerText = groupColorLabel;
this._serverGroupContainer = DOM.append(body, DOM.$('.group-color-options'));
this._serverGroupContainer.setAttribute('role', 'radiogroup');
this._serverGroupContainer.setAttribute('aria-label', groupColorLabel);
this.fillGroupColors(this._serverGroupContainer);
DOM.addStandardDisposableListener(this._serverGroupContainer, DOM.EventType.KEY_DOWN, (event: StandardKeyboardEvent) => {
@@ -193,8 +195,7 @@ export class ServerGroupDialog extends Modal {
const colorBox = new Colorbox(container, {
name: 'server-group-color',
class: ['server-group-color'],
label: localize('serverGroup.colorValue', "Group Color: {0}", color),
colorName: color
label: color
});
this._register(colorBox.onSelect((viaKeyboard) => {