feat(ui5-dialog): improve accessibility (#1288)

Author: fifoosid

packages/main/src/Dialog.hbs

@@ -3,7 +3,7 @@
 <span class="ui5-popup-frame" @focusin="{{_onfocusin}}">
 	<span id="{{_id}}-firstfe" tabindex="0"></span>
 	<div style="{{zindex}}" class="ui5-dialog-root-parent {{classes.dialogParent}}">
-		<div tabindex="-1" aria-labelledby="{{headerId}}" role="dialog" aria-modal="true" class="ui5-popup-root ui5-dialog-root {{classes.dialogParent}}">
+		<div tabindex="-1" aria-labelledby="{{headerAriaLabelledBy}}" role="dialog" aria-modal="true" class="ui5-popup-root ui5-dialog-root {{classes.dialogParent}}">
 			{{> header}}
 			<section class="ui5-dialog-section">
 				<div class="ui5-popup-content">

packages/main/src/Dialog.js

@@ -140,6 +140,13 @@ class Dialog extends Popup {
 	get blockLayer() {
 		return `z-index: ${this._zIndex};`;
 	}
+
+	get headerAriaLabelledBy() {
+		if (this.headerText || this.header) {
+			return `${this._id}-popup-heading`;
+		}
+		return undefined;
+	}
 }
 
 Dialog.define();

packages/main/src/Popup.hbs

@@ -2,11 +2,11 @@
 	{{#if hasHeader}}
 		<header>
 			{{#if header.length}}
-				<div role="{{role}}" class="ui5-popup-header">
+				<div id="{{_id}}-popup-heading" role="{{role}}" class="ui5-popup-header">
 					<slot name="header"></slot>
 				</div>
 			{{else}}
-				<h2 role="{{role}}" class="ui5-popup-header ui5-popup-headerText">{{headerText}}</h2>
+				<h2 id="{{_id}}-popup-heading" role="{{role}}" class="ui5-popup-header ui5-popup-headerText">{{headerText}}</h2>
 			{{/if}}
 		</header>
 	{{/if}}