Skip to content
This repository has been archived by the owner on Feb 3, 2022. It is now read-only.

Task default organizations #136

Merged
merged 4 commits into from
May 8, 2019
Merged

Task default organizations #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ddc654d
- set default view to Organizations instead of Domains
sayaHub May 1, 2019
4ecafb9
- fix some accessibilities issues
sayaHub May 5, 2019
3f7ea46
- put back role=row for TR. If not present, Mobile view doesnt displa…
sayaHub May 5, 2019
2a18e56
- for Accessibility : implement "Skip to main content" link at top of…
sayaHub May 7, 2019
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
7 changes: 7 additions & 0 deletions track/static/css/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion track/static/css/main.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions track/static/js/https/domains.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,11 +292,11 @@ $(function () {

var showHideText = function(show, row) {
if (loneDomain(row))
return (show ? "<img src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"rotated pb-1 mr-1 h-2\">" + text.show[language] : "<img src=\"/static/images/arrow.png\" class=\"mr-2 h-2\">" + text.hide[language]) + " " + text.details[language];
return (show ? "<img alt='' src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"rotated pb-1 mr-1 h-2\">" + text.show[language] : "<img alt='' src=\"/static/images/arrow.png\" class=\"mr-2 h-2\">" + text.hide[language]) + " " + text.details[language];
else if(row.totals.https.eligible == 1)
return (show ? "<img src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"rotated pb-1 mr-1 h-2\">" + {en: "Show", fr: "Montrer le"}[language] : "<img src=\"/static/images/arrow.png\" class=\"mr-2 h-2\">" + {en: "Hide", fr: "Cacher le"}[language]) + " " + {en: "1", fr:""}[language] + text.subdomain[language];
return (show ? "<img alt='' src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"rotated pb-1 mr-1 h-2\">" + {en: "Show", fr: "Montrer le"}[language] : "<img alt='' src=\"/static/images/arrow.png\" class=\"mr-2 h-2\">" + {en: "Hide", fr: "Cacher le"}[language]) + " " + {en: "1", fr:""}[language] + text.subdomain[language];
else
return (show ? "<img src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"rotated pb-1 mr-1 h-2\">" + text.show[language] : "<img src=\"/static/images/arrow.png\" class=\"mr-2 h-2\">" + text.hide[language]) + " " + row.totals.https.eligible + text.subdomains[language];
return (show ? "<img alt='' src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"rotated pb-1 mr-1 h-2\">" + text.show[language] : "<img alt=''src=\"/static/images/arrow.png\" class=\"mr-2 h-2\">" + text.hide[language]) + " " + row.totals.https.eligible + text.subdomains[language];
};

var initExpansions = function() {
Expand All @@ -321,7 +321,7 @@ $(function () {

if (fetch) {
console.log(text.fetch[language] + base_domain + "...");
link.addClass("loading").html("<img src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"mr-2 h-2\">" + text.loading[language] + base_domain + " services...");
link.addClass("loading").html("<img alt='' src=\"/static/images/arrow.png\" aria-hidden=\"true\" class=\"mr-2 h-2\">" + text.loading[language] + base_domain + " services...");

$.ajax({
url: "/data/hosts/" + base_domain + "/https.json",
Expand Down
2 changes: 1 addition & 1 deletion track/static/js/https/organizations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ $(document).ready(function () {

var link = function(link_text) {
return "" +
"<a href=\"/" + language + "/" + text.domains[language] + "/#" +
"<a aria-label=\""+data+"\" href=\"/" + language + "/" + text.domains[language] + "/#" +
QueryString.stringify({q: row["name_" + language]}) + "\" data-domain=\""+data+"\">" +
link_text +
"</a>";
Expand Down
1 change: 1 addition & 0 deletions track/static/js/tables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,5 +178,6 @@ $(function() {
$('#DataTables_Table_0_filter label').attr('class', 'w-full md:w-2/3');
$('#datatables-search').attr('class', 'border border-solid border-https-dark-gray bg-https-light-gray focus:border-https-blue block md:inline-block h-8 md:ml-6 mb-4 md:mb-8 w-full md:w-3/5 lg:w-3/4');
$('.dataTables_csv').attr('class', 'text-lg md:ml-4 mt-4 md:mt-6');

});
});
8 changes: 8 additions & 0 deletions track/static/scss/base/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,11 @@
background-color: #22A7F0;
}

li a.myskip {
color:$dark-gray;
}
li a.myskip:focus {
color:white;
text-decoration:none;
}

2 changes: 1 addition & 1 deletion track/templates/en/domains.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

{% include 'includes/en/modal.html' %}

<section id="main-content" class="flex-1">
<section id="main-content" class="flex-1" aria-label="main content">

<header class="bg-https-light-gray pt-6">

Expand Down
4 changes: 2 additions & 2 deletions track/templates/en/guidance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
{% block description %}Read guidance.{% endblock description %}

{% block content %}
<section id="main-content" class="flex-1">
<section id="main-content" class="flex-1" aria-labelledby="readguidance">
<div class="container mx-auto items-center sm:w-4/5 xl:w-3/5 mt-6 mb-6">
<h1>Read guidance</h1>
<h1 id='readguidance'>Read guidance</h1>
<p>Help us make government websites more secure. Please complete the following steps to become compliant with the Government of Canada's web security standards. If you have any questions about this process, please <a href="/en/help">contact us</a>.</p>
<br/>

Expand Down
2 changes: 1 addition & 1 deletion track/templates/en/help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block description %}For interpretation of any aspect of Implementing HTTPS for Secure Web Connections: Information Technology Policy Implementation Notice (ITPIN), contact Treasury Board of Canada Secretariat through Public Enquiries.{% endblock description %}

{% block content %}
<section id="main-content" class="flex-1">
<section id="main-content" class="flex-1" aria-label="Get help">
<div class="container mx-auto items-center sm:w-4/5 xl:w-3/5 mt-6">
<h1>Get help</h1>
<h2 class=" mb-4">General public</h2>
Expand Down
11 changes: 5 additions & 6 deletions track/templates/en/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,21 @@

{% block content %}

<section id="main-content" class="flex-1 bg-https-light-gray py-6">
<section id="main-content" class="flex-1 bg-https-light-gray py-6" role="contentinfo" aria-label="Track web security compliance">

<div class="flex flex-col lg:flex-row mx-auto items-center sm:w-4/5 xl:w-3/5">
<div class="flex-1 lg:mr-8 lg:pr-8 mb-4 lg:mb-0">
<h1 class="text-4xl sm:text-5xl mb-6">Track web security compliance</h1>
<h2 class="text-3xl mb-2">Making government websites more secure</h2>
<p class="text-xl">Canadians rely on the Government of Canada to provide secure digital services. A <a class="text-https-blue hover:text-black" href="https://www.canada.ca/en/treasury-board-secretariat/services/information-technology/policy-implementation-notices/implementing-https-secure-web-connections-itpin.html">new policy notice</a> guides government websites to adopt good web security practices. Track how government sites are becoming more secure.</p>

{% if request.headers.get("app-type","internal") == "internal" %}

<div class="flex">
<p class="text-xl mt-2 lg:mt-6"><a href="/en/domains/" class="text-https-blue hover:text-black">Check a government website</a></p>
<object class="ml-2 lg:mt-4" type="image/svg+xml" tabindex="-1" aria-hidden="true" role="none" data="/static/images/cta-arrow.svg"></object>
<p class="text-xl mt-2 lg:mt-6"><a href="/en/organizations/" class="text-https-blue hover:text-black">Check a government website</a></p>
<object class="ml-2 lg:mt-4" type="image/svg+xml" tabindex="-1" aria-hidden="true" data="/static/images/cta-arrow.svg">
<p>right arrow indicating the action to check a government website</p>
</object>
</div>

{% endif %}

</div>

Expand Down
19 changes: 8 additions & 11 deletions track/templates/en/layout-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
{% set GTM_key = "GOOGLE_TAG_MANAGER" | fetch_env() %}
{% if GTM_key %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GTM_key }}"
<noscript role="application" aria-label="script for google tag manager"><iframe src="https://www.googletagmanager.com/ns.html?id={{ GTM_key }}"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JuliannaR can I get your insights on best practice here?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the content informative? It looks like it. I have a feeling that the label might not get read.

It can be an option for user agents that don't support JavaScript depending on the approach however I think we'd need to test if its a useful fallback.
You could provide a functional alternative in the noscript similar to you have done and we test it, however this might cause an issue re: role="application" aria-label="". I can check it out for you.

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endif %}
Expand All @@ -27,12 +27,13 @@

<!-- GOC Identity Bar -->

<section id="goc-fip-bar">
<section id="goc-fip-bar" aria-label="To go to the french page">
<div class="container mx-auto flex">
<div class="flex-1 pt-2 pb-2">
<a href="https://www.canada.ca/en.html" aria-label="Government of Canada">
<object type="image/svg+xml" tabindex="-1" role="img" data="/static/images/fip-dark-en.svg"
aria-label="Symbol of the Government of Canada" class="h-6"></object>
<object type="image/svg+xml" tabindex="-1" role="presentation" data="/static/images/fip-dark-en.svg" class="h-6" aria-label="Symbol of the Government of Canada">
Symbol of the Government of Canada
</object>
</a>
</div>

Expand All @@ -46,13 +47,12 @@ <h2 class="sr-only">Language selection</h2>


<!-- Navigation -->
{% if request.headers.get("app-type","internal") == "internal" %}
<nav class="bg-white border-b border-https-dark-gray">
<nav class="bg-white border-b border-https-dark-gray" aria-label="Main menu">
<div class="container mx-auto flex">
<div class="{{ self.pageid_fr() | site_title(false) }}">
<h2 class="py-6 text-base sm:text-lg hidden md:block"><a class="text-grey-darkest no-underline font-medium hover:underline hover:text-https-blue" href="/en/index/">Track web security compliance</a></h2>
</div>
<div role="navigation" class="flex-1">
<div class="flex-1">
<ul class="list-reset flex justify-end text-base sm:text-lg font-normal">
<li class="py-6 inline xl:hidden">
<a id="menu-btn" class="text-https-blue hover:text-black no-underline hover:underline" href="#">Menu</a>
Expand All @@ -70,11 +70,8 @@ <h2 class="py-6 text-base sm:text-lg hidden md:block"><a class="text-grey-darkes
</div>
</div>
</nav>
{% endif %}



<nav id="menu-content" class="shadow-md">
<nav id="menu-content" class="shadow-md" aria-label="Menu for mobile">
<ul class="list-reset ml-4 mr-2 mt-4 font-normal">
<li class="{{ self.pageid_fr() | site_title(true) }} block py-4 border-b border-https-dark-gray sm:block md:hidden"><a tabindex="-1" class="text-xl text-https-blue no-underline hover:underline" href="/en/index/">Track web security compliance</a></li>
<li class="block border-b border-https-dark-gray py-4"><a tabindex="-1" class="text-xl text-https-blue hover:text-black no-underline hover:underline" href="/en/organizations/">Check compliance</a></li>
Expand Down
2 changes: 1 addition & 1 deletion track/templates/en/organizations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

{% include 'includes/en/modal.html' %}

<section id="main-content" class="flex-1">
<section id="main-content" class="flex-1" aria-label="HTTPS by organization">

<header class="bg-https-light-gray pt-6">

Expand Down
2 changes: 1 addition & 1 deletion track/templates/fr/domains.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

{% include 'includes/fr/modal.html' %}

<section id="main-content" class="flex-1">
<section id="main-content" class="flex-1" aria-label="contenu principal">

<header class="bg-https-light-gray pt-6">

Expand Down
4 changes: 2 additions & 2 deletions track/templates/fr/guidance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
{% block description %}Lires les directives.{% endblock description %}

{% block content %}
<section id="main-content" class="flex-1">
<section id="main-content" class="flex-1" aria-labelledby="readguidance">>
<div class="container mx-auto items-center sm:w-4/5 xl:w-3/5 mt-6 mb-6">
<h1>Lires les directives</h1>
<h1 id="readguidance">Lires les directives</h1>
<p>Aidez-nous à rendre les sites web du gouvernement plus sécuritaires. Veuillez compléter les étapes suivantes afin de respecter les normes de sécurité en ligne du gouvernement du Canada. Si vous avez des questions sur ce processus, <a href="/fr/aide">contactez-nous</a>.</p>
<br/>

Expand Down
Loading