From 5d4551fc7e468fc188c5c607fd5db32ecb446458 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 6 Jan 2026 10:04:49 +0100
Subject: [PATCH] UI: fix chrome focus in footer (#26466)

---
 .storybook/main.ts                      |   3 +
 assets/js/components/Footer/Footer.vue  |   2 +-
 assets/js/components/Footer/Version.vue | 221 ++++++++++++------------
 3 files changed, 112 insertions(+), 114 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4a93224fd..bd305a5f6 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -7,4 +7,7 @@ export default {
     name: "@storybook/vue3-vite",
     options: {},
   },
+  core: {
+    disableTelemetry: true,
+  },
 } satisfies StorybookConfig;
diff --git a/assets/js/components/Footer/Footer.vue b/assets/js/components/Footer/Footer.vue
index a7b9df52a..4011e49c5 100644
--- a/assets/js/components/Footer/Footer.vue
+++ b/assets/js/components/Footer/Footer.vue
@@ -1,7 +1,7 @@
 <template>
 	<footer class="footer" data-testid="footer">
 		<div class="container py-2">
-			<div class="d-flex justify-content-between">
+			<div class="d-flex justify-content-between gap-2">
 				<Version v-bind="version" />
 				<Savings v-bind="savings" />
 			</div>
diff --git a/assets/js/components/Footer/Version.vue b/assets/js/components/Footer/Version.vue
index 62bc4064d..c295ab52e 100644
--- a/assets/js/components/Footer/Version.vue
+++ b/assets/js/components/Footer/Version.vue
@@ -1,128 +1,123 @@
 <template>
-	<div class="text-truncate">
-		<a
-			v-if="commit"
-			:href="githubHashUrl"
-			target="_blank"
-			class="btn btn-link ps-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end"
-		>
-			<Logo class="logo me-2 flex-shrink-0" />
-			<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
-			<shopicon-regular-moonstars
-				class="ms-2 text-gray-light flex-shrink-0"
-			></shopicon-regular-moonstars>
-		</a>
-		<button
-			v-else-if="newVersionAvailable"
-			href="#"
-			class="btn btn-link ps-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end"
-			@click="openModal"
-		>
-			<shopicon-regular-gift class="me-2"></shopicon-regular-gift>
-			<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
-			<span class="ms-2 d-none d-sm-block text-gray-medium text-decoration-underline">
-				{{ $t("footer.version.availableLong") }}
-			</span>
-		</button>
-		<a
-			v-else
-			:href="releaseNotesUrl(installed)"
-			target="_blank"
-			class="btn btn-link evcc-default-text ps-0 text-decoration-none text-nowrap d-flex align-items-end"
-		>
-			<Logo class="logo me-2 flex-shrink-0" />
-			<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
-		</a>
+	<a
+		v-if="commit"
+		:href="githubHashUrl"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="btn btn-link px-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end text-truncate"
+	>
+		<Logo class="logo me-2 flex-shrink-0" />
+		<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
+		<shopicon-regular-moonstars
+			class="ms-2 text-gray-light flex-shrink-0"
+		></shopicon-regular-moonstars>
+	</a>
+	<button
+		v-else-if="newVersionAvailable"
+		class="btn btn-link px-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end text-truncate"
+		@click="openModal"
+	>
+		<shopicon-regular-gift class="me-2"></shopicon-regular-gift>
+		<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
+		<span class="ms-2 d-none d-sm-block text-gray-medium text-decoration-underline">
+			{{ $t("footer.version.availableLong") }}
+		</span>
+	</button>
+	<a
+		v-else
+		:href="releaseNotesUrl(installed)"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="btn btn-link evcc-default-text px-0 text-decoration-none text-nowrap d-flex align-items-end text-truncate"
+	>
+		<Logo class="logo me-2 flex-shrink-0" />
+		<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
+	</a>
 
-		<Teleport to="body">
-			<div
-				id="updateModal"
-				class="modal fade text-dark"
-				tabindex="-1"
-				role="dialog"
-				aria-hidden="true"
-			>
-				<div class="modal-dialog modal-dialog-centered" role="document">
-					<div class="modal-content">
-						<div class="modal-header">
-							<h5 class="modal-title">{{ $t("footer.version.modalTitle") }}</h5>
-							<button
-								type="button"
-								class="btn-close"
-								data-bs-dismiss="modal"
-								aria-label="Close"
-							></button>
-						</div>
-						<div class="modal-body">
-							<div v-if="updateStarted">
-								<p>{{ $t("footer.version.modalUpdateStarted") }}</p>
-								<div class="progress my-3">
-									<div
-										class="progress-bar progress-bar-striped progress-bar-animated"
-										role="progressbar"
-										:style="{ width: uploadProgress + '%' }"
-									></div>
-								</div>
-								<p>{{ updateStatus }} {{ uploadMessage }}</p>
-							</div>
-							<div v-else>
-								<p>
-									<small>
-										{{ $t("footer.version.modalInstalledVersion") }}:
-										{{ installed }}
-									</small>
-								</p>
-								<!-- eslint-disable vue/no-v-html -->
-								<div v-if="releaseNotes" v-html="releaseNotes"></div>
-								<!-- eslint-enable vue/no-v-html -->
-								<p v-else>
-									{{ $t("footer.version.modalNoReleaseNotes") }}
-									<a :href="releaseNotesUrl(available)">GitHub</a>.
-								</p>
+	<Teleport to="body">
+		<div
+			id="updateModal"
+			class="modal fade text-dark"
+			tabindex="-1"
+			role="dialog"
+			aria-hidden="true"
+		>
+			<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title">{{ $t("footer.version.modalTitle") }}</h5>
+						<button
+							type="button"
+							class="btn-close"
+							data-bs-dismiss="modal"
+							aria-label="Close"
+						></button>
+					</div>
+					<div class="modal-body">
+						<div v-if="updateStarted">
+							<p>{{ $t("footer.version.modalUpdateStarted") }}</p>
+							<div class="progress my-3">
+								<div
+									class="progress-bar progress-bar-striped progress-bar-animated"
+									role="progressbar"
+									:style="{ width: uploadProgress + '%' }"
+								></div>
 							</div>
+							<p>{{ updateStatus }} {{ uploadMessage }}</p>
 						</div>
-						<div class="modal-footer d-flex justify-content-between">
+						<div v-else>
+							<p>
+								<small>
+									{{ $t("footer.version.modalInstalledVersion") }}:
+									{{ installed }}
+								</small>
+							</p>
+							<!-- eslint-disable vue/no-v-html -->
+							<div v-if="releaseNotes" v-html="releaseNotes"></div>
+							<!-- eslint-enable vue/no-v-html -->
+							<p v-else>
+								{{ $t("footer.version.modalNoReleaseNotes") }}
+								<a :href="releaseNotesUrl(available)">GitHub</a>.
+							</p>
+						</div>
+					</div>
+					<div class="modal-footer d-flex justify-content-between">
+						<button
+							type="button"
+							class="btn btn-outline-secondary"
+							:disabled="updateStarted"
+							data-bs-dismiss="modal"
+						>
+							{{ $t("footer.version.modalCancel") }}
+						</button>
+						<div>
 							<button
+								v-if="hasUpdater"
 								type="button"
-								class="btn btn-outline-secondary"
+								class="btn btn-primary"
 								:disabled="updateStarted"
-								data-bs-dismiss="modal"
+								@click="update"
 							>
-								{{ $t("footer.version.modalCancel") }}
-							</button>
-							<div>
-								<button
-									v-if="hasUpdater"
-									type="button"
-									class="btn btn-primary"
-									:disabled="updateStarted"
-									@click="update"
-								>
-									<span v-if="updateStarted">
-										<span
-											class="spinner-border spinner-border-sm"
-											role="status"
-											aria-hidden="true"
-										>
-										</span>
-										{{ $t("footer.version.modalUpdate") }}
+								<span v-if="updateStarted">
+									<span
+										class="spinner-border spinner-border-sm"
+										role="status"
+										aria-hidden="true"
+									>
 									</span>
-									<span v-else>{{ $t("footer.version.modalUpdateNow") }}</span>
-								</button>
-								<a
-									v-else
-									:href="releaseNotesUrl(available)"
-									class="btn btn-primary"
-								>
-									{{ $t("footer.version.modalDownload") }}
-								</a>
-							</div>
+									{{ $t("footer.version.modalUpdate") }}
+								</span>
+								<span v-else>{{ $t("footer.version.modalUpdateNow") }}</span>
+							</button>
+							<a v-else :href="releaseNotesUrl(available)" class="btn btn-primary">
+								{{ $t("footer.version.modalDownload") }}
+							</a>
 						</div>
 					</div>
 				</div>
 			</div>
-		</Teleport>
-	</div>
+		</div>
+	</Teleport>
 </template>
 
 <script lang="ts">
@@ -195,6 +190,6 @@ export default defineComponent({
 }
 .logo {
 	height: 1.1rem;
-	margin-bottom: 0.2rem;
+	margin: 0.3rem 0 0.2rem;
 }
 </style>