feat(ui5-card): add ariaLabel and ariaLabelledby properties (#2127)

Author: ilhan007

packages/main/src/Card.hbs

@@ -2,6 +2,7 @@
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
 	role="region"
+	aria-label="{{ariaLebelText}}"
 	aria-labelledby="{{_id}}-desc {{_id}}-heading">
 	{{#if hasHeader}}
 		<div class="{{classes.header}}"

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/getEffectiveAriaLabelText.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -111,6 +112,31 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the aria-label attribute for the <code>ui5-card</code>
+		 *
+		 * @type {String}
+		 * @since 1.0.0-rc.9
+		 * @private
+		 * @defaultvalue ""
+		 */
+		ariaLabel: {
+			type: String,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the <code>ui5-card</code>
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.9
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -212,6 +238,10 @@ class Card extends UI5Element {
 		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
 	}
 
+	get ariaLebelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get ariaCardRoleDescription() {
 		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
 	}

packages/main/test/pages/Card.html

@@ -102,6 +102,25 @@
 	<ui5-button icon="overflow" slot="action" design="Transparent"></ui5-button>
 </ui5-card>
 
+<h3>Test ariaLabel and ariaLabelledBy</h3>
+	<ui5-card
+		id="textAreaAriaLabel"
+		heading="Linked activities (5)"
+		subheading="quick links"
+		aria-label="Hello World"
+		class="myCard">
+	</ui5-card>
+
+	<br>
+	<ui5-label id="infoText">info text</ui5-label>
+
+	<ui5-card
+		id="textAreaAriaLabelledBy"
+		aria-labelledby="infoText"
+		heading="New jobs (5)"
+		subheading="find one">
+	</ui5-card>
+
 <script>
 	card.addEventListener("ui5-headerClick", function (event) {
 		console.log(event);

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

@@ -32,4 +32,17 @@ describe("Card general interaction", () => {
 
 		assert.strictEqual(field.getProperty("value"), "3", "The events count should remain 3 as the header is not interactive.");
 	});
+
+
+	it("Tests aria-label and aria-labelledby", () => {
+		const card1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-card-root");
+		const card2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-card-root");
+		const EXPECTED_ARIA_LABEL1 = "Hello World";
+		const EXPECTED_ARIA_LABEL2 = "info text";
+
+		assert.strictEqual(card1.getAttribute("aria-label"), EXPECTED_ARIA_LABEL1,
+			"The aria-label is correctly set internally.");
+		assert.strictEqual(card2.getAttribute("aria-label"), EXPECTED_ARIA_LABEL2,
+			"The aria-label is correctly set internally.");
+	});
 });