Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explore progressive enhancement of /all for a11y #15293

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Explore progressive enhancement of /all for a11y #15293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 1 addition & 89 deletions bedrock/firefox/templates/firefox/all/base.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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