Fix a11y nested interactive element in sub nav (Fixes mozilla#15005)

alexgibson · Aug 29, 2024 · ee3f70f · ee3f70f
1 parent 71ced81
commit ee3f70f
Show file tree

Hide file tree

Showing 16 changed files with 194 additions and 387 deletions.
diff --git a/bedrock/base/templates/macros.html b/bedrock/base/templates/macros.html
@@ -181,9 +181,9 @@ <h2 class="mzp-c-form-title">{{ form_title }}</h2>
 <nav class="c-sub-navigation">
   <div class="mzp-l-content">
     <div class="c-sub-navigation-content">
-      <h2 class="c-sub-navigation-title is-summary" data-testid="sub-navigation-title">
+      <h2 class="c-sub-navigation-title">
         {% if title.href %}
-          <a href="{{ title.href }}" data-link-type="nav" data-link-position="subnav" data-link-text="{{ title.cta_name }}">
+          <a href="{{ title.href }}" data-link-type="nav" 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 %}
             {{ title.text }}
           </a>
@@ -192,6 +192,9 @@ <h2 class="c-sub-navigation-title is-summary" data-testid="sub-navigation-title"
           {{ title.text }}
         {% endif %}
       </h2>
+      <div class="c-sub-navigation-mobile-toggle is-summary" data-testid="sub-navigation-mobile-toggle">
+        <span>{{ ftl('ui-menu')}}</span>
+      </div>
       <ul class="c-sub-navigation-list is-details is-closed" data-testid="sub-navigation-menu">
         {% for link in links %}
         <li class="c-sub-navigation-item">

diff --git a/bedrock/base/tests/test_macros.py b/bedrock/base/tests/test_macros.py
@@ -4,10 +4,14 @@
 
 import re
 
+from django.conf import settings
+
 import pytest
 from django_jinja.backend import Jinja2
 from pyquery import PyQuery as pq
 
+from lib.l10n_utils.fluent import fluent_l10n
+
 jinja_env = Jinja2.get_default()
 
 
@@ -70,14 +74,15 @@ def inner_html(el):
     ],
 )
 def test_sub_nav_markup(test_input, expected):
-    mock_request = {"request": {"path": "/current"}}
+    mock_request = {"request": {"path": "/current"}, "fluent_l10n": fluent_l10n(["en-US", "en"], settings.FLUENT_DEFAULT_FILES)}
     # need to import with context for the request key to pass along the path value
     markup = render("{% from 'macros.html' import sub_nav with context %}" + f"{{{{ sub_nav({test_input}) }}}}", mock_request)
     doc = pq(markup)
 
     nav_title = doc(".c-sub-navigation-title")
+    nav_toggle = doc(".c-sub-navigation-mobile-toggle")
     assert nav_title.text() == expected["title_text"]
-    assert EXPECTED_NAV_HTML["is_summary"] in nav_title.outer_html()
+    assert EXPECTED_NAV_HTML["is_summary"] in nav_toggle.outer_html()
 
     nav_list = doc(".c-sub-navigation-list")
     assert EXPECTED_NAV_HTML["is_details_default_closed"] in nav_list.outer_html()

diff --git a/bedrock/firefox/templates/firefox/browsers/browser-history.html b/bedrock/firefox/templates/firefox/browsers/browser-history.html
@@ -4,6 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
+{% from "macros.html" import sub_nav with context %}
 {% from "macros-protocol.html" import callout_compact with context %}
 
 {% extends "firefox/base/base-protocol.html" %}
@@ -22,26 +23,26 @@
 
 {% block sub_navigation %}
   {% if ftl_has_messages('sub-navigation-firefox', 'sub-navigation-what-is-a-browser', 'sub-navigation-browsing-history') %}
-    <nav class="c-sub-navigation">
-      <div class="mzp-l-content">
-        <div class="c-sub-navigation-content">
-          <h2 class="c-sub-navigation-title is-summary">
-            <a href="{{ url('firefox') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Firefox">
-              <img class="c-sub-navigation-icon" src="{{ static('protocol/img/logos/firefox/logo.svg') }}" width="24" height="24" alt="">
-              {{ ftl('sub-navigation-firefox') }}
-            </a>
-          </h2>
-          <ul class="c-sub-navigation-list is-details is-closed">
-            <li class="c-sub-navigation-item">
-              <a href="{{ url('firefox.browsers.what-is-a-browser') }}" data-link-type="nav" data-link-position="subnav" data-link-text="What Is a Browser?">{{ ftl('sub-navigation-what-is-a-browser') }}</a>
-            </li>
-            <li class="c-sub-navigation-item">
-              <a href="https://support.mozilla.org/kb/browsing-history-firefox/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=browser-history" data-link-type="nav" data-link-position="subnav" data-link-text="Browsing History">{{ ftl('sub-navigation-browsing-history') }}</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
+    {{ sub_nav(
+      title={
+        'text':  ftl('sub-navigation-firefox'),
+        'href':  url('firefox'),
+        'icon':  static('protocol/img/logos/firefox/logo.svg'),
+        'cta_name': 'Firefox'
+      },
+      links=[
+        {
+          'text':  ftl('sub-navigation-what-is-a-browser'),
+          'href':  url('firefox.browsers.what-is-a-browser'),
+          'cta_name': 'What Is a Browser?'
+        },
+        {
+          'text': ftl('sub-navigation-browsing-history'),
+          'href': 'https://support.mozilla.org/kb/browsing-history-firefox/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=browser-history',
+          'cta_name': 'Browsing History'
+        }
+      ]
+    ) }}
   {% endif %}
 {% endblock %}
 

diff --git a/bedrock/firefox/templates/firefox/browsers/what-is-a-browser.html b/bedrock/firefox/templates/firefox/browsers/what-is-a-browser.html
@@ -4,6 +4,8 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
+{% from "macros.html" import sub_nav with context %}
+
 {% extends "firefox/base/base-protocol.html" %}
 
 {% block page_title %}{{ ftl('what-is-a-browser-what-is-a-web') }}{% endblock %}
@@ -17,21 +19,21 @@
 
 {% block sub_navigation %}
   {% if ftl_has_messages('sub-navigation-firefox', 'sub-navigation-browser-history') %}
-    <nav class="c-sub-navigation">
-      <div class="mzp-l-content">
-        <div class="c-sub-navigation-content">
-          <h2 class="c-sub-navigation-title is-summary">
-            <a href="{{ url('firefox') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Firefox">
-              <img class="c-sub-navigation-icon" src="{{ static('protocol/img/logos/firefox/logo.svg') }}" width="24" height="24" alt="">
-              {{ ftl('sub-navigation-firefox') }}
-            </a>
-          </h2>
-          <ul class="c-sub-navigation-list is-details is-closed">
-            <li class="c-sub-navigation-item"><a href="{{ url('firefox.browsers.browser-history') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Browser History">{{ ftl('sub-navigation-browser-history') }}</a></li>
-          </ul>
-        </div>
-      </div>
-    </nav>
+    {{ sub_nav(
+      title={
+        'text':  ftl('sub-navigation-firefox'),
+        'href':  url('firefox'),
+        'icon':  static('protocol/img/logos/firefox/logo.svg'),
+        'cta_name': 'Firefox'
+      },
+      links=[
+        {
+          'text':  ftl('sub-navigation-browser-history'),
+          'href':  url('firefox.browsers.browser-history'),
+          'cta_name': 'Browser History'
+        }
+      ]
+    ) }}
   {% endif %}
 {% endblock %}
 

diff --git a/bedrock/firefox/templates/firefox/developer/index.html b/bedrock/firefox/templates/firefox/developer/index.html
@@ -4,10 +4,11 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends "firefox/base/base-protocol.html" %}
-
+{% from "macros.html" import sub_nav with context %}
 {% from "macros-protocol.html" import split with context %}
 
+{% extends "firefox/base/base-protocol.html" %}
+
 {% block page_title %}{{ ftl('firefox-developer-page-title') }}{% endblock %}
 {% block page_desc %}{{ ftl('firefox-developer-firefox-developer-edition-desc') }}{% endblock %}
 {% block page_image %}{{ static('protocol/img/logos/firefox/browser/developer/og.png') }}{% endblock %}
@@ -32,23 +33,31 @@
 {% endblock %}
 
 {% block sub_navigation %}
-<nav class="c-sub-navigation">
-  <div class="mzp-l-content">
-    <div class="c-sub-navigation-content">
-      <h2 class="c-sub-navigation-title is-summary">
-        <a href="{{ url('firefox') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Firefox">
-          <img class="c-sub-navigation-icon" src="{{ static('protocol/img/logos/firefox/logo.svg') }}" width="24" height="24" alt="">
-         {{ ftl('sub-navigation-firefox') }}
-        </a>
-      </h2>
-      <ul class="c-sub-navigation-list is-details is-closed">
-        <li class="c-sub-navigation-item"><a href="{{ url('firefox.enterprise.index') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Enterprise">{{ ftl('sub-navigation-enterprise') }}</a></li>
-        <li class="c-sub-navigation-item"><a href="{{ url('firefox.channel.desktop') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Nightly and Beta">{{ ftl('sub-navigation-nightly-and-beta') }}</a></li>
-        <li class="c-sub-navigation-item"><a href="{{ url('firefox.all') }}" data-link-type="nav" data-link-position="subnav" data-link-text="All Languages">{{ ftl('sub-navigation-all-languages', fallback='download-button-systems-languages') }}</a></li>
-      </ul>
-    </div>
-  </div>
-</nav>
+  {{ sub_nav(
+    title={
+      'text':  ftl('sub-navigation-firefox'),
+      'href':  url('firefox'),
+      'icon':  static('protocol/img/logos/firefox/logo.svg'),
+      'cta_name': 'Firefox'
+    },
+    links=[
+      {
+        'text':  ftl('sub-navigation-enterprise'),
+        'href':  url('firefox.enterprise.index'),
+        'cta_name': 'Enterprise'
+      },
+      {
+        'text':  ftl('sub-navigation-nightly-and-beta'),
+        'href':  url('firefox.channel.desktop'),
+        'cta_name': 'Nightly and Beta'
+      },
+      {
+        'text':  ftl('sub-navigation-all-languages', fallback='download-button-systems-languages'),
+        'href':  url('firefox.all'),
+        'cta_name': 'All Languages'
+      }
+    ]
+  ) }}
 {% endblock %}
 
 {% block content %}

diff --git a/bedrock/firefox/templates/firefox/faq.html b/bedrock/firefox/templates/firefox/faq.html
@@ -4,10 +4,11 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends "firefox/base/base-protocol.html" %}
-
+{% from "macros.html" import sub_nav with context %}
 {% from "macros-protocol.html" import split with context %}
 
+{% extends "firefox/base/base-protocol.html" %}
+
 {% block page_title %}{{ ftl('firefox-faq') }}{% endblock %}
 {% block page_desc %}{{ ftl('whether-you-searched-privacy') }}{% endblock %}
 
@@ -18,24 +19,26 @@
 
 {% block sub_navigation %}
   {% if ftl_has_messages('sub-navigation-firefox', 'sub-navigation-what-is-a-browser', 'sub-navigation-browsing-history') %}
-    <nav class="c-sub-navigation">
-      <div class="mzp-l-content">
-        <div class="c-sub-navigation-content">
-          <h2 class="c-sub-navigation-title is-summary">
-            <a href="{{ url('firefox') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Firefox">
-              <img class="c-sub-navigation-icon" src="{{ static('protocol/img/logos/firefox/logo.svg') }}" width="24" height="24" alt="">
-             {{ ftl('sub-navigation-firefox') }}
-            </a>
-          </h2>
-          <ul class="c-sub-navigation-list is-details is-closed">
-            <li class="c-sub-navigation-item">
-              <a href="{{ url('firefox.browsers.what-is-a-browser') }}" data-link-type="nav" data-link-position="subnav" data-link-text="What Is a Browser?">{{ ftl('sub-navigation-what-is-a-browser') }}</a>
-            </li>
-            <li class="c-sub-navigation-item"><a href="{{ url('firefox.browsers.browser-history') }}" data-link-type="nav" data-link-position="subnav" data-link-text="Browser History">{{ ftl('sub-navigation-browser-history') }}</a></li>
-          </ul>
-        </div>
-      </div>
-    </nav>
+    {{ sub_nav(
+      title={
+        'text':  ftl('sub-navigation-firefox'),
+        'href':  url('firefox'),
+        'icon':  static('protocol/img/logos/firefox/logo.svg'),
+        'cta_name': 'Firefox'
+      },
+      links=[
+        {
+          'text':  ftl('sub-navigation-what-is-a-browser'),
+          'href':  url('firefox.browsers.what-is-a-browser'),
+          'cta_name': 'What Is a Browser?'
+        },
+        {
+          'text': ftl('sub-navigation-browser-history'),
+          'href': url('firefox.browsers.browser-history'),
+          'cta_name': 'Browser History'
+        }
+      ]
+    ) }}
   {% endif %}
 {% endblock %}
 

diff --git a/bedrock/firefox/templates/firefox/features/includes/subnav.html b/bedrock/firefox/templates/firefox/features/includes/subnav.html
diff --git a/bedrock/firefox/templates/firefox/includes/sub-nav-firefox.html b/bedrock/firefox/templates/firefox/includes/sub-nav-firefox.html
@@ -5,38 +5,39 @@
   file, You can obtain one at https://mozilla.org/MPL/2.0/.
  #}
 
- {% from "macros.html" import sub_nav with context %}
+{% from "macros.html" import sub_nav with context %}
 
- {{ sub_nav(
+{{ sub_nav(
   title={
     'text':  ftl('sub-navigation-firefox'),
     'href':  url('firefox'),
     'icon':  static('protocol/img/logos/firefox/logo.svg')
   },
-   links=[
-   {
-     'text':  ftl('sub-navigation-desktop') ,
-     'href':  url('firefox.new'),
-     'cta_name': "Desktop"
-   },
-   {
-     'text': ftl('sub-navigation-mobile'),
-     'href': url('firefox.browsers.mobile.index') ,
-     'cta_name': "Mobile"
-   },
-   {
-     'text': ftl('sub-navigation-features'),
-     'href': url('firefox.features.index'),
-     'cta_name': "Features"
-   },
-   {
-     'text': ftl('sub-navigation-compare-browsers'),
-     'href': url('firefox.browsers.compare.index'),
-     'cta_name': "Compare Browsers"
-   },
-   {
-     'text': ftl('sub-navigation-more'),
-     'href': url('firefox.more'),
-     'cta_name': "More"
-   }]
- ) }}
+  links=[
+    {
+      'text':  ftl('sub-navigation-desktop'),
+      'href':  url('firefox.new'),
+      'cta_name': 'Desktop'
+    },
+    {
+      'text': ftl('sub-navigation-mobile'),
+      'href': url('firefox.browsers.mobile.index'),
+      'cta_name': 'Mobile'
+    },
+    {
+      'text': ftl('sub-navigation-features'),
+      'href': url('firefox.features.index'),
+      'cta_name': 'Features'
+    },
+    {
+      'text': ftl('sub-navigation-compare-browsers'),
+      'href': url('firefox.browsers.compare.index'),
+      'cta_name': 'Compare Browsers'
+    },
+    {
+      'text': ftl('sub-navigation-more'),
+      'href': url('firefox.more'),
+      'cta_name': 'More'
+    }
+  ]
+) }}