Add link titles to banner links

- gives the user a popup that says what the link does
wmde · Dec 16, 2024 · f32606e · f32606e
1 parent ae91841
commit f32606e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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
@@ -10,7 +10,12 @@
 			<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>
@@ -21,6 +26,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/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
@@ -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;