Skip to content
76 changes: 75 additions & 1 deletion packages/main/cypress/specs/Select.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -513,6 +513,80 @@ 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>
<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 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;
});

// 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", () => {
Expand Down Expand Up @@ -1740,4 +1814,4 @@ describe("Select general interaction", () => {
.should("have.attr", "selected");
cy.get("[ui5-select]").should("have.prop", "value", "C");
});
});
});
16 changes: 15 additions & 1 deletion packages/main/src/Select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -1174,6 +1174,20 @@ class Select extends UI5Element implements IFormInputElement {
return ids.length ? ids.join(" ") : undefined;
}

get accessibilityInfo() {
const description = this.ariaLabelText
? `${this.ariaLabelText}${this.text ? ` ${this.text}` : ""}`
: this.text || "";

return {
role: "combobox" as AriaRole,
type: "listbox",
readonly: this.readonly,
required: this.required,
description,
};
}

_updateAssociatedLabelsTexts() {
this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
}
Expand Down
Loading