feat(ui5-card): add "accessibleName"

Author: ilhan007

packages/main/src/Card.hbs

@@ -2,8 +2,7 @@
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
 	role="region"
-	aria-label="{{ariaLabelText}}"
-	aria-labelledby="{{ariaLabelledByCard}}">
+	aria-label="{{ariaLabelText}}">
 	{{#if hasHeader}}
 		<div class="{{classes.header}}"
 			@click="{{_headerClick}}"
@@ -42,5 +41,4 @@
 	<section role="group" aria-label="{{ariaCardContentLabel}}">
 		<slot></slot>
 	</section>
-	<span id="{{_id}}-desc" class="ui5-hidden-text">{{ariaCardRoleDescription}}</span>
 </div>

packages/main/src/Card.js

@@ -66,6 +66,19 @@ const metadata = {
 		action: {
 			type: HTMLElement,
 		},
+
+		/**
+		 * 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.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -255,12 +268,39 @@ class Card extends UI5Element {
 		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
 	}
 
+	getEffectiveAriaLabelText(el) {
+		if (!el.accessibleNameRef) {
+			if (el.accessibleName) {
+				return el.accessibleName;
+			}
+	
+			return undefined;
+		}
+	
+		return this.getAriaLabelledByTexts(el);
+	};
+
+	getAriaLabelledByTexts(el, ownerDocument, readyIds = "") {
+		const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
+		const owner = ownerDocument || findNodeOwner(el);
+		let result = "";
+	
+		ids.forEach((elementId, index) => {
+			const element = owner.querySelector(`[id='${elementId}']`);
+			result += `${element ? element.textContent : ""}`;
+	
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		});
+	
+		return result;
+	};
+	
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
-	get ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
 	get ariaCardHeaderRoleDescription() {
@@ -293,10 +333,6 @@ class Card extends UI5Element {
 		return labels.length !== 0 ? labels.join(" ") : undefined;
 	}
 
-	get ariaLabelledByCard() {
-		return this.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`;
-	}
-
 	get hasAvatar() {
 		return !!this.avatar.length;
 	}

packages/main/test/pages/Card.html

@@ -107,7 +107,7 @@ <h3>Test ariaLabel and ariaLabelledBy</h3>
 		id="textAreaAriaLabel"
 		heading="Linked activities (5)"
 		subheading="quick links"
-		aria-label="Hello World"
+		accessible-name="Hello World"
 		class="myCard">
 	</ui5-card>