feat(ui5-dialog): labeling of header slots is now possible (#3155)

When Dialog's header slot is used, developers now would be able to use newly added accessible-name attribute to label the dialog properly. (If the header slot is not used, the Dialog labels the internally created header as previous.)

Fixes: #2838

Author: GerganaKremenska

packages/main/src/Dialog.js

@@ -20,6 +20,9 @@ const metadata = {
 	slots: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header HTML Element.
+		 * <br><br>
+		 * <b>Note:</b> If <code>header</code> slot is provided, the labelling of the dialog is a responsibility of the application developer.
+		 * <code>accessibleName</code> should be used.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot
@@ -54,6 +57,20 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the accessible name of the dialog when <code>header</code> slot is provided.
+		 * <br><br>
+		 *
+		 * <b>Note:</b> If <code>aria-label</code> is provided, <code>accessibleName</code> will be ignored.
+
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
 		 * <br><br>
@@ -205,7 +222,22 @@ 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";
+		}
+
+		return ariaLabelledById;
+	}
+
+	get _ariaLabel() {
+		let ariaLabel;
+
+		if (this.header.length > 0 && !!this.accessibleName) {
+			ariaLabel = this.accessibleName;
+		}
+		return this.ariaLabel ? this.ariaLabel : ariaLabel;
 	}
 
 	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" accessible-name="Resizable" stretch>
 		<div slot="header">
 			<ui5-button id="header-button">focus stop</ui5-button>
+			<ui5-title id="tt" level="H2">Resizable</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="Draggable" 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,15 @@ 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");
+		const accName = "Draggable" ;
+
+		assert.strictEqual(dialog.getAttribute("accessible-name"), accName, "dialog has correct attribute set");
+		assert.strictEqual(dialog.shadow$(".ui5-popup-root").getAttribute("aria-label"), accName, "dialog has aria-label.");
+	});
 });