Skip to content

Commit

Permalink
Explore progressive enhancement of /all for a11y
Browse files Browse the repository at this point in the history
  • Loading branch information
@robhudson
robhudson committed Oct 14, 2024
1 parent eac0cbf commit 29b7fe6
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 100 deletions.
90 changes: 1 addition & 89 deletions bedrock/firefox/templates/firefox/all/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,95 +43,7 @@
{% endif %}

{% block content %}
<main>
<div class="mzp-l-content">
<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>{{ self.page_desc() }}</p>
{% if product %}
{% if product.slug == "desktop-release" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'release') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'release') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-beta" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'beta') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'beta') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-developer" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'alpha') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'alpha') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-nightly" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'nightly') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'nightly') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-esr" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'organizations') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'organizations') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "android-beta" %}
<div>
<ul>
<li><a href="{{ firefox_url('android', 'sysreq', 'beta') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('android', 'notes', 'beta') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
</ul>
</div>
{% elif product.slug in ["mobile-release", "android-release", "ios-release"] %}
<div>
{% if product.slug in ["android-release", "mobile-release"] %}
Android:
<ul>
<li><a href="{{ firefox_url('android', 'sysreq', 'release') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('android', 'notes', 'release') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
</ul>
{% endif %}
{% if product.slug in ["ios-release", "mobile-release"] %}
iOS:
<ul>
<li><a href="{{ firefox_url('ios', 'sysreq', 'release') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('ios', 'notes', 'release') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
</ul>
{% endif %}
</div>
{% endif %}
{% endif %}
<div class="c-support-links">
<ul>
<li><a href="{{ url('privacy.notices.firefox') }}">{{ ftl('firefox-all-firefox-privacy-notice') }}</a></li>
<li><a href="https://support.mozilla.org/products/?utm_source=mozilla.org&utm_medium=referral&utm_campaign=need-help-link">{{ ftl('firefox-all-need-help') }}</a></li>
</ul>
</div>
</div>
<div class="c-steps">
{% include 'firefox/all/product.html' %}
{% include 'firefox/all/platform.html' %}
{% include 'firefox/all/lang.html' %}
{% include 'firefox/all/download.html' %}
</div>
</div>
</div>
</main>
{% include 'firefox/all/includes/main.html' %}
{% endblock %}

{% block js %}
Expand Down
89 changes: 89 additions & 0 deletions bedrock/firefox/templates/firefox/all/includes/main.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<main id="partial-target">
<div class="mzp-l-content">
<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>
{% if product %}
{% if product.slug == "desktop-release" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'release') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'release') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-beta" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'beta') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'beta') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-developer" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'alpha') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'alpha') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-nightly" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'nightly') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'nightly') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "desktop-esr" %}
<div>
<ul>
<li><a href="{{ firefox_url('desktop', 'sysreq', 'organizations') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('desktop', 'notes', 'organizations') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
<li><a href="https://firefox-source-docs.mozilla.org/">{{ ftl('firefox-all-source-code') }}</a></li>
</ul>
</div>
{% elif product.slug == "android-beta" %}
<div>
<ul>
<li><a href="{{ firefox_url('android', 'sysreq', 'beta') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('android', 'notes', 'beta') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
</ul>
</div>
{% elif product.slug in ["mobile-release", "android-release", "ios-release"] %}
<div>
{% if product.slug in ["android-release", "mobile-release"] %}
Android:
<ul>
<li><a href="{{ firefox_url('android', 'sysreq', 'release') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('android', 'notes', 'release') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
</ul>
{% endif %}
{% if product.slug in ["ios-release", "mobile-release"] %}
iOS:
<ul>
<li><a href="{{ firefox_url('ios', 'sysreq', 'release') }}">{{ ftl('firefox-all-check-the-system-requirements') }}</a></li>
<li><a href="{{ firefox_url('ios', 'notes', 'release') }}">{{ ftl('firefox-all-release-notes') }}</a></li>
</ul>
{% endif %}
</div>
{% endif %}
{% endif %}
<div class="c-support-links">
<ul>
<li><a href="{{ url('privacy.notices.firefox') }}">{{ ftl('firefox-all-firefox-privacy-notice') }}</a></li>
<li><a href="https://support.mozilla.org/products/?utm_source=mozilla.org&utm_medium=referral&utm_campaign=need-help-link">{{ ftl('firefox-all-need-help') }}</a></li>
</ul>
</div>
</div>
<div class="c-steps">
{% include 'firefox/all/product.html' %}
{% include 'firefox/all/platform.html' %}
{% include 'firefox/all/lang.html' %}
{% include 'firefox/all/download.html' %}
</div>
</div>
</div>
</main>
4 changes: 2 additions & 2 deletions bedrock/firefox/templates/firefox/all/lang.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h2 {% if not (product and platform) %} class="c-step-name t-step-disabled" aria
{% if product and platform and locale %}
<span class="c-step-choice">{{ locale_name }}</span>
{% if product.slug.startswith('desktop') and platform != "win-store" %}
<a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-language') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
<a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}" class="load-content-partial c-step-icon"><img alt="{{ ftl('firefox-all-change-language') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
{% endif %}
{% elif product and platform %}
<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
Expand All @@ -24,7 +24,7 @@ <h2 {% if not (product and platform) %} class="c-step-name t-step-disabled" aria
<h3 class="c-step-prompt">{{ ftl('firefox-all-select-your-preferred-language') }}<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30"></h3>
<ul class="c-lang-list">
{% for locale, name in locales %}
<li><a href="{{ url('firefox.all.download', product_slug=product.slug, platform=platform, locale=locale) }}">{{ name }}</a></li>
<li><a href="{{ url('firefox.all.download', product_slug=product.slug, platform=platform, locale=locale) }}" class="load-content-partial">{{ name }}</a></li>
{% endfor %}
</ul>
</div>
Expand Down
4 changes: 2 additions & 2 deletions bedrock/firefox/templates/firefox/all/platform.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h2 {% if not product %} class="c-step-name t-step-disabled" aria-disabled="true
{% if product and platform %}
<span class="c-step-choice">{{ platform_name }}</span>
{% if product.slug.startswith('desktop') %}
<a href="{{ url('firefox.all.platforms', product_slug=product.slug) }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-platform') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
<a href="{{ url('firefox.all.platforms', product_slug=product.slug) }}" class="load-content-partial c-step-icon"><img alt="{{ ftl('firefox-all-change-platform') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
{% endif %}
{% elif product %}
<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
Expand All @@ -31,7 +31,7 @@ <h2 {% if not product %} class="c-step-name t-step-disabled" aria-disabled="true
<div class="c-step-contents">
<ul class="c-platform-list">
{% for platform, name in platforms %}
<li><a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}">{{ name }}</a></li>
<li><a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}" class="load-content-partial">{{ name }}</a></li>
{% endfor %}
</ul>
<div id="installer-help" class="c-help mzp-u-modal-content">
Expand Down
12 changes: 6 additions & 6 deletions bedrock/firefox/templates/firefox/all/product.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<h2 class="c-step-name">
{{ ftl('firefox-all-browser-v2', fallback='firefox-all-browser') }}
{% if product %}
<span class="c-step-choice">{{ product and product.name }}</span> <a href="{{ url('firefox.all') }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-browser') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
<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>
{% else %}
<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
{% endif %}
Expand All @@ -25,24 +25,24 @@ <h2 class="c-step-name">
<div class="c-step-contents">
<h3 class="c-product-title"><img alt="" role="presentation" src="{{ static('protocol/img/icons/desktop.svg') }}"> {{ ftl('firefox-all-desktop') }}</h3>
<ul class="c-product-list qa-desktop-list">
<li class="release"><a href="{{ url('firefox.all.platforms', product_slug='desktop-release') }}">{{ ftl('firefox-all-product-firefox') }}</a> <strong>{{ ftl('firefox-all-recommended') }}</strong></li>
<li class="release"><a href="{{ url('firefox.all.platforms', product_slug='desktop-release') }}" class="load-content-partial">{{ ftl('firefox-all-product-firefox') }}</a> <strong>{{ ftl('firefox-all-recommended') }}</strong></li>
{% for p in products %}
{% if p.slug.startswith('desktop') and not p.slug.endswith('release') %}
<li class="{{ p.slug }}"><a href="{{ url('firefox.all.platforms', product_slug=p.slug) }}">{{ p.name }}</a></li>
<li class="{{ p.slug }}"><a href="{{ url('firefox.all.platforms', product_slug=p.slug) }}" class="load-content-partial">{{ p.name }}</a></li>
{% endif %}
{% endfor %}
</ul>

<h3 class="c-product-title"><img alt="" role="presentation" src="{{ static('protocol/img/icons/mobile.svg') }}"> {{ ftl('firefox-all-mobile') }}</h3>

<ul class="c-product-list qa-mobile-list">
<li class="release"><a href="{{ url('firefox.all.platforms', product_slug='mobile-release') }}">{{ ftl('firefox-all-product-firefox') }}</a> <strong>{{ ftl('firefox-all-recommended') }}</strong></li>
<li class="release"><a href="{{ url('firefox.all.platforms', product_slug='mobile-release') }}" class="load-content-partial">{{ ftl('firefox-all-product-firefox') }}</a> <strong>{{ ftl('firefox-all-recommended') }}</strong></li>
{% for p in products %}
{% if p.slug.startswith('android') and not p.slug.endswith('release')%}
<li class="{{ p.slug }}"><a href="{{ url('firefox.all.platforms', product_slug=p.slug) }}">{{ p.name }}</a></li>
<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') }}">{{ ftl('firefox-all-product-firefox-ios-testflight') }}</a></li>
<li class="ios-testflight"><a href="{{ url('firefox.ios.testflight') }}" class="load-content-partial">{{ ftl('firefox-all-product-firefox-ios-testflight') }}</a></li>
</ul>

<div id="browser-help" class="c-help mzp-u-modal-content">
Expand Down
5 changes: 4 additions & 1 deletion bedrock/firefox/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,10 @@ class MobileRelease:
platform_name = None
locale_name = None
download_url = None
template_name = "firefox/all/base.html"
if request.headers.get("X-Requested-With") == "XMLHttpRequest":
template_name = "firefox/all/includes/main.html"
else:
template_name = "firefox/all/base.html"
lang_multi = ftl("firefox-all-lang-multi", ftl_files=ftl_files)

if product:
Expand Down
53 changes: 53 additions & 0 deletions media/js/firefox/all/all-init.es6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import MzpModal from '@mozilla-protocol/core/protocol/js/modal';
'.icon-installer-help'
);
const downloadButtons = document.querySelectorAll('.download-link');
const partialTarget = document.getElementById('partial-target');

function showHelpModal(modalContent, modalTitle, eventLabel) {
MzpModal.createModal(this, modalContent, {
Expand Down Expand Up @@ -81,6 +82,58 @@ 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 => {
console.error('There was a problem with the fetch operation:', error);

Check failure on line 109 in media/js/firefox/all/all-init.es6.js

View workflow job for this annotation

GitHub Actions / test-js 

Unexpected console statement
});

}

// Override click events for drill-down links.
partialTarget.addEventListener('click', function(event) {
const anchor = event.target.closest('a');
if (anchor && anchor.matches('.load-content-partial')) {
event.preventDefault();
fetchContent(anchor.href, true);
}
});

// 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);
});

// Ensure initial state is set up when the page loads so root page is in popstate.
window.addEventListener('DOMContentLoaded', (event) => {

Check failure on line 133 in media/js/firefox/all/all-init.es6.js

View workflow job for this annotation

GitHub Actions / test-js 

'event' is defined but never used
const url = window.location.href;
history.replaceState({ path: url }, '', url);
});
}

Mozilla.run(onLoad);
Expand Down

0 comments on commit 29b7fe6

Please sign in to comment.