diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 5340302f3738..3c77957ff20b 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -203,6 +203,28 @@ describe("Select - Accessibility", () => { cy.get("@select") .should("have.attr", "title", "Go home"); }); + + it("should announce the associated label when Select is focused", () => { + cy.mount( + <> + + + + ); + + cy.get('label[for="sel"]') + .invoke('text') + .then((labelText) => { + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-label-root") + .should("have.attr", "aria-label", labelText); + }); + }); }); describe("Select - Popover", () => { diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 97e8724f6200..79f342fae08c 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -17,7 +17,7 @@ import { isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js"; import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js"; -import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; +import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import "@ui5/webcomponents-icons/dist/error.js"; import "@ui5/webcomponents-icons/dist/alert.js"; @@ -966,7 +966,7 @@ class Select extends UI5Element implements IFormInputElement { } get ariaLabelText() { - return getEffectiveAriaLabelText(this); + return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this); } get shouldDisplayDefaultValueStateMessage() {