fix(ui5-popover): add header and footer to focus trapping (#1298)

Author: MapTo0

packages/main/src/Popover.hbs

@@ -1,5 +1,7 @@
 <div class="ui5-popover-root" role="dialog" aria-modal="true" aria-labelledby="ui5-popover-header" style={{styles.root}}>
 
+	<span class="first-fe" tabindex="0" @focusin={{forwardToLast}}></span>
+
 	<span class="ui5-popover-arr" style="{{styles.arrow}}"></span>
 
 	{{#if _displayHeader}}
@@ -12,13 +14,11 @@
 		{{/if}}
 	{{/if}}
 
-	<span class="first-fe" tabindex="0" @focusin={{forwardToLast}}></span>
 
 	<div class="ui5-popover-content" style={{styles.content}}>
 		<slot></slot>
 	</div>
 
-	<span class="last-fe" tabindex="0" @focusin={{forwardToFirst}}></span>
 
 	{{#if _displayFooter}}
 		{{#if footer.length }}
@@ -28,4 +28,6 @@
 		{{/if}}
 	{{/if}}
 
+	<span class="last-fe" tabindex="0" @focusin={{forwardToFirst}}></span>
+
 </div>

packages/main/test/pages/Popover.html

@@ -61,9 +61,9 @@
 	<ui5-button id="btn">Click me !</ui5-button>
 
 	<ui5-popover header-text="My Heading" id="pop" style="width: 300px" placement-type="Top">
-		<!-- <div slot="header">
-			Hello World
-		</div> -->
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
 
 		<ui5-list>
 			<ui5-li>Hello</ui5-li>
@@ -77,6 +77,8 @@
 		<ui5-button id='popbtn'>Open Popover</ui5-button>
 
 		<ui5-popover placement-type="Bottom" no-arrow id='danger'>
+
+
 			<ui5-list>
 				<ui5-li>Hello</ui5-li>
 				<ui5-li>World</ui5-li>
@@ -111,7 +113,7 @@
 		<!-- <ui5-datepicker></ui5-datepicker> -->
 
 		<div slot="footer">
-			Hello World Footer
+			<ui5-button>I am in the footer</ui5-button>
 		</div>
 	</ui5-popover>
 

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

@@ -119,4 +119,64 @@ describe("Popover general interaction", () => {
 
 		assert.ok(focusedButton.getProperty("focused"), "The button is focused.");
 	});
+
+	it("tests focus trapping using TAB", () => {
+		browser.url("http://localhost:8080/test-resources/pages/Popover.html");
+
+		const btn = $("#btn");
+		const ff = $("#first-focusable");
+
+		btn.click();
+
+		assert.ok(ff.getProperty("focused"), "The first focusable element is focused.");
+
+		// list
+		browser.keys("Tab");
+
+		assert.ok(!ff.getProperty("focused"), "The first focusable element is focused.");
+		
+		// button
+		browser.keys("Tab");
+
+		assert.ok(!ff.getProperty("focused"), "The first focusable element is focused.");
+
+		// select
+		browser.keys("Tab");
+
+		// footer button
+		browser.keys("Tab");
+
+		// goes to first focusable again
+		browser.keys("Tab");
+
+		assert.ok(ff.getProperty("focused"), "The first focusable element is focused.");
+	});
+
+	it("tests focus trapping using SHIFT TAB", () => {
+		browser.url("http://localhost:8080/test-resources/pages/Popover.html");
+
+		const btn = $("#btn");
+		const ff = $("#first-focusable");
+
+		btn.click();
+
+		assert.ok(ff.getProperty("focused"), "The first focusable element is focused.");
+
+		// footer button
+		browser.keys(["Shift", "Tab"]);
+
+		// select
+		browser.keys(["Shift", "Tab"]);
+
+		// button
+		browser.keys(["Shift", "Tab"]);
+
+		// list
+		browser.keys(["Shift", "Tab"]);
+
+		// header button
+		browser.keys(["Shift", "Tab"]);
+
+		assert.ok(ff.getProperty("focused"), "The first focusable element is focused.");
+	});
 });