fix(ui5-responsive-popover): fix dialog initial focus (#8774)

* fix(ui5-responsive-popover): fix dialog initial focus * add test
SAP · Apr 17, 2024 · 27b522f · 27b522f
1 parent 867dec2
commit 27b522f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -5,7 +5,8 @@
 		accessible-name-ref={{accessibleNameRef}}
 		accessible-role={{accessibleRole}}
 		stretch
-		_disable-initial-focus
+		?_disable-initial-focus="{{_disableInitialFocus}}"
+		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
 		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"

diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -17,10 +17,11 @@
 	<ui5-button id="btnOpen2" design="Negative">Open me</ui5-button> <br/>
 	<ui5-button id="btnOpen3" design="Negative">Header/Footer hidden on Desktop</ui5-button> <br/>
 	<ui5-button id="btnOpen4" >accessibleName</ui5-button>
+
 	<ui5-button id="btnOpenWithAttr">Open with Attribute</ui5-button>
 
 	<!-- with header and footer slots -->
-	<ui5-responsive-popover id="respPopover">
+	<ui5-responsive-popover initial-focus="emailInput" id="respPopover">
 		<div id="respPopoverHeader" slot="header">
 			<ui5-title>Hello World</ui5-title>
 		</div>
@@ -38,8 +39,8 @@
 	<!-- with header-text and footer slot-->
 	<ui5-responsive-popover id="respPopover2" header-text="Newsletter subscription for very long period of time">
 		<div class="popover-content">
-			<ui5-label for="emailInput" required>Email: </ui5-label>
-			<ui5-input id="emailInput" class="samples-margin-top responsivepopover3auto"  placeholder="Enter Email"></ui5-input>
+			<ui5-label for="emailInput2" required>Email: </ui5-label>
+			<ui5-input id="emailInput2" class="samples-margin-top responsivepopover3auto"  placeholder="Enter Email"></ui5-input>
 		</div>
 
 		<div slot="footer" class="popover-footer">
@@ -54,8 +55,8 @@
 		</div>
 
 		<div class="popover-content">
-			<ui5-label for="emailInput" required>Email: </ui5-label>
-			<ui5-input id="emailInput" class="samples-margin-top responsivepopover3auto"  placeholder="Enter Email"></ui5-input>
+			<ui5-label for="emailInput3" required>Email: </ui5-label>
+			<ui5-input id="emailInput3" class="samples-margin-top responsivepopover3auto"  placeholder="Enter Email"></ui5-input>
 		</div>
 
 		<div slot="footer" class="popover-footer">
@@ -76,7 +77,8 @@
 		</div>
 	</ui5-responsive-popover>
 
-	<ui5-responsive-popover id="popoverAttr" opener="btnOpenWithAttr">
+	<ui5-responsive-popover initial-focus="myInput" id="popoverAttr" opener="btnOpenWithAttr">
+		<ui5-input id="myInput"></ui5-input>
 		<ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
 		<ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
 	</ui5-responsive-popover>

diff --git a/packages/main/test/specs/ResponsivePopover.mobile.spec.js b/packages/main/test/specs/ResponsivePopover.mobile.spec.js
@@ -41,4 +41,11 @@ describe("Acc", () => {
 		assert.notOk(await respPopoverNoneRole.shadow$("[ui5-dialog]").shadow$(".ui5-popup-root").getAttribute("role"), "role is not set.");
 		assert.notOk(await respPopoverNoneRole.shadow$("[ui5-dialog]").shadow$(".ui5-popup-root").getAttribute("aria-modal"), "aria-modal not set.");
 	});
+
+	it("tests initial focus", async () => {
+		await browser.$("#btnOpen").click();
+
+		assert.ok(await browser.$("#emailInput").isFocused(), "focus is correct.");
+		await browser.keys("Escape");
+	});
 });