diff --git a/packages/main/cypress/specs/RadioButton.cy.tsx b/packages/main/cypress/specs/RadioButton.cy.tsx index fc3203ed7e8d..b6232f80a71f 100644 --- a/packages/main/cypress/specs/RadioButton.cy.tsx +++ b/packages/main/cypress/specs/RadioButton.cy.tsx @@ -334,7 +334,7 @@ describe("RadioButton general interaction", () => { ); cy.get("#rb-acc-name").should('have.prop', "ariaLabelText", RADIOBUTTON_LABEL); - cy.get("#rb-acc-name-text").should('have.prop', "ariaLabelText", `${RADIOBUTTON_LABEL} ${RADIOBUTTON_TEXT}`); + cy.get("#rb-acc-name-text").should('have.prop', "ariaLabelText", RADIOBUTTON_LABEL); }); it("tests accessibleNameRef", () => { @@ -357,7 +357,7 @@ describe("RadioButton general interaction", () => { ); - cy.get("#rb-acc-name-ref-with-text").should("have.prop", "ariaLabelText", `${LABEL_TEXT} ${RADIO_BUTTON_TEXT}`); + cy.get("#rb-acc-name-ref-with-text").should("have.prop", "ariaLabelText", LABEL_TEXT); }); it("tests accessibleNameRef when the radio button is wrapped by another custom element", () => { diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts index 36b06b30eed1..6ea02e02069a 100644 --- a/packages/main/src/RadioButton.ts +++ b/packages/main/src/RadioButton.ts @@ -407,7 +407,15 @@ class RadioButton extends UI5Element implements IFormInputElement { } get ariaLabelText() { - return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" "); + return getEffectiveAriaLabelText(this) || undefined; + } + + get ariaLabelledBy() { + if (!this.ariaLabelText) { + return this.text ? `${this._id}-label` : undefined; + } + + return undefined; } get effectiveAriaDescribedBy() { diff --git a/packages/main/src/RadioButtonTemplate.tsx b/packages/main/src/RadioButtonTemplate.tsx index c4d26637a4c7..b71aefb5bd01 100644 --- a/packages/main/src/RadioButtonTemplate.tsx +++ b/packages/main/src/RadioButtonTemplate.tsx @@ -12,6 +12,7 @@ export default function RadioButtonTemplate(this: RadioButton) { aria-disabled={this.effectiveAriaDisabled} aria-describedby={this.effectiveAriaDescribedBy} aria-label={this.ariaLabelText} + aria-labelledby={this.ariaLabelledBy} tabindex={this.effectiveTabIndex} onClick={this._onclick} onKeyDown={this._onkeydown}