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

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>

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

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 %}