From f13a56dc7a06c5fea46de704704c4692e6d55e5c Mon Sep 17 00:00:00 2001
From: Jingwen Zhu <42974891+wen-2018@users.noreply.github.com>
Date: Fri, 17 Jan 2025 11:27:15 -0400
Subject: [PATCH] add product pronunciation hint for screen readers (fix
 #15530) (#15847)

* add product pronunciation hint for screen readers (fix #15530)

* add aria hint for both link and heading with more meaningful id

* add Fakespot aria hint for other instances
---
 .../includes/protocol/navigation/menus-refresh/products.html | 5 +++--
 .../mozorg/templates/mozorg/home/includes/m24/products.html  | 3 ++-
 bedrock/products/templates/products/landing.html             | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html
index 869baff1b51..e5fb9220ec8 100644
--- a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html
+++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html
@@ -55,9 +55,10 @@ <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mdn-plus') }}</h2>
           </li>
           <li>
             <section class="m24-c-menu-item mzp-has-icon">
-              <a class="m24-c-menu-item-link" href="https://fakespot.com/?{{ utm_params }}" data-link-text="Fakespot" data-link-position="topnav - products">
+              <a class="m24-c-menu-item-link" href="https://fakespot.com/?{{ utm_params }}" data-link-text="Fakespot" data-link-position="topnav - products" aria-labelledby="fakespot-aria-hint">
                 <img loading="lazy" src="{{ static('img/logos/fakespot/logo-blue.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
-                <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-fakespot') }}</h2>
+                <h2 class="m24-c-menu-item-title" aria-labelledby="fakespot-aria-hint">{{ ftl('navigation-refresh-fakespot') }}</h2>
+                <span id="fakespot-aria-hint" aria-label="fake spot"></span>
               </a>
             </section>
           </li>
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html
index 49b5d6cc286..2b9e21d5fb0 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html
@@ -25,9 +25,10 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-love-the-internet') }}</h2>
         </a>
       </li>
       <li class="m24-c-launchpad-item">
-        <a class="m24-c-launchpad-link m24-t-product-fakespot" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list">
+        <a class="m24-c-launchpad-link m24-t-product-fakespot" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list" aria-labelledby="fakespot-aria-hint">
           <strong class="m24-c-launchpad-title">{{ ftl('m24-home-fakespot') }}</strong>
           <span class="m24-c-launchpad-info">{{ ftl('m24-home-spot-fake-reviews') }}</span>
+          <span id="fakespot-aria-hint" aria-label="fake spot"></span>
         </a>
       </li>
       <li class="m24-c-launchpad-item">
diff --git a/bedrock/products/templates/products/landing.html b/bedrock/products/templates/products/landing.html
index f160bb228c8..13a3decd7d7 100644
--- a/bedrock/products/templates/products/landing.html
+++ b/bedrock/products/templates/products/landing.html
@@ -197,7 +197,7 @@ <h2 class="mzp-c-picto-heading"><a href="https://www.thunderbird.net/{{ referral
         }
       ),
     ) %}
-      <h2 class="mzp-c-picto-heading"><a href="https://www.fakespot.com/{{ referrals }}" data-cta-text="Fakespot" data-cta-position="heading">{{ ftl('firefox-products-fakespot') }}</a></h2>
+      <h2 class="mzp-c-picto-heading" aria-labelledby="fakespot-aria-hint"><a href="https://www.fakespot.com/{{ referrals }}" data-cta-text="Fakespot" data-cta-position="heading" aria-labelledby="fakespot-aria-hint">{{ ftl('firefox-products-fakespot') }}<span id="fakespot-aria-hint" aria-label="fake spot"></span></a></h2>
       <p>{{ ftl('firefox-products-fakespot-has-your') }}</p>
       <p><a class="mzp-c-button mzp-t-product mzp-t-secondary" href="https://www.fakespot.com/analyzer{{ referrals }}" rel="external noopener" data-cta-text="Analyze a url with Fakespot">{{ ftl('firefox-products-analyze') }} {{ icon_external|safe }}</a></p>
     {% endcall %}