From 83fdef5f7690f36842f41d473a92cfd1a0446997 Mon Sep 17 00:00:00 2001
From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com>
Date: Wed, 22 Dec 2021 13:59:05 +0200
Subject: [PATCH] feat(ui5-radio-button): implement accessibleNameRef property
 (#4511)

---
 packages/main/src/RadioButton.js               | 18 +++++++++++++++---
 packages/main/test/pages/RadioButton.html      | 13 +++++++++++++
 .../main/test/pages/styles/RadioButton.css     |  6 ++++++
 packages/main/test/specs/RadioButton.spec.js   | 17 ++++++++++++++++-
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
index 253606377ae7..76338fc71862 100644
--- a/packages/main/src/RadioButton.js
+++ b/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() {
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
index e4c3a6405237..32e52a7bfcb6 100644
--- a/packages/main/test/pages/RadioButton.html
+++ b/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>
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
index 487666d1b59f..b9baec75ea3e 100644
--- a/packages/main/test/pages/styles/RadioButton.css
+++ b/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;
 }
diff --git a/packages/main/test/specs/RadioButton.spec.js b/packages/main/test/specs/RadioButton.spec.js
index 8b62a298c06f..c709843c1ed7 100644
--- a/packages/main/test/specs/RadioButton.spec.js
+++ b/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.");
 	});
 });