Add is-sr-only class

This allows us to put text for screen readers alongside button icons. Added close text to the messages and hooked up the main and UoF close buttons. Ticket: https://phabricator.wikimedia.org/T381956
wmde · Feb 21, 2025 · 4a32724 · 4a32724
1 parent db2ce4b
commit 4a32724
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 0 deletions.
diff --git a/banners/desktop/C25_WMDE_Desktop_DE_00/messages.ts b/banners/desktop/C25_WMDE_Desktop_DE_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import CloseButtonTextDe from '@src/components/ButtonClose/messages/ButtonClose.de';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
 import FooterDe from '@src/components/Footer/messages/Footer.de';
@@ -9,6 +10,7 @@ import DoubleProgressBarDe from '@src/components/ProgressBar/messages/DoubleProg
 
 const messages: TranslationMessages = {
 	...DynamicCampaignTextDe,
+	...CloseButtonTextDe,
 	...UpgradeToYearlyDe,
 	...FooterDe,
 	...MainDonationFormDe,

diff --git a/banners/english/C25_WMDE_Desktop_EN_00/messages.ts b/banners/english/C25_WMDE_Desktop_EN_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import CloseButtonTextEn from '@src/components/ButtonClose/messages/ButtonClose.en';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
 import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
@@ -9,6 +10,7 @@ import DoubleProgressBarEn from '@src/components/ProgressBar/messages/DoubleProg
 
 const messages: TranslationMessages = {
 	...DynamicCampaignTextEn,
+	...CloseButtonTextEn,
 	...UpgradeToYearlyEn,
 	...SoftCloseEn,
 	...FooterEn,

diff --git a/banners/mobile/C25_WMDE_Mobile_DE_00/messages.ts b/banners/mobile/C25_WMDE_Mobile_DE_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import CloseButtonTextDe from '@src/components/ButtonClose/messages/ButtonClose.de';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
 import FooterDe from '@src/components/Footer/messages/Footer.de';
@@ -7,6 +8,7 @@ import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
 
 const messages: TranslationMessages = {
 	...DynamicCampaignTextDe,
+	...CloseButtonTextDe,
 	...FooterDe,
 	...MainDonationFormDe,
 	...UpgradeToYearlyDe,

diff --git a/banners/mobile_english/C25_WMDE_Mobile_EN_00/messages.ts b/banners/mobile_english/C25_WMDE_Mobile_EN_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignText from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import CloseButtonTextEn from '@src/components/ButtonClose/messages/ButtonClose.en';
 import { TranslationMessages } from '@src/Translator';
 import SoftClose from '@src/components/SoftClose/messages/SoftClose.en';
 import Footer from '@src/components/Footer/messages/Footer.en';
@@ -7,6 +8,7 @@ import UpgradeToYearly from '@src/components/DonationForm/Forms/messages/Upgrade
 
 const messages: TranslationMessages = {
 	...DynamicCampaignText,
+	...CloseButtonTextEn,
 	...SoftClose,
 	...Footer,
 	...MainDonationForm,

diff --git a/banners/pad/C25_WMDE_iPad_DE_00/messages.ts b/banners/pad/C25_WMDE_iPad_DE_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignText from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import CloseButtonTextDe from '@src/components/ButtonClose/messages/ButtonClose.de';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearly from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
 import SoftClose from '@src/components/SoftClose/messages/SoftClose.de';
@@ -7,6 +8,7 @@ import MainDonationForm from '@src/components/DonationForm/Forms/messages/MainDo
 
 const messages: TranslationMessages = {
 	...DynamicCampaignText,
+	...CloseButtonTextDe,
 	...UpgradeToYearly,
 	...SoftClose,
 	...Footer,

diff --git a/banners/wpde_desktop/C25_WPDE_Desktop_00/messages.ts b/banners/wpde_desktop/C25_WPDE_Desktop_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import CloseButtonTextDe from '@src/components/ButtonClose/messages/ButtonClose.de';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
 import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
@@ -7,6 +8,7 @@ import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/Main
 
 const messages: TranslationMessages = {
 	...DynamicCampaignTextDe,
+	...CloseButtonTextDe,
 	...UpgradeToYearlyDe,
 	...SoftCloseDe,
 	...FooterDe,

diff --git a/banners/wpde_mobile/C25_WPDE_Mobile_00/messages.ts b/banners/wpde_mobile/C25_WPDE_Mobile_00/messages.ts
@@ -1,4 +1,5 @@
 import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import CloseButtonTextDe from '@src/components/ButtonClose/messages/ButtonClose.de';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
 import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
@@ -7,6 +8,7 @@ import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/Main
 
 const messages: TranslationMessages = {
 	...DynamicCampaignTextDe,
+	...CloseButtonTextDe,
 	...UpgradeToYearlyDe,
 	...SoftCloseDe,
 	...FooterDe,

diff --git a/src/components/ButtonClose/messages/ButtonClose.de.ts b/src/components/ButtonClose/messages/ButtonClose.de.ts
@@ -0,0 +1,7 @@
+import { TranslationMessages } from '@src/Translator';
+
+const translations: TranslationMessages = {
+	'close': 'Schließen Sie'
+};
+
+export default translations;
diff --git a/src/components/ButtonClose/messages/ButtonClose.en.ts b/src/components/ButtonClose/messages/ButtonClose.en.ts
@@ -0,0 +1,7 @@
+import { TranslationMessages } from '@src/Translator';
+
+const translations: TranslationMessages = {
+	'close': 'Close'
+};
+
+export default translations;
diff --git a/src/components/UseOfFunds2024/UseOfFundsModal.vue b/src/components/UseOfFunds2024/UseOfFundsModal.vue
@@ -2,6 +2,7 @@
 	<dialog class="wmde-banner-funds-modal" ref="useOfFundsDialogue">
 		<div class="wmde-banner-funds-modal-close">
 			<button @click="$emit( 'hide' )">
+				<span class="is-sr-only">{{ $translate( 'close' ) }}</span>
 				<IconClose/>
 			</button>
 		</div>

diff --git a/src/themes/Mikings/defaults.scss b/src/themes/Mikings/defaults.scss
@@ -28,4 +28,15 @@
 	&-slide--current .wmde-banner-text-animated-highlight {
 		background-position: 0 0;
 	}
+
+	.is-sr-only {
+		border: none !important;
+		clip: rect(0, 0, 0, 0) !important;
+		height: .01em !important;
+		overflow: hidden !important;
+		padding: 0 !important;
+		position: absolute !important;
+		white-space: nowrap !important;
+		width: .01em !important;
+	}
 }
diff --git a/src/themes/Modo/defaults.scss b/src/themes/Modo/defaults.scss
@@ -28,4 +28,15 @@
 	&-slide--current .wmde-banner-text-animated-highlight {
 		background-position: 0 0;
 	}
+
+	.is-sr-only {
+		border: none !important;
+		clip: rect(0, 0, 0, 0) !important;
+		height: .01em !important;
+		overflow: hidden !important;
+		padding: 0 !important;
+		position: absolute !important;
+		white-space: nowrap !important;
+		width: .01em !important;
+	}
 }
diff --git a/src/themes/Svingle/defaults.scss b/src/themes/Svingle/defaults.scss
@@ -33,4 +33,15 @@ $animated-text-padding-offset: false !default;
 	&-slide--current .wmde-banner-text-animated-highlight {
 		background-position: 0 0;
 	}
+
+	.is-sr-only {
+		border: none !important;
+		clip: rect(0, 0, 0, 0) !important;
+		height: .01em !important;
+		overflow: hidden !important;
+		padding: 0 !important;
+		position: absolute !important;
+		white-space: nowrap !important;
+		width: .01em !important;
+	}
 }
diff --git a/src/themes/Treedip/defaults.scss b/src/themes/Treedip/defaults.scss
@@ -28,4 +28,15 @@
 	&-slide--current .wmde-banner-text-animated-highlight {
 		background-position: 0 0;
 	}
+
+	.is-sr-only {
+		border: none !important;
+		clip: rect(0, 0, 0, 0) !important;
+		height: .01em !important;
+		overflow: hidden !important;
+		padding: 0 !important;
+		position: absolute !important;
+		white-space: nowrap !important;
+		width: .01em !important;
+	}
 }
diff --git a/src/themes/Yperala/defaults.scss b/src/themes/Yperala/defaults.scss
@@ -18,4 +18,15 @@
 	&-slide--current .wmde-banner-text-animated-highlight {
 		background-position: 0 0;
 	}
+
+	.is-sr-only {
+		border: none !important;
+		clip: rect(0, 0, 0, 0) !important;
+		height: .01em !important;
+		overflow: hidden !important;
+		padding: 0 !important;
+		position: absolute !important;
+		white-space: nowrap !important;
+		width: .01em !important;
+	}
 }