@ui5/webcomponents 2.7.0-rc.2 → 2.8.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+
+### Bug Fixes
+
+* **ui5-avatar:** announce initials ([#10755](https://github.com/SAP/ui5-webcomponents/issues/10755)) ([a14325b](https://github.com/SAP/ui5-webcomponents/commit/a14325ba15d58ec155814edb07f1cab4c8cdf4bf))
+* **ui5-button-badge:** remove text when in attention dot mode ([#10768](https://github.com/SAP/ui5-webcomponents/issues/10768)) ([641fac8](https://github.com/SAP/ui5-webcomponents/commit/641fac8c3590da3e796164219520a75e10da5407))
+
+
+### Features
+
+* **ui5-input:** visual selection on type-ahead ([#10675](https://github.com/SAP/ui5-webcomponents/issues/10675)) ([1b2cd71](https://github.com/SAP/ui5-webcomponents/commit/1b2cd71de2a71b8296bcc2a19f152d3670c00c7b))
+
+
+
+
+
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+
+### Bug Fixes
+
+* **ui5-calendar:** add tooltips to special dates ([#10335](https://github.com/SAP/ui5-webcomponents/issues/10335)) ([b5b5a73](https://github.com/SAP/ui5-webcomponents/commit/b5b5a7397dae69e653713a361a8c9c716b92cc0a))
+* **ui5-calendar:** using the correct parameter for UTC when formatting a date ([#10713](https://github.com/SAP/ui5-webcomponents/issues/10713)) ([9ae1f63](https://github.com/SAP/ui5-webcomponents/commit/9ae1f639990a5cffe2307be303c03410a7d8f08d))
+* **ui5-file-uploder:** match focus correctly with screen readers ([#10700](https://github.com/SAP/ui5-webcomponents/issues/10700)) ([a10b91d](https://github.com/SAP/ui5-webcomponents/commit/a10b91dfc78b5c292f0248241fac538b9d81e360))
+* **ui5-menu-item:** align arrow indication color ([#10695](https://github.com/SAP/ui5-webcomponents/issues/10695)) ([bd898c0](https://github.com/SAP/ui5-webcomponents/commit/bd898c0e2199b53856d2dc648fce32944aa188a9))
+* **ui5-message-strip:** close event bubbling ([#10690](https://github.com/SAP/ui5-webcomponents/issues/10690)) ([6bbc4c5](https://github.com/SAP/ui5-webcomponents/commit/6bbc4c58462c24671ff632ed8a4d1569a419ac74))
+* **ui5-select:** improved custom value state click behavior ([#10738](https://github.com/SAP/ui5-webcomponents/issues/10738)) ([f314e4f](https://github.com/SAP/ui5-webcomponents/commit/f314e4fcb5c491da189f156bfa68b70d3c3efbd6)), closes [#10661](https://github.com/SAP/ui5-webcomponents/issues/10661)
+* **ui5-side-navigation:** apply aria-haspopup to items in overflow ([#10686](https://github.com/SAP/ui5-webcomponents/issues/10686)) ([9550875](https://github.com/SAP/ui5-webcomponents/commit/9550875d65dda77118f7644e081ebf34eedf4d2a))
+* **ui5-tokenizer:** fix token-delete event details ([#10630](https://github.com/SAP/ui5-webcomponents/issues/10630)) ([c1206ae](https://github.com/SAP/ui5-webcomponents/commit/c1206aea539f4286cc8ea428aa66988095af292b)), closes [#10612](https://github.com/SAP/ui5-webcomponents/issues/10612)
+
+
+
+
+
 # [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
 
 

package/cypress/specs/Avatar.cy.tsx

@@ -0,0 +1,18 @@
+import Avatar from "../../src/Avatar.js";
+
+describe("Accessibility", () => {
+	it("checks if initials of avatar are correctly announced", () => {
+		const INITIALS = "XS";
+
+		cy.mount(<Avatar id="interactive-avatar" initials={INITIALS} interactive></Avatar>);
+
+		// Store the expected label to compare against
+		const expectedLabel = `Avatar ${INITIALS}`;
+
+		// Check if the aria-label is correctly set
+		cy.get("#interactive-avatar")
+			.shadow()
+			.find(".ui5-avatar-root")
+			.should("have.attr", "aria-label", expectedLabel);
+	});
+});

package/cypress/specs/{Button.cy.ts → Button.cy.tsx}

@@ -1,13 +1,13 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import "../../src/ButtonBadge.js";
-import type Button from "../../src/Button.js";
-import "@ui5/webcomponents-icons/dist/download.js";
-import "@ui5/webcomponents-icons/dist/employee.js";
+import Avatar from "../../src/Avatar.js";
+import Button from "../../src/Button.js";
+import Label from "../../src/Label.js";
+import ButtonBadge from "../../src/ButtonBadge.js";
+import download from "@ui5/webcomponents-icons/dist/download.js";
+import employee from "@ui5/webcomponents-icons/dist/employee.js";
 
 describe("Button general interaction", () => {
 	it("tests button's text rendering", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon={download} design="Negative">Action Bar Button</Button>);
 
 		cy.get<Button>("[ui5-button]")
 			.shadow()
@@ -16,7 +16,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon={download} design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -41,9 +41,8 @@ describe("Button general interaction", () => {
 			.find(".ui5-button-icon")
 			.should("not.exist", "icon is not present");
 	});
-
 	it("tests button's endIon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(<Button>Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -70,7 +69,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests click event", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -92,7 +91,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests keyboard shortcuts used to prevent a click event", () => {
-		cy.mount(html`<ui5-button>Text</ui5-button>`);
+		cy.mount(<Button>Text</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -113,32 +112,33 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
+		cy.mount(<Button icon="home"></Button>);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="text"> </ui5-button>`);
+		cy.mount(<Button icon="text"> </Button>);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's slot rendering", () => {
-		cy.mount(html`
-	<ui5-button>
-		<ui5-avatar id="btnImage" size="XS">
-			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
-		</ui5-avatar>
-	</ui5-button>`);
+		cy.mount(
+			<Button>
+				<Avatar id="btnImage" size="XS">
+					<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+				</Avatar>
+			</Button>
+		);
 		cy.get("[ui5-button]")
 			.should("be.visible", "Btn image is rendered");
 	});
 
 	it("tests clicking on disabled button", () => {
-		cy.mount(html`<ui5-button disabled>Inactive</ui5-button>`);
+		cy.mount(<Button disabled>Inactive</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -170,7 +170,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button with Icon", () => {
-		cy.mount(html`<ui5-button icon="employee" disabled></ui5-button>`);
+		cy.mount(<Button icon={employee} disabled></Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -200,7 +200,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button with text icon role", () => {
-		cy.mount(html`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
+		cy.mount(<Button design="Attention" icon="message-warning">Warning</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -214,7 +214,7 @@ describe("Button general interaction", () => {
 
 describe("Accessibility", () => {
 	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+		cy.mount(<Button icon="message-information" tooltip="Go home"></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -226,7 +226,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+		cy.mount(<Button icon="download" accessibleName="Download application"></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -238,7 +238,7 @@ describe("Accessibility", () => {
 	});
 
 	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -269,7 +269,7 @@ describe("Accessibility", () => {
 	});
 
 	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+		cy.mount(<Button accessibleRole="Link"> Navigation Button </Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -281,7 +281,7 @@ describe("Accessibility", () => {
 	});
 
 	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -294,8 +294,7 @@ describe("Accessibility", () => {
 
 	it("aria-describedby properly applied on the button tag", () => {
 		const hiddenTextTypeId = "ui5-button-hiddenText-type";
-
-		cy.mount(html`<ui5-button design="Attention">Content</ui5-button>`);
+		cy.mount(<Button design="Attention">Content</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -312,8 +311,12 @@ describe("Accessibility", () => {
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
-		<ui5-label id="1download-text">Download Application</ui5-label>`);
+		cy.mount(
+			<>
+				<Button icon="download" accessibleName="Help me" accessibleNameRef="1download-text"></Button>
+				<Label id="1download-text">Download Application</Label>
+			</>
+		);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -325,7 +328,7 @@ describe("Accessibility", () => {
 	});
 
 	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button>Show Registration Dialog</ui5-button>`);
+		cy.mount(<Button>Show Registration Dialog</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -350,7 +353,7 @@ describe("Accessibility", () => {
 	});
 
 	it("setting accessible-description is applied to button tag", () => {
-		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
+		cy.mount(<Button accessibleDescription="A long description."></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -362,9 +365,11 @@ describe("Accessibility", () => {
 	});
 
 	it("button with a badge", () => {
-		cy.mount(html`<ui5-button design="Emphasized" icon="employee">Emphasized
-				<ui5-button-badge design="OverlayText" text="999+" slot="badge"></ui5-button-badge>
-			</ui5-button>`);
+		cy.mount(
+			<Button design="Emphasized" icon={employee}>Emphasized
+				<ButtonBadge design="OverlayText" text="999+" slot="badge"></ButtonBadge>
+			</Button>
+		);
 
 		cy.get("[ui5-button]")
 			.find("ui5-button-badge")

package/cypress/specs/CalendarLegend.cy.tsx

@@ -0,0 +1,77 @@
+import Calendar from "../../src/Calendar.js";
+import CalendarDate from "../../src/CalendarDate.js";
+import CalendarLegend from "../../src/CalendarLegend.js";
+import CalendarLegendItem from "../../src/CalendarLegendItem.js";
+import SpecialCalendarDate from "../../src/SpecialCalendarDate.js";
+
+const getCalendarWithLegend = () => {
+	return (
+		<Calendar id="calendar1">
+			<CalendarDate value="Mar 31, 2024"></CalendarDate>
+			<SpecialCalendarDate slot="specialDates" value="Mar 30, 2024" type="Type01"></SpecialCalendarDate>
+			<SpecialCalendarDate slot="specialDates" value="Mar 29, 2024" type="Type02"></SpecialCalendarDate>
+
+			<CalendarLegend slot="calendarLegend" id="calendarLegend">
+				<CalendarLegendItem type="Type01" text="Placeholder 01"></CalendarLegendItem>
+				<CalendarLegendItem type="Type02" text="Placeholder 02"></CalendarLegendItem>
+			</CalendarLegend>
+		</Calendar>
+	);
+};
+
+describe("Calendar Legend tests", () => {
+	it("Calendar legend hides Today and Selected, when hideToday and hideSelectedDay properties are provided", () => {
+		cy.mount(getCalendarWithLegend());
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.shadow()
+			.find(".ui5-calendar-legend-root")
+			.find("[ui5-calendar-legend-item]")
+			.should("have.length", 4);
+
+		cy.get<CalendarLegend>("#calendarLegend").invoke("prop", "hideToday", true);
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.shadow()
+			.find(".ui5-calendar-legend-root")
+			.find("[ui5-calendar-legend-item]")
+			.should("have.length", 3);
+
+		cy.get<CalendarLegend>("#calendarLegend").invoke("prop", "hideSelectedDay", true);
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.shadow()
+			.find(".ui5-calendar-legend-root")
+			.find("[ui5-calendar-legend-item]")
+			.should("have.length", 2);
+	});
+
+	it("Focusing item in the legend and then focus out, reset filtered days", () => {
+		cy.mount(getCalendarWithLegend());
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.find("ui5-calendar-legend-item[type='Type01']")
+			.realClick();
+
+		cy.get("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find("[data-ui5-special-day]")
+			.should("have.length", 1);
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.find("ui5-calendar-legend-item[type='Type01']")
+			.realClick()
+			.realClick()
+			.realPress("ArrowUp")
+			.realPress("ArrowUp");
+
+		cy.get("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find("[data-ui5-special-day]")
+			.should("have.length", 2);
+	});
+});

package/cypress/specs/Card.cy.tsx

@@ -0,0 +1,330 @@
+import Button from "../../src/Button.js";
+import Card from "../../src/Card.js";
+import CardHeader from "../../src/CardHeader.js";
+
+function CardSample() {
+	return <Card id="card">
+		<CardHeader
+			id="cardHeader"
+			slot="header"
+			additionalText="4 of 10"
+			titleText="Quick Links"
+			subtitleText="Quick links sub title"
+			interactive={true}>
+		</CardHeader>
+		<div></div>
+	</Card>;
+}
+
+function CardSample2() {
+	return <Card id="card2">
+		<CardHeader
+			id="cardHeader2"
+			slot="header"
+			additionalText="4 of 10"
+			titleText="Quick Links"
+			subtitleText="Quick Links">
+		</CardHeader>
+		<div></div>
+	</Card>;
+}
+
+describe("Card general interaction", () => {
+	it("Tests interactive header results in interactive class on the card", () => {
+		cy.mount(
+			<div>
+				<CardSample />
+				<CardSample2 />
+			</div>
+		);
+
+		// assert
+		cy.get("#cardHeader")
+			.realClick();
+		cy.get("#cardHeader").should("be.focused");
+		cy.get("#card")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.class", "ui5-card--interactive");
+
+		cy.get("#card2")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("not.have.class", "ui5-card--interactive");
+	});
+
+	it("Tests header's click event with mouse click, Enter and Space", () => {
+		cy.mount(
+			<div>
+				<CardSample />
+				<CardSample2 />
+			</div>
+		);
+
+		// interactive header
+		cy.get("#cardHeader")
+			.then($header => {
+				$header.get(0).addEventListener("click", cy.stub().as("headerClick"));
+			});
+
+		cy.get("#cardHeader")
+			.shadow()
+			.find(".ui5-card-header")
+			.realClick();
+		cy.realPress("Space");
+		cy.realPress("Enter");
+
+		cy.get("@headerClick")
+			.should("have.been.calledThrice");
+
+		// non-interactive header
+		cy.get("#cardHeader2")
+			.then($header => {
+				$header.get(0).addEventListener("click", cy.stub().as("headerClick2"));
+			});
+
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header")
+			.realClick();
+		cy.realPress("Space");
+		cy.realPress("Enter");
+
+		cy.get("@headerClick2")
+			.should("not.have.been.called");
+	});
+
+	it("Tests clicking on an action does not fire header's click event", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="cardHeader"
+					slot="header"
+					titleText="Quick Links"
+					interactive={true}
+				>
+					<Button id="actionBtn" slot="action">Act</Button>
+				</CardHeader>
+
+				<div></div>
+			</Card>
+		);
+
+		cy.get("#cardHeader").then($header => {
+			$header.get(0).addEventListener("ui5-click", cy.stub().as("headerClick"));
+		});
+
+		cy.get("#actionBtn").realClick();
+
+		// assert
+		cy.get("@headerClick").should("not.have.been.called");
+	});
+
+	it("Tests loading", () => {
+		cy.mount(
+			<Card
+				id="loadingCard"
+				loading={true}
+				loadingDelay={500}>
+				<CardHeader
+					slot="header"
+					titleText="Interactive Header">
+				</CardHeader>
+				<div></div>
+			</Card>
+		);
+
+		cy.get("#loadingCard")
+			.shadow()
+			.find("[ui5-busy-indicator]")
+			.should("have.attr", "delay", "500")
+			.and("have.attr", "active");
+	});
+});
+
+describe("Card header", () => {
+	it("Tests that aria attribute are correct on interactive header", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="cardHeader"
+					slot="header"
+					titleText="Quick Links"
+					interactive={true}
+				>
+				</CardHeader>
+			</Card>
+		);
+
+		// assert
+		cy.get("#cardHeader")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "button")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Interactive Card Header");
+	});
+
+	it("Tests that aria attribute are correct on a header", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="cardHeader"
+					slot="header"
+					titleText="Quick Links"
+				>
+				</CardHeader>
+			</Card>
+		);
+
+		// assert
+		cy.get("#cardHeader")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "group")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Card Header");
+	});
+
+	it("Tests additionalText is rendered, when action is set", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="actionCardHeader"
+					slot="header"
+					titleText="Linked Activities (5)"
+					additionalText="4 of 10">
+				</CardHeader>
+
+				<div></div>
+			</Card>
+		);
+
+		// assert
+		cy.get("#actionCardHeader")
+			.shadow()
+			.find(".ui5-card-header-additionalText")
+			.should("exist");
+	});
+});
+
+describe("Card Accessibility", () => {
+	it("Tests accessibleName", () => {
+		cy.mount(
+			<Card id="textCard" accessibleName="Internships">
+				<CardHeader
+					slot="header"
+					titleText="New Internships">
+				</CardHeader>
+			</Card>
+		);
+
+		// assert
+		cy.get("#textCard")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.attr", "aria-label", "Card Internships");
+	});
+
+	it("Tests accessibleNameRef", () => {
+		cy.mount(
+			<Card id="textCardRef" accessibleName="Internships" accessibleNameRef="cont">
+				<CardHeader
+					slot="header"
+					titleText="New Positions">
+				</CardHeader>
+				<div id="cont" class="myContent">I am the content</div>
+			</Card>
+		);
+
+		// assert
+		cy.get("#textCardRef")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.attr", "aria-label", "Card I am the content");
+	});
+
+	it("Tests aria-label", () => {
+		cy.mount(
+			<Card id="textAreaAriaLabel">
+				<CardHeader
+					slot="header"
+					titleText="Linked Activities (5)">
+				</CardHeader>
+			</Card>
+		);
+
+		// assert
+		cy.get("#textAreaAriaLabel")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.attr", "aria-label", "Card");
+	});
+
+	it("Tests ARIA attributes of the content", () => {
+		cy.mount(<CardSample />);
+
+		// assert
+		cy.get("#card")
+			.shadow()
+			.find(".ui5-card-root div:nth-child(2)")
+			.should("have.attr", "role", "group")
+			.and("have.attr", "aria-label", "Card Content");
+	});
+
+	it("Tests aria-level property", () => {
+		cy.mount(<CardSample2 />);
+
+		// assert
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header .ui5-card-header-title")
+			.should("have.attr", "aria-level", "3");
+
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header .ui5-card-header-title")
+			.invoke("attr", "aria-level", "4")
+			.should("have.attr", "aria-level", "4");
+	});
+
+	it("Tests header aria-labelledby", () => {
+		cy.mount(
+			<div>
+				<Card>
+					<CardHeader
+						slot="header"
+						id="header"
+						additionalText="4 of 10"
+						titleText="Linked Activities (5)"
+						subtitleText="Quick Links">
+					</CardHeader>
+				</Card>
+
+				<Card>
+					<CardHeader
+						slot="header"
+						id="header2"
+						titleText="New Jobs (5)"
+						subtitleText="Find One">
+					</CardHeader>
+				</Card>
+			</div>
+		);
+
+		// assert
+		cy.get("#header").invoke("prop", "_id").then(headerId => {
+			cy.get("#header")
+				.shadow()
+				.find(".ui5-card-header .ui5-card-header-focusable-element")
+				.should("have.attr", "aria-labelledby", `${headerId}-title ${headerId}-subtitle ${headerId}-additionalText`);
+		});
+
+		cy.get("#header2").invoke("prop", "_id").then(headerId2 => {
+			cy.get("#header2")
+				.shadow()
+				.find(".ui5-card-header .ui5-card-header-focusable-element")
+				.should("have.attr", "aria-labelledby", `${headerId2}-title ${headerId2}-subtitle`);
+		});
+	});
+});