ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 09:35:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix server group color a11y issue (#21958)

Browse Source
This commit is contained in:
Alan Ren
2023-02-15 21:21:35 -08:00
committed by GitHub
parent 48d0aa72cc
commit 8690c350d2
5 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,39 +21,40 @@ export interface ColorboxStyle {
}
export class Colorbox extends Widget {
readonly domNode: HTMLInputElement;
readonly radioButton: HTMLInputElement;
readonly colorElement: HTMLDivElement;
private labelNode: HTMLLabelElement;
private backgroundColor?: Color;
private _onSelect = new Emitter<void>();
public readonly onSelect: Event<void> = this._onSelect.event;
private _checked: boolean;
constructor(container: HTMLElement, opts: ColorboxOptions) {
super();
const colorboxContainer = DOM.$('.colorbox-container');
this.domNode = DOM.$('input');
this.domNode.type = 'radio';
this.domNode.name = opts.name;
this.domNode.id = generateUuid();
this._checked = false;
this.colorElement = DOM.$('.color-element');
const radiobuttonContainer = DOM.$('.color-selector-container');
this.radioButton = DOM.$('input');
this.radioButton.type = 'radio';
this.radioButton.name = opts.name;
this.radioButton.id = generateUuid();
this.domNode.classList.add('colorbox');
this.radioButton.classList.add('colorbox-radio');
if (opts.class) {
this.domNode.classList.add(...opts.class);
this.radioButton.classList.add(...opts.class);
}
this.domNode.setAttribute('aria-label', opts.label);
this.radioButton.setAttribute('aria-label', opts.label);
this.labelNode = DOM.$('label.colorbox-label');
this.labelNode.setAttribute('for', this.domNode.id);
this.labelNode.setAttribute('for', this.radioButton.id);
this.labelNode.innerText = opts.label;
colorboxContainer.appendChild(this.domNode);
colorboxContainer.appendChild(this.labelNode);
radiobuttonContainer.appendChild(this.radioButton);
radiobuttonContainer.appendChild(this.labelNode);
colorboxContainer.appendChild(this.colorElement);
colorboxContainer.appendChild(radiobuttonContainer);
container.appendChild(colorboxContainer);
this.onfocus(this.domNode, () => {
this.onfocus(this.radioButton, () => {
this._onSelect.fire();
});
@@ -67,23 +68,18 @@ export class Colorbox extends Widget {
}
private updateStyle(): void {
this.domNode.style.background = this.backgroundColor ? this.backgroundColor.toString() : this.domNode.style.background;
this.colorElement.style.background = this.backgroundColor ? this.backgroundColor.toString() : this.radioButton.style.background;
}
public get checked(): boolean {
return this._checked;
return this.radioButton.checked;
}
public set checked(checked: boolean) {
this._checked = checked;
if (this._checked) {
this.domNode.classList.add('checked');
} else {
this.domNode.classList.remove('checked');
}
this.radioButton.checked = checked;
}
public focus() {
this.domNode.focus();
this.radioButton.focus();
}
}

37
src/sql/base/browser/ui/colorbox/media/colorbox.css
View File

@@ -3,23 +3,32 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.colorbox {
cursor: pointer;
-webkit-appearance: none;
opacity: 0.3;
width: 100%;
}
.colorbox.checked {
opacity: 1;
}
.colorbox-container {
margin: 5px;
text-align: center;
flex: 1 1 auto;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 3px;
}
.colorbox-container .color-element {
height: 20px;
width: 50px;
border-style: solid;
border-color: white;
border-width: 1px;
}
.colorbox-radio {
margin: 0px;
}
.colorbox-label {
user-select: text;
}
.color-selector-container {
display: flex;
align-items: center;
column-gap: 3px;
}