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

SAP · Mar 12, 2020 · ef2886b · ef2886b
1 parent 0746012
commit ef2886b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/main/src/Dialog.hbs b/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">

diff --git a/packages/main/src/Dialog.js b/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();

diff --git a/packages/main/src/Popup.hbs b/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}}