fix(ui5-card): correct aria-labelledBy to card and header (#2577)

Now the aria-labelledBy of card and header contain only the rendered elements.

Fixes: #2426

Author: GerganaKremenska

packages/main/src/Card.hbs

@@ -3,20 +3,20 @@
 	dir="{{effectiveDir}}"
 	role="region"
 	aria-label="{{ariaLabelText}}"
-	aria-labelledby="{{_id}}-desc {{_id}}-heading">
+	aria-labelledby="{{ariaLabelledByCard}}">
 	{{#if hasHeader}}
 		<div class="{{classes.header}}"
 			@click="{{_headerClick}}"
 			@keydown="{{_headerKeydown}}"
 			@keyup="{{_headerKeyup}}"
 			role="{{ariaHeaderRole}}"
-			aria-labelledby="{{_id}}-subheading {{_id}}-status"
+			aria-labelledby="{{ariaLabelledByHeader}}"
 			aria-level="{{ariaLevel}}"
 			aria-roledescription="{{ariaCardHeaderRoleDescription}}"
 			tabindex="0">
 
 			{{#if hasAvatar}}
-				<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
+				<div id="{{_id}}-avatar" class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
 					<slot name="avatar"></slot>
 				</div>
 			{{/if}}

packages/main/src/Card.js

@@ -258,6 +258,28 @@ class Card extends UI5Element {
 		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
+	get ariaLabelledByHeader() {
+		const labels = [];
+
+		if (this.subheading) {
+			labels.push(`${this._id}-subheading`);
+		}
+
+		if (this.status) {
+			labels.push(`${this._id}-status`);
+		}
+
+		if (this.hasAvatar) {
+			labels.push(`${this._id}-avatar`);
+		}
+
+		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

@@ -49,7 +49,7 @@
 	</ui5-list>
 </ui5-card>
 
-<ui5-card heading="Quick Links" subheading="quick links">
+<ui5-card id="card3" heading="Quick Links" subheading="quick links">
 	<ui5-list id="myList3" separators="Inner">
 		<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
 		<ui5-li icon="opportunity" >Segmentation Models</ui5-li>

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

@@ -33,7 +33,7 @@ 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", () => {
+	it("Tests aria-label", () => {
 		const card1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-card-root");
 		const card2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-card-root");
 		const EXPECTED_ARIA_LABEL1 = "Hello World";
@@ -44,4 +44,26 @@ describe("Card general interaction", () => {
 		assert.strictEqual(card2.getAttribute("aria-label"), EXPECTED_ARIA_LABEL2,
 			"The aria-label is correctly set internally.");
 	});
+
+	it("Tests internal aria-labelledby labeling", () => {
+		const card1 = $("#card2").shadow$(".ui5-card-root");
+		const card1Id = $("#card2").getProperty("_id");
+		const header = $("#card2").shadow$(".ui5-card-header");
+		const card2 = $("#card3").shadow$(".ui5-card-root");
+		const card2Id = $("#card3").getProperty("_id");
+		const header2 = $("#card3").shadow$(".ui5-card-header");
+		const EXPECTED_ARIA_LABELLEDBY_CARD = `${card1Id}-heading ${card1Id}-desc`;
+		const EXPECTED_ARIA_LABELLEDBY_HEADER = `${card1Id}-subheading ${card1Id}-status ${card1Id}-avatar`;
+		const EXPECTED_ARIA_LABELLEDBY_CARD2 = `${card2Id}-heading ${card2Id}-desc`;
+		const EXPECTED_ARIA_LABELLEDBY_HEADER2 = `${card2Id}-subheading`;
+
+		assert.strictEqual(card1.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_CARD,
+			"The aria-labelledby of card is correctly set internally.");
+		assert.strictEqual(header.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_HEADER,
+			"The aria-labelledby is correctly set internally.");
+		assert.strictEqual(card2.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_CARD2,
+			"The aria-labelledby of card is correctly set internally.");
+		assert.strictEqual(header2.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_HEADER2,
+			"The aria-labelledby is correctly set internally.");
+	});
 });