diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx
index 0064fee9f1af..1408a3d23f5c 100644
--- a/packages/main/cypress/specs/Select.cy.tsx
+++ b/packages/main/cypress/specs/Select.cy.tsx
@@ -513,6 +513,81 @@ describe("Select - Accessibility", () => {
.find(".ui5-select-label-root")
.should("contain.text", "SelectedOption – ExtraInfo");
});
+
+ it("tests accessibilityInfo getter returns correct values", () => {
+ cy.mount(
+ <>
+ Reference Label
+ {/* Basic select with selected option */}
+
+
+ {/* Select with accessibleName */}
+
+
+ {/* Select with accessibleNameRef */}
+
+
+ {/* Select with readonly and required attributes */}
+
+ >
+ );
+
+ // 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 since 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("Select Name Option 1");
+ });
+
+ // Test select with accessibleNameRef
+ cy.get("#refSelect").then(($select) => {
+ const select = $select[0] as Select;
+ const accessInfo = select.accessibilityInfo;
+
+ expect(accessInfo.description).to.equal("Reference Label Option 1");
+ });
+
+ // 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 description 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("Updated Reference Option 1");
+ });
+ });
});
describe("Select - Popover", () => {
@@ -1740,4 +1815,4 @@ describe("Select general interaction", () => {
.should("have.attr", "selected");
cy.get("[ui5-select]").should("have.prop", "value", "C");
});
-});
\ No newline at end of file
+});
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index fe7d4616cf22..d3eec24a0514 100644
--- 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,19 @@ class Select extends UI5Element implements IFormInputElement {
return ids.length ? ids.join(" ") : undefined;
}
+ get accessibilityInfo() {
+ const description = [this.ariaLabelText, this.text].filter(Boolean).join(" ");
+
+ return {
+ role: "combobox" as AriaRole,
+ type: this._ariaRoleDescription,
+ readonly: this.readonly,
+ required: this.required,
+ disabled: this.disabled,
+ description,
+ };
+ }
+
_updateAssociatedLabelsTexts() {
this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
}