Improve top level landmarks (Fixes #15814) (#15816)

bedrock/base/templates/includes/protocol/footer/footer-refresh.html

@@ -9,7 +9,7 @@
     {% include 'includes/protocol/footer/footer-newsletter.html' %}
   {% endif %}
   <div class="moz24-footer-content">
-    <nav class="moz24-footer-primary" aria-label="{{ ftl('footer-refresh-primary-nav-aria-label') }}">
+    <div class="moz24-footer-primary">
       <div class="moz24-footer-sections-wrapper">
         <div class="moz24-footer-section-wrapper moz24-links-section">
           <section>
@@ -88,7 +88,7 @@
           </section>
         </div>
       </div>
-    </nav>
+    </div>
     <div class="moz24-footer-actions">
       <a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-type="button" data-link-text="Donate">
         <span class="mzp-c-button-icon-start">
@@ -102,7 +102,7 @@
         {% include 'includes/protocol/lang-switcher-refresh.html' %}
        </div>
     </div>
-    <nav class="moz24-footer-secondary" aria-label="{{ ftl('footer-refresh-secondary-nav-aria-label') }}">
+    <div class="moz24-footer-secondary">
       <div class="moz24-footer-legal">
         <p class="moz24-footer-license" rel="license">
           {% set moco_link = 'href="%s" data-link-position="footer" data-link-text="Mozilla Corporation"'|safe|format(url('mozorg.home')) %}
@@ -123,7 +123,7 @@
           {% endif %}
         </ul>
       </div>
-    </nav>
+    </div>
     <img loading="lazy" class="moz24-footer-logo-image-bottom" src="{{ static('img/logos/m24/wordmark-white.svg') }}" alt="" width="1376" height="285">
   </div>
 </footer>

bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html

@@ -5,7 +5,7 @@
  #}
 
  {% include 'includes/banners/pencil-banner.html' %}
- <nav class="m24-navigation-refresh m24-mzp-is-sticky" role="navigation">
+ <nav class="m24-navigation-refresh m24-mzp-is-sticky" aria-label="{{ ftl('navigation-refresh-landmark-label') }}">
   <div class="m24-c-navigation-l-content">
     <div class="m24-c-navigation-container">
       <button class="m24-c-navigation-menu-button" type="button" aria-controls="m24-c-navigation-items" data-testid="m24-navigation-menu-button">{{ ftl('ui-menu') }}</button>

bedrock/base/templates/macros.html

@@ -192,10 +192,10 @@
 {% else %}
   {% set current_page = request.path %}
 {% endif %}
-<nav class="c-sub-navigation">
+<nav class="c-sub-navigation" aria-labelledby="c-sub-navigation-title">
   <div class="mzp-l-content">
     <div class="c-sub-navigation-content">
-      <h2 class="c-sub-navigation-title">
+      <h2 id="c-sub-navigation-title" class="c-sub-navigation-title">
         {% if title.href %}
           <a href="{{ title.href }}" data-link-position="subnav" {% if title.cta_name %}data-link-text="{{ title.cta_name }}"{% endif %}>
             {% if title.icon %}<img class="c-sub-navigation-icon" src="{{ title.icon }}" width="24" height="24" alt="">{% endif %}

l10n/en/footer-refresh.ftl

@@ -41,5 +41,3 @@ footer-refresh-community-participation-guidelines = Community Participation Guid
 footer-refresh-about-this-site = About this site
 footer-refresh-all-languages = All languages
 footer-refresh-language = Language
-footer-refresh-primary-nav-aria-label = Footer primary
-footer-refresh-secondary-nav-aria-label = Footer secondary

l10n/en/navigation_refresh.ftl

@@ -4,6 +4,9 @@
 
 navigation-refresh-mozilla = { -brand-name-mozilla }
 
+# An accessible label used to describe that the role of the element is the primary website navigation.
+navigation-refresh-landmark-label = Primary
+
 ## About us
 
 navigation-refresh-about-us = About us