fix(ui5-card): allow accessibleNameRef to be used (#4118)

Previously the card did not provide a way to label the static content in the component and to be announced by screen readers and adding accessibleNameRef, solves this issue.
NOTE: everything added in accessibleNameRef will be read on focusing the card

Fixes: #3681

Author: GerganaKremenska

packages/main/src/Card.js

@@ -50,7 +50,8 @@ const metadata = {
 
 		/**
 		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
-		 * <b>Note:</b> <code>accessibleName</code> should be always set.
+		 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
+		 *
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
@@ -60,6 +61,18 @@ const metadata = {
 		accessibleName: {
 			type: String,
 		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 

packages/main/test/pages/Card.html

@@ -207,6 +207,12 @@
 		<ui5-card-header slot="header" id="header4" title-text="New Internships">
 		</ui5-card-header>
 	</ui5-card>
+
+	<ui5-card id="textCardRef" accessible-name="Internships" accessible-name-ref="cont">
+		<ui5-card-header slot="header" id="header5" title-text="New Positions">
+		</ui5-card-header>
+		<div id="cont">I am the content</div>
+	</ui5-card>
 	<script>
 		function onClick(event) {
 			console.log(event);

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

@@ -95,6 +95,12 @@ describe("Card Accessibility", () => {
 		const card = await browser.$("#textCard").shadow$(".ui5-card-root");
 
 		assert.strictEqual(await card.getAttribute("aria-label"), "Card Internships",
-			"The aria-label is correctly when accessibleName is used.");
+			"The aria-label is correct when accessibleName is used.");
+	});
+	it("test accessibleNameRef", async () => {
+		const card = await browser.$("#textCardRef").shadow$(".ui5-card-root");
+
+		assert.strictEqual(await card.getAttribute("aria-label"), "Card I am the content",
+			"The aria-label is correct when accessibleNameRef is used.");
 	});
 });