From e3215d2670da230b84f2a1306fbbe433cff1677f Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 24 Apr 2024 19:32:50 +0200
Subject: [PATCH] fix keyboard navigation

---
 .../search/search-modal/search-modal.element.ts       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
index 9c68c6a5d4..5bc1c8484f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
@@ -337,7 +337,12 @@ export class UmbSearchModalElement extends UmbLitElement {
 
 	#closeModal(event: MouseEvent | KeyboardEvent) {
 		if (event instanceof KeyboardEvent && event.key !== 'Enter') return;
-		this.modalContext?.reject();
+
+		requestAnimationFrame(() => {
+			// In the case where the browser has not triggered focus-visible and we keyboard navigate and press enter.
+			// It is necessary to wait one frame.
+			this.modalContext?.reject();
+		});
 	}
 
 	static styles = [
@@ -456,6 +461,10 @@ export class UmbSearchModalElement extends UmbLitElement {
 				outline-offset: -3px;
 				display: flex;
 			}
+			.search-item:hover {
+				background: var(--uui-color-surface-emphasis);
+				color: var(--uui-color-interactive-emphasis);
+			}
 			.search-item:focus {
 				outline: 2px solid var(--uui-color-interactive-emphasis);
 				border-radius: 6px;