fix server group color a11y issue (#21958)

src/sql/base/browser/ui/colorbox/colorbox.ts

@@ -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.colorElement = DOM.$('.color-element');
-		this.domNode.type = 'radio';
+		const radiobuttonContainer = DOM.$('.color-selector-container');
-		this.domNode.name = opts.name;
+		this.radioButton = DOM.$('input');
-		this.domNode.id = generateUuid();
+		this.radioButton.type = 'radio';
-		this._checked = false;
+		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);
+		radiobuttonContainer.appendChild(this.radioButton);
-		colorboxContainer.appendChild(this.labelNode);
+		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;
+		this.radioButton.checked = checked;
-		if (this._checked) {
-			this.domNode.classList.add('checked');
-		} else {
-			this.domNode.classList.remove('checked');
-		}
 	}
 
 	public focus() {
-		this.domNode.focus();
+		this.radioButton.focus();
 	}
 }

src/sql/base/browser/ui/colorbox/media/colorbox.css

@@ -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;
+	flex: 0 0 auto;
-	text-align: center;
+	display: flex;
-	flex: 1 1 auto;
+	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;
+}

src/sql/workbench/contrib/objectExplorer/common/serverGroup.contribution.ts

@@ -26,8 +26,8 @@ const serverGroupConfig: IConfigurationNode = {
 				'#A1634D',
 				'#7F0000',
 				'#914576',
-				'#85AE72',
+				'#6E9B59',
-				'#98AFC7',
+				'#5F82A5',
 				'#4452A6',
 				'#6A6599',
 				DefaultServerGroupColor

src/sql/workbench/services/serverGroup/browser/media/serverGroupDialog.css

@@ -5,12 +5,10 @@
 
 .group-color-options {
 	display: flex;
+	flex-wrap: wrap;
 	width: 100%;
-}
+	row-gap: 10px;
-
+	column-gap: 15px;
-.group-color-options .server-group-color {
-	height: 20px;
-	margin: 0px;
 }
 
 .server-group-dialog {

src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts

@@ -138,7 +138,7 @@ export class ServerGroupDialog extends Modal {
 	private focusNextColor(moveRight: boolean): void {
 		let focusIndex: number = -1;
 		for (let i = 0; i < this._colorColorBoxesMap.length; i++) {
-			if (document.activeElement === this._colorColorBoxesMap[i].colorbox.domNode) {
+			if (document.activeElement === this._colorColorBoxesMap[i].colorbox.radioButton) {
 				focusIndex = i;
 				break;
 			}
@@ -194,7 +194,6 @@ export class ServerGroupDialog extends Modal {
 
 			const colorBox = new Colorbox(container, {
 				name: 'server-group-color',
-				class: ['server-group-color'],
 				label: color
 			});