Fix parsing error on flag SVG, add titles for alt text (#15714)

mozilla · Dec 11, 2024 · 71c2512 · 71c2512
1 parent 3061d26
commit 71c2512
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
@@ -16,15 +16,16 @@ <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
       <p class="m24-c-flag-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta m24-t-lg" data-cta-text="Learn about us">{{ ftl('m24-home-learn-about-us') }}</a></p>
     </div>
     <div class="m24-c-flag-media">
-      <svg class="m24-c-flag-media-static" xmlns="http://www.w3.org/2000/svg" width="216" height="243" fill="none" viewBox="0 0 216 243"><path d="M93.573 29v20.734h72.565v5.351l-61.196 22.238v18.728l61.196 22.237v5.352H72.172v20.734h115.367v-37.788l-49.826-17.224v-5.349l49.826-17.222V29H93.573ZM29.034 214.6h23.743V29H29.034v185.6ZM72.172 71.136h21.401V49.734H72.172v21.402Z" /></svg>
-      <svg class="m24-c-flag-media-animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19">
+      <svg class="m24-c-flag-media-static" role="img" xmlns="http://www.w3.org/2000/svg" width="216" height="243" fill="none" viewBox="0 0 216 243"><title>{{ ftl('m24-home-alt-flag') }}</title><path d="M93.573 29v20.734h72.565v5.351l-61.196 22.238v18.728l61.196 22.237v5.352H72.172v20.734h115.367v-37.788l-49.826-17.224v-5.349l49.826-17.222V29H93.573ZM29.034 214.6h23.743V29H29.034v185.6ZM72.172 71.136h21.401V49.734H72.172v21.402Z" /></svg>
+      <svg class="m24-c-flag-media-animation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19">
+        <title>{{ ftl('m24-home-alt-flag') }}</title>
         <defs>
             <filter id="dilate" x="-10%" y="-10%" width="120%" height="120%">
                 <feMorphology operator="dilate" radius="0.3" in="SourceGraphic" result="dilated" />
             </filter>
         </defs>
         <g class="wave">
-            <path shape-rendering="crispEdges" class="pole" d="M39.55,181.45h-20.77V19.06h20.77v162.4ZM56.52" />
+            <path shape-rendering="crispEdges" class="pole" d="M39.55,181.45h-20.77V19.06h20.77v162.4Z" />
             <polygon shape-rendering="crispEdges" class="flag-five"
                 points="126.03 37.2 138.74 37.2 138.74 41.88 126.03 46.5 126.03 62.99 157.47 52.12 157.47 19.06 126.03 19.06 126.03 37.2" />
             <polygon shape-rendering="crispEdges" class="flag-five"

diff --git a/l10n/en/mozorg/home-m24.ftl b/l10n/en/mozorg/home-m24.ftl
@@ -18,6 +18,8 @@ m24-home-page-desc-v2 = We’re working to put control of the internet back in t
 m24-home-welcome-to-mozilla = Welcome to { -brand-name-mozilla }
 m24-home-from-trustworthy-tech = From trustworthy tech to policies that defend your digital rights, we put you first — always.
 m24-home-learn-about-us = Learn about us
+# Used as accessible text alternative for image
+m24-home-alt-flag = A stylized green flag on a black background, built from the ‘M’ for { -brand-name-mozilla } and a pixel that is displaced to reference its original dinosaur logo.
 
 ## Products