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

Author: dimovpetar

packages/main/src/Popover.js

@@ -685,17 +685,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.js

@@ -266,6 +266,8 @@ class Popup extends UI5Element {
 
 		if (firstFocusable) {
 			firstFocusable.focus();
+		} else {
+			this._root.focus();
 		}
 	}
 
@@ -278,6 +280,8 @@ class Popup extends UI5Element {
 
 		if (lastFocusable) {
 			lastFocusable.focus();
+		} else {
+			this._root.focus();
 		}
 	}
 
@@ -299,7 +303,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();
@@ -486,6 +491,10 @@ class Popup extends UI5Element {
 		return this.ariaLabel || undefined;
 	}
 
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-popup-root");
+	}
+
 	get dir() {
 		return getRTL() ? "rtl" : "ltr";
 	}
@@ -502,8 +511,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

@@ -505,4 +505,4 @@
 	</script>
 </body>
 
-</html>
+</html>