From 37f46fc62dd2f42425f46ecba3f8c0f6aa5157dc Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Mon, 24 Aug 2026 12:45:13 +0200
Subject: [PATCH] fix(app): hide decorative country and region flags from
 screen readers (#1917)

---
 .../components/modals/required_action/RequiredActionPhone.tsx    | 1 +
 .../modals/channel_tabs/channel_overview_tab/RtcRegionSelect.tsx | 1 +
 fluxer_app/src/features/user/components/modals/PhoneAddModal.tsx | 1 +
 .../src/features/user/components/modals/tabs/LanguageTab.tsx     | 1 +
 fluxer_app/src/features/voice/components/VoiceRegionSelector.tsx | 1 +
 5 files changed, 5 insertions(+)

diff --git a/fluxer_app/src/features/auth/components/modals/required_action/RequiredActionPhone.tsx b/fluxer_app/src/features/auth/components/modals/required_action/RequiredActionPhone.tsx
index 5ec979dfe..9b3f450d4 100644
--- a/fluxer_app/src/features/auth/components/modals/required_action/RequiredActionPhone.tsx
+++ b/fluxer_app/src/features/auth/components/modals/required_action/RequiredActionPhone.tsx
@@ -94,6 +94,7 @@ const renderCountryOption = (option: CountrySelectOption) => {
 				<img
 					src={flagUrl}
 					alt={countryName}
+					aria-hidden={true}
 					className={styles.countryFlag}
 					data-flx="auth.required-action-modal.country-option.country-flag"
 				/>
diff --git a/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/RtcRegionSelect.tsx b/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/RtcRegionSelect.tsx
index c4c2938b7..b55f83cd7 100644
--- a/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/RtcRegionSelect.tsx
+++ b/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/RtcRegionSelect.tsx
@@ -53,6 +53,7 @@ export const RtcRegionSelect: React.FC<RtcRegionSelectProps> = observer(({form,
 						<img
 							src={emojiUrl}
 							alt={displayName}
+							aria-hidden={true}
 							className={styles.regionEmoji}
 							data-flx="channel.channel-tabs.channel-overview-tab.rtc-region-option.region-emoji"
 						/>
diff --git a/fluxer_app/src/features/user/components/modals/PhoneAddModal.tsx b/fluxer_app/src/features/user/components/modals/PhoneAddModal.tsx
index d5a4de12c..e2cc8d402 100644
--- a/fluxer_app/src/features/user/components/modals/PhoneAddModal.tsx
+++ b/fluxer_app/src/features/user/components/modals/PhoneAddModal.tsx
@@ -99,6 +99,7 @@ const renderCountryOption = (option: CountrySelectOption) => {
 				<img
 					src={flagUrl}
 					alt={countryName}
+					aria-hidden={true}
 					className={styles.flagImage}
 					data-flx="user.phone-add-modal.country-option.flag-image"
 				/>
diff --git a/fluxer_app/src/features/user/components/modals/tabs/LanguageTab.tsx b/fluxer_app/src/features/user/components/modals/tabs/LanguageTab.tsx
index 01e5db6a9..9be46b152 100644
--- a/fluxer_app/src/features/user/components/modals/tabs/LanguageTab.tsx
+++ b/fluxer_app/src/features/user/components/modals/tabs/LanguageTab.tsx
@@ -198,6 +198,7 @@ export const LanguageSelector = observer(function LanguageSelector({
 			<img
 				src={flagUrl}
 				alt={`${option.name} flag`}
+				aria-hidden={true}
 				className={styles.flagImage}
 				draggable={false}
 				data-flx="user.language-selector.render-language-content.flag-image"
diff --git a/fluxer_app/src/features/voice/components/VoiceRegionSelector.tsx b/fluxer_app/src/features/voice/components/VoiceRegionSelector.tsx
index 6c8b11b1c..1e77abc43 100644
--- a/fluxer_app/src/features/voice/components/VoiceRegionSelector.tsx
+++ b/fluxer_app/src/features/voice/components/VoiceRegionSelector.tsx
@@ -132,6 +132,7 @@ export function VoiceRegionSelector({channelId, currentRegion, compact = false}:
 						<img
 							src={emojiUrl}
 							alt={option.label}
+							aria-hidden={true}
 							className={styles.regionEmoji}
 							data-flx="voice.voice-region-selector.render-region-option.region-emoji"
 						/>