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 committed Oct 14, 2024
1 parent eac0cbf commit f0feb95
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 100 deletions.
90 changes: 1 addition & 89 deletions bedrock/firefox/templates/firefox/all/base.html
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
95 changes: 95 additions & 0 deletions bedrock/firefox/templates/firefox/all/includes/main.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

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

0 comments on commit f0feb95

Please sign in to comment.