introduce labeling for header slot in Dialog

Author: GerganaKremenska

packages/main/src/Dialog.js

@@ -54,6 +54,21 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the aria-labelledBy of the dialog when <code>header</code> slot is provided.
+		 * <br><br>
+		 * <b>Note:</b> If <code>header</code> slot is provided, the <code>accessibleNameId</code> should be provided by the developer.
+		 * <b>Note:</b> Do not use  <code>accessibleNameId</code> if there is a shadow boundary,
+		 * referencing IDs inside the component is impossible. In this case use <code>ariaLabel</code>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		accessibleNameId: {
+			type: String,
+		},
+
 		/**
 		 * Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
 		 * <br><br>
@@ -205,7 +220,14 @@ class Dialog extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return (this.ariaLabel || this.header.length) ? undefined : "ui5-popup-header-text";
+		let ariaLabelledById;
+
+		if (this.headerText !== "" && !this.ariaLabel) {
+			ariaLabelledById = "ui5-popup-header-text";
+		} else if (this.accessibleNameId.length !== 0) {
+			ariaLabelledById = this.accessibleNameId;
+		}
+		return ariaLabelledById;
 	}
 
 	get _ariaModal() { // Required by Popup.js

packages/main/test/pages/Dialog.html

@@ -114,13 +114,15 @@
 	</ui5-dialog>
 
 
-	<ui5-dialog id="dialog" stretch>
+	<ui5-dialog id="dialog" aria-label="Hello UI5!" stretch>
 		<div slot="header">
 			<ui5-button id="header-button">focus stop</ui5-button>
+			<ui5-title level="H2">Hello UI5!</ui5-title>
+
 		</div>
 
 		<div style="padding: 1rem;text-align: center;">
-			<ui5-title level="H2">Hello World!</ui5-title>
+			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
 
 		<ui5-select id="mySelect">
@@ -132,7 +134,7 @@
 		</ui5-textarea>
 
 		<div style="padding: 1rem;text-align: center;">
-			<ui5-title level="H2">Hello World!</ui5-title>
+			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
 
 		<ui5-select>
@@ -144,7 +146,7 @@
 		</ui5-textarea>
 
 		<div style="padding: 1rem;text-align: center;">
-			<ui5-title level="H2">Hello World!</ui5-title>
+			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
 
 		<ui5-select>
@@ -157,7 +159,7 @@
 
 
 		<div style="padding: 1rem;text-align: center;">
-			<ui5-title level="H2">Hello World!</ui5-title>
+			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
 
 		<ui5-select>
@@ -183,7 +185,7 @@
 
 
 		<div style="padding: 1rem;text-align: center;">
-			<ui5-title level="H2">Hello World!</ui5-title>
+			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
 
 		<ui5-select>
@@ -196,7 +198,7 @@
 
 
 		<div style="padding: 1rem;text-align: center;">
-			<ui5-title level="H2">Hello World!</ui5-title>
+			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
 
 		<ui5-select>
@@ -271,8 +273,8 @@
 		</div>
 	</ui5-dialog>
 
-	<ui5-dialog id="draggable-dialog" draggable>
-		<div slot="header" style="flex: 1 0 0; height: 2.5rem;">Draggable dialog</div>
+	<ui5-dialog id="draggable-dialog" accessible-name-id="tlt" draggable>
+		<div id="tlt" slot="header"  style="flex: 1 0 0; height: 2.5rem;">Draggable dialog</div>
 
 		<p>Move this dialog around the screen by dragging it by its header.</p>
 		<p>This feature available only on Desktop.</p>
@@ -430,4 +432,4 @@
 	</script>
 </body>
 
-</html>
+</html>

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

@@ -159,4 +159,14 @@ describe("Acc", () => {
 		assert.ok(!dialog.shadow$(".ui5-popup-root").getAttribute("aria-labelledby"), "dialog does not have aria-labelledby.");
 		assert.ok(dialog.shadow$(".ui5-popup-root").getAttribute("aria-label").length, "dialog has aria-label.");
 	});
+
+	it("tests aria-labelledby for slot header", () => {
+		const openDraggableDialog = browser.$("#draggable-open");
+		openDraggableDialog.click();
+
+		const dialog = browser.$("#draggable-dialog");
+
+		assert.strictEqual(dialog.getAttribute("accessible-name-id"), "tlt", "dialog has correct attribute set");
+		assert.strictEqual(dialog.shadow$(".ui5-popup-root").getAttribute("aria-labelledby"), "tlt", "dialog has aria-labelledby.");
+	});
 });