Merge branch 'main' into list-item-custom-announcements

IlianaB · web-flow · commit ac1463497fb5 · 2025-12-02T16:10:01.000+02:00
diff --git a/packages/main/cypress/specs/CheckBox.cy.tsx b/packages/main/cypress/specs/CheckBox.cy.tsx
@@ -406,12 +406,14 @@ describe("Accessibility", () => {
 			const accInfo = checkbox.accessibilityInfo;
 			
             // Description should come from accessibleName property
-			expect(accInfo.description).to.equal("Custom Aria Label");
+			expect(accInfo.description).to.equal("Accessibility Test Not checked");
+            expect(accInfo.label).to.equal("Custom Aria Label");
 			
 			expect(accInfo.readonly).to.be.true;
 			expect(accInfo.required).to.be.true;
 			expect(accInfo.disabled).to.be.false;
-			
+
+            expect(accInfo.type).to.equal("Checkbox");
 			expect(accInfo.role).to.equal("checkbox");
 		});    
 	});
@@ -432,26 +434,8 @@ describe("Accessibility", () => {
             const accInfo = checkbox.accessibilityInfo;
             
             // Description should come from associated label
-            expect(accInfo.description).to.equal("Label For Accessibility Test");
-        });    
-    });
-
-    it("should provide correct accessibilityInfo description from text", () => {
-        cy.mount(
-            <>
-                <CheckBox 
-                    id="accessibilityTestCb2" 
-                    text="Accessibility Test Text" 
-                ></CheckBox>
-            </>
-        );
-
-        cy.get("#accessibilityTestCb2").then($checkbox => {
-            const checkbox = $checkbox[0] as CheckBox;
-            const accInfo = checkbox.accessibilityInfo;
-            
-            // Description should come from text property
-            expect(accInfo.description).to.equal("Accessibility Test Text");
+            expect(accInfo.description).to.equal("Not checked");
+            expect(accInfo.label).to.equal("Label For Accessibility Test");
         });    
     });
 
@@ -470,7 +454,8 @@ describe("Accessibility", () => {
             const accInfo = checkbox.accessibilityInfo;
             
             // Description should come from associated label
-            expect(accInfo.description).to.equal("Label For Accessibility Test");
+            expect(accInfo.description).to.equal("Not checked");
+            expect(accInfo.label).to.equal("Label For Accessibility Test");
         });    
     });
 });
diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx
@@ -513,6 +513,85 @@ describe("Select - Accessibility", () => {
 			.find(".ui5-select-label-root")
 			.should("contain.text", "SelectedOption – ExtraInfo");
 	});
+
+	it("tests accessibilityInfo getter returns correct values", () => {
+		cy.mount(
+			<>
+				<span id="labelRef">Reference Label</span>
+				{/* Basic select with selected option */}
+				<Select id="basicSelect">
+					<Option value="Option1" selected>Option 1</Option>
+					<Option value="Option2">Option 2</Option>
+				</Select>
+				
+				{/* Select with accessibleName */}
+				<Select id="namedSelect" accessibleName="Select Name">
+					<Option value="Option1" selected>Option 1</Option>
+				</Select>
+				
+				{/* Select with accessibleNameRef */}
+				<Select id="refSelect" accessibleNameRef="labelRef">
+					<Option value="Option1" selected>Option 1</Option>
+				</Select>
+				
+				{/* Select with readonly and required attributes */}
+				<Select id="propsSelect" readonly required disabled>
+					<Option value="Option1" selected>Option 1</Option>
+				</Select>
+			</>
+		);
+
+		// Test basic select
+		cy.get("#basicSelect").then(($select) => {
+			const select = $select[0] as Select;
+			const accessInfo = select.accessibilityInfo;
+			
+			expect(accessInfo.role).to.equal("combobox");
+			expect(accessInfo.type).to.equal("Listbox");
+			expect(accessInfo.readonly).to.be.false;
+			expect(accessInfo.required).to.be.false;
+			expect(accessInfo.description).to.equal("Option 1"); // Just text
+			expect(accessInfo.label).to.be.undefined; // No aria-label
+		});
+
+		// Test select with accessibleName
+		cy.get("#namedSelect").then(($select) => {
+			const select = $select[0] as Select;
+			const accessInfo = select.accessibilityInfo;
+			
+			expect(accessInfo.description).to.equal("Option 1"); // Just text
+			expect(accessInfo.label).to.equal("Select Name"); // Aria label
+		});
+
+		// Test select with accessibleNameRef
+		cy.get("#refSelect").then(($select) => {
+			const select = $select[0] as Select;
+			const accessInfo = select.accessibilityInfo;
+			
+			expect(accessInfo.description).to.equal("Option 1"); // Just text
+			expect(accessInfo.label).to.equal("Reference Label"); // Aria label from ref
+		});
+
+		// Test select with readonly and required properties
+		cy.get("#propsSelect").then(($select) => {
+			const select = $select[0] as Select;
+			const accessInfo = select.accessibilityInfo;
+			
+			expect(accessInfo.readonly).to.be.true;
+			expect(accessInfo.required).to.be.true;
+			expect(accessInfo.disabled).to.be.true;
+		});
+
+		// Update the referenced label and check if the label updates
+		cy.get("#labelRef").invoke("text", "Updated Reference");
+		cy.get("#refSelect").then(($select) => {
+			const select = $select[0] as Select;
+			const accessInfo = select.accessibilityInfo;
+			
+			expect(accessInfo.description).to.equal("Option 1"); // Text remains the same
+			expect(accessInfo.label).to.equal("Updated Reference"); // Updated aria label from ref
+		});
+	});
 });
 
 describe("Select - Popover", () => {
@@ -1740,4 +1819,4 @@ describe("Select general interaction", () => {
 			.should("have.attr", "selected");
 		cy.get("[ui5-select]").should("have.prop", "value", "C");
 	});
-});
+});
diff --git a/packages/main/cypress/specs/ToolbarSelect.cy.tsx b/packages/main/cypress/specs/ToolbarSelect.cy.tsx
@@ -1,6 +1,7 @@
 import Toolbar from "../../src/Toolbar.js";
 import ToolbarSelect from "../../src/ToolbarSelect.js";
 import ToolbarSelectOption from "../../src/ToolbarSelectOption.js";
+import Button from "../../src/Button.js";
 
 describe("Toolbar general interaction", () => {
 	it("Should render the select with the correct attributes", () => {
@@ -264,10 +265,10 @@ describe("Toolbar general interaction", () => {
 		cy.mount(
 			<Toolbar id="otb_d">
 				<ToolbarSelect style="width: 201px;" id="toolbar-select">
-						<ToolbarSelectOption>1</ToolbarSelectOption>
-						<ToolbarSelectOption selected>2</ToolbarSelectOption>
-						<ToolbarSelectOption>3</ToolbarSelectOption>
-					</ToolbarSelect>
+					<ToolbarSelectOption>1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>2</ToolbarSelectOption>
+					<ToolbarSelectOption>3</ToolbarSelectOption>
+				</ToolbarSelect>
 			</Toolbar>
 		);
 		cy.viewport(220, 1080); // Set a small viewport width to trigger overflow
@@ -282,4 +283,65 @@ describe("Toolbar general interaction", () => {
 		// Verify the toolbar-select is rendered inside the popover
 		cy.get("ui5-toolbar-select").should("be.visible");
 	});
+
+	it("Should update selection when option's selected property is changed programmatically", () => {
+		cy.mount(
+			<>
+				<Toolbar>
+					<ToolbarSelect>
+						<ToolbarSelectOption>1</ToolbarSelectOption>
+						<ToolbarSelectOption id="opt2">2</ToolbarSelectOption>
+						<ToolbarSelectOption>3</ToolbarSelectOption>
+						<ToolbarSelectOption>4</ToolbarSelectOption>
+					</ToolbarSelect>
+				</Toolbar>
+				<Button id="btn">select option 2</Button>
+			</>
+		);
+
+		// Set up button click handler
+		cy.get("#btn").then($btn => {
+			$btn.get(0).addEventListener("ui5-click", () => {
+				// First, deselect all options
+				const select = document.querySelector("ui5-toolbar-select");
+				const options = select?.querySelectorAll("ui5-toolbar-select-option");
+				options?.forEach(opt => {
+					(opt as ToolbarSelectOption).selected = false;
+				});
+				// Then select option 2
+				const opt2 = document.getElementById("opt2") as ToolbarSelectOption;
+				opt2.selected = true;
+			});
+		});
+
+		// Verify initial state - first option has selected attribute
+		cy.get("[ui5-toolbar]")
+			.find("[ui5-toolbar-select]")
+			.shadow()
+			.find("[ui5-select]")
+			.find("[ui5-option]")
+			.eq(0)
+			.should("have.attr", "selected");
+
+		// Click button using realClick
+		cy.get("#btn").realClick();
+
+		// Verify option 2 now has the selected attribute
+		cy.get("[ui5-toolbar]")
+			.find("[ui5-toolbar-select]")
+			.shadow()
+			.find("[ui5-select]")
+			.find("[ui5-option]")
+			.eq(1)
+			.should("have.attr", "selected");
+
+		// Verify option 1 no longer has selected attribute
+		cy.get("[ui5-toolbar]")
+			.find("[ui5-toolbar-select]")
+			.shadow()
+			.find("[ui5-select]")
+			.find("[ui5-option]")
+			.eq(0)
+			.should("not.have.attr", "selected");
+	});
 });
diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
@@ -22,6 +22,9 @@ import {
 	VALUE_STATE_WARNING,
 	VALUE_STATE_SUCCESS,
 	FORM_CHECKABLE_REQUIRED,
+	CHECKBOX_CHECKED,
+	CHECKBOX_NOT_CHECKED,
+	CHECKBOX_ARIA_TYPE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -466,9 +469,14 @@ class CheckBox extends UI5Element implements IFormInputElement {
 	}
 
 	get accessibilityInfo() {
+		const checkboxState = this.checked ? CheckBox.i18nBundle.getText(CHECKBOX_CHECKED) : CheckBox.i18nBundle.getText(CHECKBOX_NOT_CHECKED);
+		const description = [this.text || "", checkboxState].filter(Boolean).join(" ");
+
 		return {
 			role: this.accInfo.role,
-			description: this.ariaLabelText || this.text || "",
+			type: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE),
+			description,
+			label: this.ariaLabelText,
 			disabled: !!this.accInfo.ariaDisabled,
 			readonly: !!this.accInfo.ariaReadonly,
 			required: this.accInfo.ariaRequired,
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
@@ -34,7 +34,7 @@ import "@ui5/webcomponents-icons/dist/information.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
+import type { Timeout, AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
@@ -1174,6 +1174,18 @@ class Select extends UI5Element implements IFormInputElement {
 		return ids.length ? ids.join(" ") : undefined;
 	}
 
+	get accessibilityInfo() {
+		return {
+			role: "combobox" as AriaRole,
+			type: this._ariaRoleDescription,
+			description: this.text,
+			label: this.ariaLabelText,
+			readonly: this.readonly,
+			required: this.required,
+			disabled: this.disabled,
+		};
+	}
+
 	_updateAssociatedLabelsTexts() {
 		this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
 	}
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
@@ -91,6 +91,7 @@ class ToolbarSelect extends ToolbarItem {
 	@slot({
 		"default": true,
 		type: HTMLElement,
+		invalidateOnChildChange: true,
 	})
 	options!: Array<ToolbarSelectOption>;
 
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -925,6 +925,15 @@ DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=Last X Years
 #XFLD: Text for the "Next Years" option in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=Next X Years
 
+#XACT: Text for checkbox state - checked
+CHECKBOX_CHECKED=Checked
+
+#XACT: Text for checkbox state - not checked
+CHECKBOX_NOT_CHECKED=Not checked
+
+#XACT: ARIA type for checkbox
+CHECKBOX_ARIA_TYPE=Checkbox
+
 #XFLD: Label for the value input field in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=Value for X
 
