feat(ui5-radio-button): implement accessibleNameRef property (#4511)

packages/main/src/RadioButton.js

@@ -4,6 +4,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import {
 	isSpace,
 	isEnter,
@@ -174,8 +175,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the text alternative of the component.
-		 * If not provided a default text alternative will be set, if present.
+		 * Defines the accessible name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -186,6 +186,18 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
+
 		_tabIndex: {
 			type: String,
 			defaultValue: "-1",
@@ -455,7 +467,7 @@ class RadioButton extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return [this.text, this.accessibleName].filter(Boolean).join(" ");
+		return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
 	}
 
 	get ariaDescribedBy() {

packages/main/test/pages/RadioButton.html

@@ -89,11 +89,24 @@
 		<ui5-input id="field"></ui5-input>
 	</div>
 
+	<ui5-title level="H2">accessibleName</ui5-title>
 	<div>
 		<ui5-radio-button id="rb-acc-name" accessible-name="Sample Label"></ui5-radio-button>
 		<ui5-radio-button id="rb-acc-name-text" text="Sample Text" accessible-name="Sample Label"></ui5-radio-button>
 	</div>
 
+	<ui5-title level="H2">accessibleNameRef</ui5-title>
+	<div>
+		<div class="radio-section-horizontal">
+			<ui5-label id="lbl-rb-acc-name-ref">Label for this radio button:</ui5-label>
+			<ui5-radio-button id="rb-acc-name-ref" accessible-name-ref="lbl-rb-acc-name-ref"></ui5-radio-button>
+		</div>
+		<div class="radio-section-horizontal">
+			<ui5-label id="lbl-rb-acc-name-ref-with-text">Label for this radio button:</ui5-label>
+			<ui5-radio-button id="rb-acc-name-ref-with-text" accessible-name-ref="lbl-rb-acc-name-ref-with-text" text="Sample Text"></ui5-radio-button>
+		</div>
+	</div>
+
 	<p>*Params</p>
 	<p>
 		<ui5-label>- for compact add 'ui5-content-density-compact' class to any dom element</ui5-label>

packages/main/test/pages/styles/RadioButton.css

@@ -4,6 +4,12 @@
     margin-bottom: 2rem;
 }
 
+.radio-section-horizontal {
+    display: flex;
+    align-items: center;
+    width: 400px;
+}
+
 div {
     width: 250px;
 }

packages/main/test/specs/RadioButton.spec.js

@@ -165,6 +165,21 @@ describe("RadioButton general interaction", () => {
 		const RADIOBUTTON_TEXT = "Sample Text";
 
 		assert.strictEqual(await rbAccName.getProperty("ariaLabelText"), RADIOBUTTON_LABEL, "The ariaLabelledByText includes the accessibleName.");
-		assert.strictEqual(await rbAccNameText.getProperty("ariaLabelText"), `${RADIOBUTTON_TEXT} ${RADIOBUTTON_LABEL}`, "The ariaLabelledByText includes both the text and the accessibleName.");
+		assert.strictEqual(await rbAccNameText.getProperty("ariaLabelText"), `${RADIOBUTTON_LABEL} ${RADIOBUTTON_TEXT}`, "The ariaLabelledByText includes both the text and the accessibleName.");
+	});
+
+	it("tests accessibleNameRef", async () => {
+		const labelText = await browser.$("#lbl-rb-acc-name-ref").getText();
+		const rb = await browser.$("#rb-acc-name-ref");
+
+		assert.strictEqual(await rb.getProperty("ariaLabelText"), labelText, "The ariaLabelText includes the accessibleNameRef text.");
+	});
+
+	it("tests accessibleNameRef and radio button text together", async () => {
+		const labelText = await browser.$("#lbl-rb-acc-name-ref-with-text").getText();
+		const rb = await browser.$("#rb-acc-name-ref-with-text");
+		const rbText = await rb.getProperty("text");
+
+		assert.strictEqual(await rb.getProperty("ariaLabelText"), `${labelText} ${rbText}`, "The ariaLabelText includes both the accessibleNameRef text and the radio button text.");
 	});
 });