From 55cac5eda04897423b7980e99ef0c378e749a124 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 27 May 2024 14:46:45 +0200
Subject: [PATCH] add navigation tips

---
 .../search-modal/search-modal.element.ts      | 63 ++++++++++++++++++-
 1 file changed, 62 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 eccd95f917..085e1edc23 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
@@ -284,7 +284,7 @@ export class UmbSearchModalElement extends UmbLitElement {
 			${this.#renderSearchTags()}
 			${this._search
 				? html`<div id="main">${this._searchResults.length > 0 ? this.#renderResults() : this.#renderNoResults()}</div>`
-				: nothing}
+				: this.#renderNavigationTips()}
 		`;
 	}
 
@@ -340,6 +340,44 @@ export class UmbSearchModalElement extends UmbLitElement {
 		return this._loading ? nothing : html`<div id="no-results">${this.localize.term('general_searchNoResult')}</div>`;
 	}
 
+	#renderNavigationTips() {
+		return html`<div id="navigation-tips">
+			<div class="navigation-tips-key" style="grid-column: span 2;">Tab</div>
+			<span>Navigate search providers</span>
+			<div class="navigation-tips-key">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round">
+					<path d="m5 12 7-7 7 7" />
+					<path d="M12 19V5" />
+				</svg>
+			</div>
+			<div class="navigation-tips-key">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round">
+					<path d="M12 5v14" />
+					<path d="m19 12-7 7-7-7" />
+				</svg>
+			</div>
+			<span>Navigate search results</span>
+		</div>`;
+	}
+
 	static styles = [
 		UmbTextStyles,
 		css`
@@ -355,6 +393,29 @@ export class UmbSearchModalElement extends UmbLitElement {
 				font-size: 1rem;
 				padding-bottom: var(--uui-size-space-2);
 			}
+			#navigation-tips {
+				display: grid;
+				grid-template-columns: 50px 50px auto;
+				column-gap: var(--uui-size-space-3);
+				row-gap: var(--uui-size-space-4);
+				align-items: center;
+				color: var(--uui-color-border-emphasis);
+				margin-top: var(--uui-size-layout-3);
+				margin-inline: auto;
+			}
+			.navigation-tips-key {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: var(--uui-border-radius);
+				border: 1px solid var(--uui-color-border);
+				height: 36px;
+				font-size: 0.9rem;
+				font-weight: bold;
+			}
+			#navigation-tips .navigation-tips-key + span {
+				margin-left: var(--uui-size-space-2);
+			}
 			#top {
 				background-color: var(--uui-color-surface);
 				display: flex;