ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

use aria-label for radio group (#20425)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/sql/base/browser/ui/colorbox/colorbox.ts
View File

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

5
src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
View File

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