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); }