fix firefox/all screen reader flow #15082

bedrock/firefox/templates/firefox/all/base.html

@@ -9,10 +9,6 @@
   {{ ftl('firefox-all-download-the-firefox-v2') }}
 {%- endblock -%}
 
-{%- block page_desc -%}
-  {{ ftl('firefox-all-everyone-deserves-access-v2') }}
-{%- endblock -%}
-
 {% block page_css %}
  {{ css_bundle('firefox_all') }}
 {% endblock %}
@@ -43,7 +39,7 @@
 {% endif %}
 
 {% block content %}
-  {% include 'firefox/all/includes/main.html' %}
+  {% include "firefox/all/includes/main.html" %}
 {% endblock %}
 
 {% block js %}

bedrock/firefox/templates/firefox/all/download.html

@@ -9,7 +9,7 @@
 {% set icon_download ='<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 13c.2 0 .4-.1.5-.2l4.4-4.4-1.1-1.1-3.1 3.1V1H7.2v9.4L4.1 7.3l-1 1.1 4.4 4.4c.1.1.3.2.5.2z" /><path d="M13.5 12v2c0 .3-.2.5-.5.5H3c-.3 0-.5-.2-.5-.5v-2H1v2c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-2h-1.5z" /></svg></span>' %}
 
 {# Show download #}
-<h2 {% if not (product and platform and locale) %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
+<h2 tabindex="-1" {% if not (product and platform and locale) %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
   {{ ftl('firefox-all-download') }}
   {% if product and platform and locale %}
     <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">

bedrock/firefox/templates/firefox/all/includes/main.html

@@ -9,7 +9,7 @@
     <div class="c-product-info" {% if product %} data-current="{{ product.slug }}"{% endif %}>
       <div class="c-intro">
         <h1 class="c-intro-heading">{{ ftl('firefox-all-choose-which-firefox') }}</h1>
-        <p>{{ ftl('firefox-all-everyone-deserves-access-v2', fallback="'firefox-all-everyone-deserves-access") }}</p>
+        <p>{{ ftl('firefox-all-everyone-deserves-access-v2') }}</p>
         {% if product %}
           {% if product.slug == "desktop-release" %}
             <div>

bedrock/firefox/templates/firefox/all/lang.html

@@ -5,7 +5,7 @@
 #}
 
 {# Choose language #}
-<h2 {% if not (product and platform) %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
+<h2 tabindex="-1" {% if not (product and platform) %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
   {{ ftl('firefox-all-language-v2') }}
   {% if product and platform and locale %}
     <span class="c-step-choice">{{ locale_name }}</span>

bedrock/firefox/templates/firefox/all/platform.html

@@ -7,7 +7,7 @@
 
 {# Choose platform #}
 
-<h2 {% if not product %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
+<h2 tabindex="-1" {% if not product %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
   {{ ftl('firefox-all-platform-v2') }}
   {% if product and platform %}
     <span class="c-step-choice">{{ platform_name }}</span>

bedrock/firefox/templates/firefox/all/product.html

@@ -6,7 +6,7 @@
 
 {# Choose product #}
 
-<h2 class="c-step-name">
+<h2 tabindex="-1" class="c-step-name">
   {{ ftl('firefox-all-browser-v2') }}
   {% if product %}
     <span class="c-step-choice">{{ product and product.name }}</span> <a href="{{ url('firefox.all') }}" class="load-content-partial c-step-icon"><img alt="{{ ftl('firefox-all-change-browser') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
@@ -42,7 +42,7 @@ <h3 class="c-product-title"><img alt="" role="presentation" src="{{ static('prot
           <li class="{{ p.slug }}"><a href="{{ url('firefox.all.platforms', product_slug=p.slug) }}" class="load-content-partial">{{ p.name }}</a></li>
         {% endif %}
       {% endfor %}
-      <li class="ios-testflight"><a href="{{ url('firefox.ios.testflight') }}" class="load-content-partial">{{ ftl('firefox-all-product-firefox-ios-testflight') }}</a></li>
+      <li class="ios-testflight"><a href="{{ url('firefox.ios.testflight') }}">{{ ftl('firefox-all-product-firefox-ios-testflight') }}</a></li>
     </ul>
 
     <div id="browser-help" class="c-help mzp-u-modal-content">

media/js/firefox/all/all-init.es6.js

@@ -8,15 +8,19 @@ import TrackProductDownload from '../../base/datalayer-productdownload.es6';
 import MzpModal from '@mozilla-protocol/core/protocol/js/modal';
 
 (function (Mozilla) {
-    function onLoad() {
+    //Getter function since outerHTML replacement in fetchContent breaks existing references
+    function getPartialTargetElement() {
+        return document.getElementById('partial-target');
+    }
+
+    function setUpPartialContentListeners() {
         const browserHelpContent = document.getElementById('browser-help');
         const browserHelpIcon = document.getElementById('icon-browser-help');
         const installerHelpContent = document.getElementById('installer-help');
         const installerHelpIcon = document.querySelectorAll(
             '.icon-installer-help'
         );
         const downloadButtons = document.querySelectorAll('.download-link');
-        const partialTarget = document.getElementById('partial-target');
 
         function showHelpModal(modalContent, modalTitle, eventLabel) {
             MzpModal.createModal(this, modalContent, {
@@ -83,51 +87,65 @@ import MzpModal from '@mozilla-protocol/core/protocol/js/modal';
             }
         }
 
-        // A fetch helper since we use this in both the on click and popstate.
-        // pushState is a boolean so we avoid pushing state if triggered from popstate.
-        function fetchContent(url, pushState = false) {
-            fetch(url, {
-                // Signifies to backend to return partial HTML.
-                headers: { 'X-Requested-With': 'XMLHttpRequest' },
-                // Ignore what's cached and also don't cache this response.
-                // This is so we don't get full html pages when we expect partial html, or vice versa.
-                cache: 'no-store'
-            })
-                .then((response) => {
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    return response.text();
-                })
-                .then((html) => {
-                    partialTarget.innerHTML = html;
-                    if (pushState) {
-                        history.pushState({ path: url }, '', url);
-                    }
-                })
-                .catch((error) => {
-                    throw new Error(
-                        'There was a problem with the fetch operation:',
-                        error
-                    );
-                });
-        }
-
         // Override click events for drill-down links.
-        partialTarget.addEventListener('click', function (event) {
+        getPartialTargetElement().addEventListener('click', function (event) {
             const anchor = event.target.closest('a');
             if (anchor && anchor.matches('.load-content-partial')) {
                 event.preventDefault();
                 fetchContent(anchor.href, true);
             }
         });
+    }
+
+    // A fetch helper since we use this in both the on click and popstate.
+    // pushState is a boolean so we avoid pushing state if triggered from popstate.
+    function fetchContent(url, pushState = false) {
+        fetch(url, {
+            // Signifies to backend to return partial HTML.
+            headers: { 'X-Requested-With': 'XMLHttpRequest' },
+            // Ignore what's cached and also don't cache this response.
+            // This is so we don't get full html pages when we expect partial html, or vice versa.
+            cache: 'no-store'
+        })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.text();
+            })
+            .then((html) => {
+                const partialTarget = getPartialTargetElement();
+                partialTarget.outerHTML = html;
+
+                // Re-attach listeners as we just replaced partialTarget
+                setUpPartialContentListeners();
+
+                if (pushState) {
+                    history.pushState({ path: url }, '', url);
+                }
+
+                const activeHeaders = document.querySelectorAll(
+                    '.c-step-name:not(.t-step-disabled)'
+                );
+                const targetHeader = activeHeaders[activeHeaders.length - 1];
+                targetHeader.focus({ preventScroll: true });
+            })
+            .catch((error) => {
+                throw new Error(
+                    'There was a problem with the fetch operation:',
+                    error
+                );
+            });
+    }
+
+    function onLoad() {
+        setUpPartialContentListeners();
 
         // Add popstate listener so we return partial HTML with browser back button.
         window.addEventListener('popstate', function (event) {
             if (!event.state) {
                 return;
             }
-
             fetchContent(event.state.path, false);
         });