fix(frontend): alt-text for flags (#2894)

Fixes #2397

Author: piprett

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -192,15 +192,20 @@
                 class="country-value"
               >
                 <div class="country-flag-container">
-                  <img
-                    :src="
-                      name.toLowerCase() === 'xx' || !name
-                        ? 'https://cdn.modrinth.com/placeholder-banner.svg'
-                        : countryCodeToFlag(name)
-                    "
-                    alt="Hidden country"
-                    class="country-flag"
-                  />
+                  <template v-if="name.toLowerCase() === 'xx' || !name">
+                    <img
+                      src="https://cdn.modrinth.com/placeholder-banner.svg"
+                      alt="Placeholder flag"
+                      class="country-flag"
+                    />
+                  </template>
+                  <template v-else>
+                    <img
+                      :src="countryCodeToFlag(name)"
+                      :alt="`${countryCodeToName(name)}'s flag`"
+                      class="country-flag"
+                    />
+                  </template>
                 </div>
                 <div class="country-text">
                   <strong class="country-name"
@@ -246,15 +251,20 @@
                 class="country-value"
               >
                 <div class="country-flag-container">
-                  <img
-                    :src="
-                      name.toLowerCase() === 'xx' || !name
-                        ? 'https://cdn.modrinth.com/placeholder-banner.svg'
-                        : countryCodeToFlag(name)
-                    "
-                    alt="Hidden country"
-                    class="country-flag"
-                  />
+                  <template v-if="name.toLowerCase() === 'xx' || !name">
+                    <img
+                      src="https://cdn.modrinth.com/placeholder-banner.svg"
+                      alt="Placeholder flag"
+                      class="country-flag"
+                    />
+                  </template>
+                  <template v-else>
+                    <img
+                      :src="countryCodeToFlag(name)"
+                      :alt="`${countryCodeToName(name)}'s flag`"
+                      class="country-flag"
+                    />
+                  </template>
                 </div>
                 <div class="country-text">
                   <strong class="country-name">