feat(ui5-card): introduce accessibleName property (#4021)

Author: GerganaKremenska

packages/main/src/Card.hbs

@@ -2,7 +2,7 @@
 	class="{{classes}}"
 	dir="{{effectiveDir}}"
 	role="region"
-	aria-labelledby="{{_id}}-desc">
+	aria-label="{{_getAriaLabel}}">
 	{{#if _hasHeader}}
 		<div class="ui5-card-header-root">
 			<slot name="header"></slot>
@@ -11,5 +11,4 @@
 	<div role="group" aria-label="{{_ariaCardContentLabel}}">
 		<slot></slot>
 	</div>
-	<span id="{{_id}}-desc" class="ui5-hidden-text">{{_ariaCardRoleDescription}}</span>
 </div>

packages/main/src/Card.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
@@ -47,6 +48,18 @@ const metadata = {
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
+		/**
+		 * 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,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -116,8 +129,10 @@ class Card extends UI5Element {
 		return !!this.header.length;
 	}
 
-	get _ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
+	get _getAriaLabel() {
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
 	get _ariaCardContentLabel() {

packages/main/test/pages/Card.html

@@ -203,6 +203,10 @@
 		</ui5-list>
 	</ui5-card>
 
+	<ui5-card id="textCard" accessible-name="Internships">
+		<ui5-card-header slot="header" id="header4" title-text="New Internships">
+		</ui5-card-header>
+	</ui5-card>
 	<script>
 		function onClick(event) {
 			console.log(event);

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

@@ -41,12 +41,10 @@ describe("Card general interaction", () => {
 		assert.strictEqual(await field.getProperty("value"), "3", "The events count should remain 3 as the header is not interactive.");
 	});
 
-	it("tests aria-labelledby", async () => {
+	it("tests aria-label", async () => {
 		const card = await browser.$("#textAreaAriaLabel").shadow$(".ui5-card-root");
-		const cardId = await browser.$("#textAreaAriaLabel").getProperty("_id");
-		const EXPECTED_ARIA_LABELLEDBY_CARD = `${cardId}-desc`;
 
-		assert.strictEqual(await card.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_CARD,
+		assert.strictEqual(await card.getAttribute("aria-label"), "Card",
 			"The aria-labelledby of card is correctly set.");
 	})
 
@@ -86,6 +84,17 @@ describe("CardHeader", () => {
 			"The aria-labelledby is correctly set.");
 		assert.strictEqual(await header2.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_HEADER2,
 			"The aria-labelledby is correctly set.");
-	})
+	});
+});
+describe("Card Accessibility", () => {
+	before(async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/Card.html`);
+	});
 
+	it("test accessibleName", async () => {
+		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.");
+	});
 });