Skip to content

Revert "All a11y 2 (#774)" #960

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

Closed
maureenlholland wants to merge 1 commit into from
Closed

Revert "All a11y 2 (#774)" #960

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
75 changes: 1 addition & 74 deletions media/js/firefox/all/all-init.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@ import TrackProductDownload from '../../base/datalayer-productdownload.es6';
import MzpModal from '@mozilla-protocol/core/protocol/js/modal';

(function (Mozilla) {
// Getter function since outerHTML replacement in fetchContent breaks existing references
function getPartialTargetElement() {
return document.getElementById('partial-target');
}

function setUpPartialContentListeners() {
function onLoad() {
const browserHelpContent = document.getElementById('browser-help');
const browserHelpIcon = document.getElementById('icon-browser-help');
const installerHelpContent = document.getElementById('installer-help');
Expand Down Expand Up @@ -86,74 +81,6 @@ import MzpModal from '@mozilla-protocol/core/protocol/js/modal';
);
}
}

// Override click events for drill-down links.
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);
});

// Ensure initial state is set up when the page loads so root page is in popstate.
window.addEventListener('DOMContentLoaded', () => {
const url = window.location.href;
history.replaceState({ path: url }, '', url);
});
}

Mozilla.run(onLoad);
Expand Down
94 changes: 93 additions & 1 deletion springfield/firefox/templates/firefox/all/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
{{ 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 %}
Expand Down Expand Up @@ -42,7 +46,95 @@
{% endif %}

{% block content %}
{% include 'firefox/all/includes/main.html' %}
<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/{{ params }}">{{ 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/{{ params }}">{{ 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/{{ params }}">{{ 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/{{ params }}">{{ 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/{{ params }}">{{ 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="https://www.mozilla.org/{{ LANG }}/privacy/firefox/{{ params }}">{{ ftl('firefox-all-firefox-privacy-notice') }}</a></li>
<li><a href="https://support.mozilla.org/products/{{ params }}&utm_content=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>
{% endblock %}

{% block js %}
Expand Down
2 changes: 1 addition & 1 deletion springfield/firefox/templates/firefox/all/download.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{% set icon_download ='<span class="mzp-c-button-icon-end"><svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h16v16h-16z"/></clipPath><g clip-path="url(#a)" fill="currentColor"><path d="m7.2507 0v10.21l-3.72-3.72-1.06 1.06 5.53 5.53 5.53-5.53-1.06-1.06-3.72 3.72v-10.21z"/><path d="m16 14.5h-16v1.5h16z"/></g></svg></span>' %}

{# Show download #}
<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 %}>
<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 %}>
{{ 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">
Expand Down
95 changes: 0 additions & 95 deletions springfield/firefox/templates/firefox/all/includes/main.html
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions springfield/firefox/templates/firefox/all/lang.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
#}

{# Choose language #}
<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 %}>
<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 %}>
{{ ftl('firefox-all-language-v2') }}
{% 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="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>
<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>
{% 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 tabindex="-1" {% if not (product and platform) %} class="c-step-name t-step-
<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) }}" class="load-content-partial">{{ name }}</a></li>
<li><a href="{{ url('firefox.all.download', product_slug=product.slug, platform=platform, locale=locale) }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div>
Expand Down
6 changes: 3 additions & 3 deletions springfield/firefox/templates/firefox/all/platform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@

{# Choose platform #}

<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 %}>
<h2 {% 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>
{% if product.slug.startswith('desktop') %}
<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>
<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>
{% 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 tabindex="-1" {% if not product %} class="c-step-name t-step-disabled" aria-
<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) }}" class="load-content-partial">{{ name }}</a></li>
<li><a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}">{{ name }}</a></li>
{% endfor %}
</ul>
<div id="installer-help" class="c-help mzp-u-modal-content">
Expand Down
Loading