From 07a2777a663161deb530aabf1be5c008ab6ce189 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Mon, 16 Dec 2024 12:28:37 +0100
Subject: [PATCH] Add link titles to banner links

- gives the user a popup that says what the link does
- fix tab/spaces indentation
---
 .../FallbackBanner/UseOfFundsLink.vue         |  6 +++-
 src/components/Footer/BannerFooter.vue        |  1 +
 .../Footer/FooterAlreadyDonated.vue           | 36 +++++++++++--------
 src/components/Footer/messages/Footer.de.ts   |  3 +-
 src/components/Footer/messages/Footer.en.ts   |  3 +-
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/FallbackBanner/UseOfFundsLink.vue b/src/components/FallbackBanner/UseOfFundsLink.vue
index f7eb899f3..f2d8963a5 100644
--- a/src/components/FallbackBanner/UseOfFundsLink.vue
+++ b/src/components/FallbackBanner/UseOfFundsLink.vue
@@ -1,5 +1,9 @@
 <template>
-	<a class="wmde-banner-fallback-usage-link" @click.prevent="$emit( 'button-clicked' )">
+	<a
+		class="wmde-banner-fallback-usage-link"
+		@click.prevent="$emit( 'button-clicked' )"
+		:title="$translate( 'use-of-funds-link-description' )"
+	>
 		{{ $translate( 'use-of-funds-link' ) }}
 	</a>
 </template>
diff --git a/src/components/Footer/BannerFooter.vue b/src/components/Footer/BannerFooter.vue
index 65f8e8d07..09892909b 100644
--- a/src/components/Footer/BannerFooter.vue
+++ b/src/components/Footer/BannerFooter.vue
@@ -21,6 +21,7 @@
 					id="application-of-funds-link"
 					class="wmde-banner-footer-usage-link t-use-of-funds-link"
 					@click.prevent="$emit( 'showFundsModal' )"
+					:title="$translate( 'use-of-funds-link-description' )"
 				>
 					{{ $translate( 'use-of-funds-link' ) }}
 				</a>
diff --git a/src/components/Footer/FooterAlreadyDonated.vue b/src/components/Footer/FooterAlreadyDonated.vue
index 401d3d7ad..854fce954 100644
--- a/src/components/Footer/FooterAlreadyDonated.vue
+++ b/src/components/Footer/FooterAlreadyDonated.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="wmde-banner-footer">
-        <div class="wmde-banner-footer-bank">
-            <label class="wmde-banner-footer-bank-item account">{{ $translate( 'donation-account' ) }}:
+	<div class="wmde-banner-footer">
+		<div class="wmde-banner-footer-bank">
+			<label class="wmde-banner-footer-bank-item account">{{ $translate( 'donation-account' ) }}:
 				<SelectionInput :value="'Wikimedia e. V.'"/>
 			</label>
 			<label class="wmde-banner-footer-bank-item bic">BIC:
@@ -10,23 +10,29 @@
 			<label class="wmde-banner-footer-bank-item iban">IBAN:
 				<SelectionInput :value="'DE09 3702 0500 0003 2873 00'" :focusedValue="'DE09370205000003287300'"/>
 			</label>
-			<a href="#" class="wmde-banner-footer-already-donated" @click.prevent="onClickAlreadyDonated">
+			<a
+				href="#"
+				class="wmde-banner-footer-already-donated"
+				@click.prevent="onClickAlreadyDonated"
+				:title="$translate( 'already-donated-description' )"
+			>
 				<TickIcon :fill="'#5B5B5B'"/> {{ $translate( 'already-donated-open-link' ) }}
 			</a>
 		</div>
 
-        <div class="wmde-banner-footer-usage">
-            <div class="wmde-banner-footer-item">
-                <a
-                    id="application-of-funds-link"
-                    class="wmde-banner-footer-usage-link t-use-of-funds-link"
-                    @click.prevent="$emit( 'showFundsModal' )"
+		<div class="wmde-banner-footer-usage">
+			<div class="wmde-banner-footer-item">
+				<a
+					id="application-of-funds-link"
+					class="wmde-banner-footer-usage-link t-use-of-funds-link"
+					@click.prevent="$emit( 'showFundsModal' )"
+					:title="$translate( 'use-of-funds-link-description' )"
 				>
-                    {{ $translate('use-of-funds-link') }}
-                </a>
-            </div>
-        </div>
-    </div>
+				{{ $translate('use-of-funds-link') }}
+				</a>
+			</div>
+		</div>
+		</div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Footer/messages/Footer.de.ts b/src/components/Footer/messages/Footer.de.ts
index d14a9445b..e167f5fef 100644
--- a/src/components/Footer/messages/Footer.de.ts
+++ b/src/components/Footer/messages/Footer.de.ts
@@ -5,7 +5,8 @@ const translations: TranslationMessages = {
 	'use-of-funds-link': 'Was Ihre Spende bewirkt',
 	'use-of-funds-link-description': 'Erklärungstext aufklappen',
 	'faq-page-link': 'Häufige Fragen zur Spende',
-	'faq-page-link-description': 'Webseite in neuem Browsertab bzw. -fenster öffnen'
+	'faq-page-link-description': 'Webseite in neuem Browsertab oder Fenster öffnen',
+	'already-donated-description': 'Banner schließen'
 };
 
 export default translations;
diff --git a/src/components/Footer/messages/Footer.en.ts b/src/components/Footer/messages/Footer.en.ts
index f135c90be..04d6a23ba 100644
--- a/src/components/Footer/messages/Footer.en.ts
+++ b/src/components/Footer/messages/Footer.en.ts
@@ -5,7 +5,8 @@ const translations: TranslationMessages = {
 	'use-of-funds-link': 'Where does my donation go?',
 	'use-of-funds-link-description': 'expand explanation text',
 	'faq-page-link': 'FAQ',
-	'faq-page-link-description': 'open webpage in a new browser tab or window'
+	'faq-page-link-description': 'open webpage in a new browser tab or window',
+	'already-donated-description': 'close banner'
 };
 
 export default translations;