fix(app): hide decorative country and region flags from screen readers (#1917)

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"
 				/>

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"
 						/>

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"
 				/>

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"

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"
 						/>