fix(ui5-popup): correct focus when there is no focusable content (#2583)

Author: dimovpetar

packages/main/src/Dialog.js

@@ -203,17 +203,6 @@ class Dialog extends Popup {
 		return "flex";
 	}
 
-	get classes() {
-		return {
-			root: {
-				"ui5-popup-root": true,
-			},
-			content: {
-				"ui5-popup-content": true,
-			},
-		};
-	}
-
 	show() {
 		super.show();
 		this._center();

packages/main/src/Popover.js

@@ -655,17 +655,6 @@ class Popover extends Popup {
 		};
 	}
 
-	get classes() {
-		return {
-			root: {
-				"ui5-popup-root": true,
-			},
-			content: {
-				"ui5-popup-content": true,
-			},
-		};
-	}
-
 	/**
 	 * Hook for descendants to hide header.
 	 */

packages/main/src/Popup.hbs

@@ -6,6 +6,8 @@
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"
 	dir="{{dir}}"
+	tabindex="-1"
+	@keydown={{_onkeydown}}
 >
 
 	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>

packages/main/src/Popup.js

@@ -3,6 +3,7 @@ import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
+import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "./popup-utils/PopupUtils.js";
@@ -242,6 +243,12 @@ class Popup extends UI5Element {
 		});
 	}
 
+	_onkeydown(e) {
+		if (e.target === this._root && isTabPrevious(e)) {
+			e.preventDefault();
+		}
+	}
+
 	/**
 	 * Focus trapping
 	 * @private
@@ -251,6 +258,8 @@ class Popup extends UI5Element {
 
 		if (firstFocusable) {
 			firstFocusable.focus();
+		} else {
+			this._root.focus();
 		}
 	}
 
@@ -263,6 +272,8 @@ class Popup extends UI5Element {
 
 		if (lastFocusable) {
 			lastFocusable.focus();
+		} else {
+			this._root.focus();
 		}
 	}
 
@@ -284,7 +295,8 @@ class Popup extends UI5Element {
 
 		const element = this.getRootNode().getElementById(this.initialFocus)
 			|| document.getElementById(this.initialFocus)
-			|| await getFirstFocusableElement(this);
+			|| await getFirstFocusableElement(this)
+			|| this._root; // in case of no focusable content focus the root
 
 		if (element) {
 			element.focus();
@@ -468,6 +480,10 @@ class Popup extends UI5Element {
 		return this.ariaLabel || undefined;
 	}
 
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-popup-root");
+	}
+
 	get dir() {
 		return getRTL() ? "rtl" : "ltr";
 	}
@@ -484,8 +500,12 @@ class Popup extends UI5Element {
 
 	get classes() {
 		return {
-			root: {},
-			content: {},
+			root: {
+				"ui5-popup-root": true,
+			},
+			content: {
+				"ui5-popup-content": true,
+			},
 		};
 	}
 }

packages/main/src/themes/PopupsCommon.css

@@ -20,6 +20,7 @@
     overflow: hidden;
     max-height: 94vh;
     max-width: 90vw;
+    outline: none;
 }
 
 @media screen and (-ms-high-contrast: active) {

packages/main/test/pages/Popover.html

@@ -371,6 +371,12 @@
 	<br>
 	<br>
 
+	<ui5-button id="firstBtn">First button</ui5-button>
+	<ui5-button id="secondBtn">Second button</ui5-button>
+	<ui5-popover id="popNoFocusableContent" placement-type="Bottom">Sample text for the ui5-popover</ui5-popover>
+
+	<br>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.openBy(btn);
@@ -451,6 +457,16 @@
 		btnOpenXRight.addEventListener("click", function (event) {
 			popXRight.openBy(targetOpener2);
 		});
+
+		firstBtn.addEventListener("click", (event) => {
+			popNoFocusableContent.innerHTML = "First button is clicked";
+			popNoFocusableContent.openBy(event.target);
+		});
+
+		secondBtn.addEventListener("click", (event) => {
+			popNoFocusableContent.innerHTML = "Second button is clicked";
+			popNoFocusableContent.openBy(event.target);
+		});
 	</script>
 </body>
 

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

@@ -231,6 +231,25 @@ describe("Popover general interaction", () => {
 
 		assert.ok(ff.getProperty("focused"), "The first focusable element is focused.");
 	});
+
+	it("tests focus when there is no focusable content", () => {
+		browser.url("http://localhost:8080/test-resources/pages/Popover.html");
+
+		const firstBtn = $("#firstBtn");
+		const popoverId = "popNoFocusableContent";
+
+		firstBtn.click();
+
+		let activeElementId = $(browser.getActiveElement()).getAttribute("id");
+
+		assert.strictEqual(activeElementId, popoverId, "Popover is focused");
+
+		browser.keys(["Shift", "Tab"]);
+
+		activeElementId = $(browser.getActiveElement()).getAttribute("id");
+
+		assert.ok(activeElementId, popoverId, "Popover remains focused");
+	});
 });
 
 describe("Acc", () => {