feat(ui5-color-picker): add screenreader announcement on color mode change

packages/main/cypress/specs/ColorPicker.cy.tsx

@@ -380,4 +380,41 @@ describe("Color Picker accessibility tests", () => {
 			.find(".ui5-color-picker-alpha-slider")
 			.should("have.attr", "accessible-name", ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER));
 	});
+
+	it("should return correct colorFieldsAnnouncementText for RGB and HSL modes", () => {
+		cy.mount(<ColorPicker value="rgb(255, 0, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		// Test RGB mode announcement text
+		cy.get<ColorPicker>("@colorPicker")
+			.then($item => {
+				const colorPicker = $item.get(0);
+				const announcementText = colorPicker.colorFieldsAnnouncementText;
+				expect(announcementText).to.include("RGB");
+				expect(announcementText).to.include("Red 255");
+				expect(announcementText).to.include("Green 0");
+				expect(announcementText).to.include("Blue 0");
+				expect(announcementText).to.include("Alpha 1");
+			});
+
+		// Toggle to HSL mode
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		// Test HSL mode announcement text
+		cy.get<ColorPicker>("@colorPicker")
+			.then($item => {
+				const colorPicker = $item.get(0);
+				const announcementText = colorPicker.colorFieldsAnnouncementText;
+				expect(announcementText).to.include("HSL");
+				expect(announcementText).to.include("Hue 0");
+				expect(announcementText).to.include("Saturation 100");
+				expect(announcementText).to.include("Light 50");
+				expect(announcementText).to.include("Alpha 1");
+			});
+	});
+
+
 });

packages/main/src/ColorPicker.ts

@@ -20,6 +20,8 @@ import type {
 import "@ui5/webcomponents-icons/dist/expand.js";
 import ColorValue from "./colorpicker-utils/ColorValue.js";
 import ColorPickerTemplate from "./ColorPickerTemplate.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import type Input from "./Input.js";
 import type Slider from "./Slider.js";
 
@@ -37,6 +39,8 @@ import {
 	COLORPICKER_LIGHT,
 	COLORPICKER_HUE,
 	COLORPICKER_TOGGLE_MODE_TOOLTIP,
+	COLORPICKER_PERCENTAGE,
+	COLORPICKER_COLOR_MODE_CHANGED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -359,6 +363,9 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 
 	_togglePickerMode() {
 		this._displayHSL = !this._displayHSL;
+
+		// Announce a message to screen readers
+		announce(this.colorFieldsAnnouncementText, InvisibleMessageMode.Polite);
 	}
 
 	_handleColorInputChange(e: Event) {
@@ -581,6 +588,34 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);
 	}
 
+	get percentageLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_PERCENTAGE);
+	}
+
+	get colorFieldsAnnouncementText() {
+		const sMode = this._displayHSL ? "HSL" : "RGB";
+		let sText = "";
+
+		switch (sMode) {
+		case "RGB":
+			sText = `${this.redInputLabel} ${this._colorValue.R}, `
+				+ `${this.greenInputLabel} ${this._colorValue.G}, `
+				+ `${this.blueInputLabel} ${this._colorValue.B}, `
+				+ `${this.alphaInputLabel} ${this._colorValue.Alpha}`;
+			break;
+		case "HSL":
+			sText = `${this.hueInputLabel} ${this._colorValue.H}, `
+				+ `${this.saturationInputLabel} ${this._colorValue.S} ${this.percentageLabel}, `
+				+ `${this.lightInputLabel} ${this._colorValue.L} ${this.percentageLabel}, `
+				+ `${this.alphaInputLabel} ${this._colorValue.Alpha}`;
+			break;
+		default:
+			break;
+		}
+
+		return ColorPicker.i18nBundle.getText(COLORPICKER_COLOR_MODE_CHANGED, sMode, sText);
+	}
+
 	get toggleModeTooltip() {
 		return ColorPicker.i18nBundle.getText(COLORPICKER_TOGGLE_MODE_TOOLTIP);
 	}

packages/main/src/i18n/messagebundle.properties

@@ -193,6 +193,12 @@ COLORPICKER_TOGGLE_MODE_TOOLTIP=Change Color Mode
 #XTOL: Alpha chanel transparency value for RGBA color mode
 COLORPICKER_ALPHA=Alpha
 
+#XACT: Text which indicates that the value of an input is in percent.
+COLORPICKER_PERCENTAGE=%
+
+#XACT: Text which indicates that the color mode is changed.
+COLORPICKER_COLOR_MODE_CHANGED=Color mode changed to {0}. Current values: {1}.
+
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker