Task default organizations (#136)

* - set default view to Organizations instead of Domains
- removed logic to public and internal view since now we will have same view for internal/public users

* - fix some accessibilities issues

* - put back role=row for TR. If not present, Mobile view doesnt display the green plus button
  in By Organizations page

* - for Accessibility : implement "Skip to main content" link at top of pages ( visible when Tab into focus)

track/static/js/https/domains.js

@@ -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() {
@@ -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",

track/static/js/https/organizations.js

@@ -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>";

track/static/js/tables.js

@@ -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');
+
   });
 });

track/static/scss/base/_base.scss

@@ -24,3 +24,11 @@
 	background-color: #22A7F0;
 }
 
+li a.myskip {
+   color:$dark-gray;
+}
+li a.myskip:focus {
+    color:white;
+    text-decoration:none;
+}
+

track/templates/en/domains.html

@@ -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">
 

track/templates/en/guidance.html

@@ -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/>
 

track/templates/en/help.html

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

track/templates/en/index.html

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

track/templates/en/layout-en.html

@@ -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 }}"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
 {% endif %}
@@ -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>
 
@@ -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>
@@ -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>

track/templates/en/organizations.html

@@ -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">
 

track/templates/fr/domains.html

@@ -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">
 

track/templates/fr/guidance.html

@@ -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/>