still wip, continue fixing html-validate errors intranet-top

src/gcintranet/appFooter.ejs

@@ -8,20 +8,20 @@
  * @param? cdnEnv Used to switch between qat, nonprod, and prod CDN implementations.
 -%>
 <%_ if (pr.showFeatures == true) { -%>
-    <section class="ajaxed-in" data-ajax-replace="<%- wet.builder.environment(pr.cdnEnv) %>cdts/ajax/<^- msg('activities-footer-eng.html') ^>"></section>
+    <section class="ajaxed-in" data-ajax-replace="<%- wet.builder.environment(pr.cdnEnv) %>cdts/ajax/<^- msg('activities-footer-eng.html') ^>" aria-label="<^- msg('activities-footer-eng.html') ^>"></section>
 <%_ } -%>
 <footer role="contentinfo" id="wb-info">
     <%_ if (pr.footerSections != null) { -%>
-        <nav role="navigation" class="container wb-navcurr">
-            <h2 class="wb-inv"><^- msg('Related links') ^></h2>
+        <nav role="navigation" class="container wb-navcurr" aria-labelledby="cdts-relatedLinks">
+            <h2 class="wb-inv" id="cdts-relatedLinks"><^- msg('Related links') ^></h2>
             <div class="row">
                 <%_ for (var sectionIndex=0; sectionIndex<pr.footerSections.length; sectionIndex++) {
                     const footerSection=pr.footerSections[sectionIndex];-%>
                     <%_ if (footerSection.customFooterLinks != null) { -%>
                         <%_ if (sectionIndex < 3) { -%>
-                            <section class="col-md-3 col-sm-6 col-lg-3">
+                            <section class="col-md-3 col-sm-6 col-lg-3" aria-labelledby="cdts-footerSectionLinks">
                                 <%_ if (footerSection.sectionName != null) { -%>
-                                    <h3><%= footerSection.sectionName %></h3>
+                                    <h3 id="cdts-footerSectionLinks"><%= footerSection.sectionName %></h3>
                                 <%_ } -%>
                                 <ul class="list-unstyled">
                                     <%_ for (var linkIndex=0; linkIndex<footerSection.customFooterLinks.length; linkIndex++) {

src/gcintranet/top.ejs

@@ -58,7 +58,7 @@ if (pr.subTheme === 'eccc') {
         <div id="app-brand">
             <div class="container">
                 <div class="row">
-                    <section class="<%- (pr.intranetTitle != null || pr.subTheme != null)? 'col-lg-6 col-md-6': 'col-lg-2 col-md-3' %> col-sm-9 col-xs-8" aria-label="cdts-intranetTitle">
+                    <section class="<%- (pr.intranetTitle != null || pr.subTheme != null)? 'col-lg-6 col-md-6': 'col-lg-2 col-md-3' %> col-sm-9 col-xs-8" aria-label="<^- msg('intranet') ^>">
                         <div class="app-name<%- (pr.intranetTitle != null)? ' app-name-lg': '' %>">
                             <%_ if (pr.intranetTitle != null && pr.intranetTitle.length > 0) {
                                 const item=pr.intranetTitle[0]; -%>
@@ -80,16 +80,16 @@ if (pr.subTheme === 'eccc') {
                         </div>
                     </section>
                     <%_ if (pr.GCToolsModal == true) { -%>
-                        <section id="gctoolsSection" class="<%- (pr.intranetTitle != null)? 'col-lg-2': 'col-lg-6' %><%- (pr.search == false)? ' col-md-offset-3': ''%> col-md-1 hidden-sm hidden-xs text-right">
-                            <h2 class="wb-inv"><^- msg('GCTools links') ^></h2>
+                        <section id="gctoolsSection" class="<%- (pr.intranetTitle != null)? 'col-lg-2': 'col-lg-6' %><%- (pr.search == false)? ' col-md-offset-3': ''%> col-md-1 hidden-sm hidden-xs text-right" aria-labelledby="cdts-hiddenGcToolsLinks">
+                            <h2 class="wb-inv" id="cdts-hiddenGcToolsLinks"><^- msg('GCTools links') ^></h2>
                             <div class="row">
                                 <div class="col-md-12">
                                     <ul class="list-inline margin-bottom-none gcbarlng">
                                         <li><a class="wb-lbx" href="#gctools"><^- msg('<span class="bold-gc">GC</span>Tools') ^></a></li>
                                     </ul>
                                 </div>
                             </div>
-                            <section id="gctools" class="mfp-hide modal-dialog modal-content overlay-def" aria-label="cdts-intraGctools">
+                            <section id="gctools" class="mfp-hide modal-dialog modal-content overlay-def" aria-label="<^- msg('GC Tools') ^>">
                                 <header class="modal-header">
                                     <h2 class="modal-title"><^- msg('<span class="bold-gc">GC</span>Tools') ^></h2>
                                 </header>
@@ -106,7 +106,7 @@ if (pr.subTheme === 'eccc') {
                             </section>
                         </section>
                     <%_ } else if (pr.intranetTitle == null) { /* (...== null) is intentional, not (...!= null) */-%>
-                        <section id="wb-gctools" class="col-lg-6 visible-lg" aria-label="cdts-webGctools">
+                        <section id="wb-gctools" class="col-lg-6 visible-lg" aria-label="<^- msg('GCTools links') ^>">
                             <div class="pull-left tool-link">
                                 <a href="<^- msg('https://gcconnex.gc.ca/splash/') ^>" class="<^- msg('GCTBannerOnclick-eng') ^>">
                                 <^- msg('<span class="bold-gc">GC</span>connex') ^></a>
@@ -126,8 +126,8 @@ if (pr.subTheme === 'eccc') {
                         </section>
                     <%_ } -%>
                     <%_ if (pr.lngLinks != null) { -%>
-                        <section id="wb-lng" class="<%- (pr.intranetTitle != null && pr.GCToolsModal != true)? 'mrgn-bttm-md col-md-offset-1 col-lg-offset-2 ': '' %>col-md-1 hidden-sm hidden-xs text-right <%- (pr.search == false)? 'lang-no-search': (pr.subTheme == 'esdc' || pr.GCToolsModal == true)? '': 'lang-with-search'%>">
-                            <h2 class="wb-inv"><^- msg('Language selection') ^></h2>
+                        <section id="wb-lng" class="<%- (pr.intranetTitle != null && pr.GCToolsModal != true)? 'mrgn-bttm-md col-md-offset-1 col-lg-offset-2 ': '' %>col-md-1 hidden-sm hidden-xs text-right <%- (pr.search == false)? 'lang-no-search': (pr.subTheme == 'esdc' || pr.GCToolsModal == true)? '': 'lang-with-search'%>" aria-labelledby="cdts-languageSelection">
+                            <h2 class="wb-inv" id="cdts-languageSelection"><^- msg('Language selection') ^></h2>
                             <div class="row">
                                 <div class="col-md-12">
                                     <ul class="list-inline margin-bottom-none gcbarlng">
@@ -180,9 +180,9 @@ if (pr.subTheme === 'eccc') {
                             <%_ } -%>
                         </section>
                     <%_ } -%>
-                    <section id="wb-glb-mn" class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs" aria-label="cdts-searchAndMenu">
+                    <section id="wb-glb-mn" class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs" aria-labelledby="cdts-menu">
                         <%_ var pluralSuffix = (pr.topSecMenu != null)? 's': ''; -%>
-                        <h2><%_ if (pr.search == false) { -%><^- msg('Menu') ^><%- pluralSuffix %><%_ } else { -%><^- msg('Search and menu') ^><%- pluralSuffix %><%_ } -%></h2>
+                        <h2 id="cdts-menu"><%_ if (pr.search == false) { -%><^- msg('Menu') ^><%- pluralSuffix %><%_ } else { -%><^- msg('Search and menu') ^><%- pluralSuffix %><%_ } -%></h2>
                         <ul class="list-inline text-right chvrn">
                             <li><a href="#mb-pnl" title="<%_ if (pr.search == false) { -%><^- msg('Menu') ^><%- pluralSuffix %><%_ } else { -%><^- msg('Search and menu') ^><%- pluralSuffix %><%_ } -%>" aria-controls="mb-pnl" class="overlay-lnk" role="button">
                                 <%_ if (pr.search != false) { -%><span class="glyphicon glyphicon-search"><%_ } -%>
@@ -210,7 +210,7 @@ if (pr.subTheme === 'eccc') {
     </div>
     <%_ if (pr.siteMenu != false) { -%>
         <%_ if (pr.subTheme == 'esdc' || pr.subTheme == 'labour') { -%>
-            <nav role="navigation" id="wb-sm" data-wb-ajax='{"url": "<%- (pr.menuPath != null)? pr.menuPath: '/app/cls/WET/global/<^- msg('esdcmenu-eng.html') ^>' %>", "type": "replace", "nocache": true }' data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="cdts-esdcLabourMenu">
+            <nav role="navigation" id="wb-sm" data-wb-ajax='{"url": "<%- (pr.menuPath != null)? pr.menuPath: '/app/cls/WET/global/<^- msg('esdcmenu-eng.html') ^>' %>", "type": "replace", "nocache": true }' data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="cdts-esdcLabourMenu" aria-label="<^- msg('Topics menu') ^>">
                 <div class="container nvbar">
                     <h2><^- msg('Topics menu') ^></h2>
                     <div class="row">
@@ -230,7 +230,7 @@ if (pr.subTheme === 'eccc') {
             </nav>
         <%_ } else if (pr.subTheme == 'eccc') { -%>
             <%# Todo: Change with eccc Menu -%>
-            <nav role="navigation" id="wb-sm" data-wb-ajax='{"url": "<%- (pr.menuPath != null)? pr.menuPath: wet.builder.environment(pr.cdnEnv) + 'cdts/ajax/<^- msg('sitemenu-eng.html') ^>' %>", "type": "replace", "nocache": true }' data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="cdts-ecccMenu">
+            <nav role="navigation" id="wb-sm" data-wb-ajax='{"url": "<%- (pr.menuPath != null)? pr.menuPath: wet.builder.environment(pr.cdnEnv) + 'cdts/ajax/<^- msg('sitemenu-eng.html') ^>' %>", "type": "replace", "nocache": true }' data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="<^- msg('Topics menu') ^>">
                 <div class="container nvbar">
                     <h2><^- msg('Topics menu') ^></h2>
                     <div class="row">
@@ -251,7 +251,7 @@ if (pr.subTheme === 'eccc') {
                 </div>
             </nav>
         <%_ } else { -%>
-            <nav role="navigation" id="wb-sm" data-ajax-replace="<%- wet.builder.environment(pr.cdnEnv) %>cdts/ajax/<^- msg('sitemenu-eng.html') ^>" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="cdts-webMenu">
+            <nav role="navigation" id="wb-sm" data-ajax-replace="<%- wet.builder.environment(pr.cdnEnv) %>cdts/ajax/<^- msg('sitemenu-eng.html') ^>" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="<^- msg('Topics menu') ^>">
                 <div class="container nvbar">
                     <h2><^- msg('Topics menu') ^></h2>
                     <div class="row">
@@ -267,8 +267,8 @@ if (pr.subTheme === 'eccc') {
         <%_ } -%>
     <%_ } -%>
     <%_ if (pr.breadcrumbs != false) { -%>
-        <nav role="navigation" id="wb-bc" property="breadcrumb" aria-label="cdts-breadcrumbTrail">
-            <h2><^- msg('You are here:') ^></h2>
+        <nav role="navigation" id="wb-bc" property="breadcrumb" aria-labelledby="cdts-breadcrumb">
+            <h2 id="cdts-breadcrumb"><^- msg('You are here:') ^></h2>
             <div class="container">
                 <ol class="breadcrumb">
                     <%_ if (pr.breadcrumbs != null) { -%>

src/gcintranet/wet-messages.en.json

@@ -365,6 +365,10 @@
         "source": "Section menu",
         "target": null
     },
+    "5a4356b4e754ea9c3775e8c156860a6e18ab6b54": {
+        "source": "GC Tools",
+        "target": null
+    },
     "f43ac2b672a1db811dd7168a1e7cc1add2fb79b0": {
         "source": "esdcmenu-eng.html",
         "target": null

src/gcintranet/wet-messages.fr.json

@@ -444,5 +444,9 @@
     "d8cde1c29b61c58e4ef757161e59991a22d66763": {
         "source": "Activities and initiatives",
         "target": "Activités et initiatives"
+    },
+    "5a4356b4e754ea9c3775e8c156860a6e18ab6b54": {
+        "source": "GC Tools",
+        "target": "Outils GC"
     }
 }

src/gcweb/appTop.ejs

@@ -50,8 +50,8 @@
     <div id="wb-bnr" class="container">
         <div class="row">
             <%_ if (pr.lngLinks != null) { -%>
-                <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
-                    <h2 class="wb-inv"><^- msg('Language selection') ^></h2>
+                <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right" aria-labelledby="cdts-languageLinks">
+                    <h2 class="wb-inv" id="cdts-languageLinks"><^- msg('Language selection') ^></h2>
                     <ul class="list-inline mrgn-bttm-0">
                         <%_ for (var linkIndex=0; linkIndex<pr.lngLinks.length; linkIndex++) {
                             const link=pr.lngLinks[linkIndex];-%>
@@ -74,9 +74,9 @@
             </div>
             <%_ if (pr.customSearch != null && pr.customSearch.length > 0) {
                 const item=pr.customSearch[0]; -%>
-                <section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4 visible-md visible-lg">
+                <section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4 visible-md visible-lg" aria-labell="<^- msg('Search') ^>">
                     <h2><^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %></h2>
-                    <form action="<%= item.action %>" method="<%= item.method %>" name="cse-search-box" role="search">
+                    <form action="<%= item.action %>" method="<%= item.method %>" name="cse-search-box" role="search" aria-label="<^- msg('Search') ^>">
                         <div class="form-group wb-srch-qry">
                             <label for="<%= item.id != null? item.id: 'wb-srch-q' %>" class="wb-inv"><^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %></label>
                             <input id="<%= item.id != null? item.id: 'wb-srch-q' %>" class="wb-srch-q form-control" name="<%= item.name != null? item.name: 'q' %>" type="search" value="" size="34" maxlength="170" placeholder="<^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %>">
@@ -99,7 +99,7 @@
         <div class="container">
             <div class="row">
                 <%_ if (pr.appSettings != null || pr.signOut != null || pr.signIn != null) { -%>
-                    <section class="col-xs-12 col-sm-7">
+                    <section class="col-xs-12 col-sm-7" aria-label="<^- msg('Name of Web application') ^>">
                 <%_ } else if (pr.headerMenu != null) { -%>
                     <section class="col-xs-12 col-sm-9 cdts-app-title-menu">
                 <%_ } else { -%>
@@ -138,7 +138,7 @@
                     </nav>
                 <%_ } -%>
                 <%_ if (pr.appSettings != null || pr.signOut != null || pr.signIn != null) { -%>
-                    <nav class="col-sm-5 hidden-xs hidden-print">
+                    <nav class="col-sm-5 hidden-xs hidden-print" aria-label="<^- msg('Account menu') ^>">
                         <h2 class="wb-inv"><^- msg('Account menu') ^></h2>
                         <ul class="app-list-account list-unstyled">
                             <%_ if (pr.appSettings != null && pr.appSettings.length > 0) {
@@ -165,7 +165,7 @@
     <%_ if (pr.customSearch != null || pr.menuPath != null || pr.menuLinks != null || pr.topSecMenu == true || pr.appSettings != null || pr.signOut != null || pr.signIn != null) { -%>
         <div class="app-bar-mb container visible-xs-block hidden-print">
             <%_ if (pr.customSearch != null || pr.menuPath != null || pr.menuLinks != null || pr.topSecMenu == true) { -%>
-                <nav>
+                <nav aria-label="<^- msg('and search') ^>">
                     <h2 class="wb-inv"><%_ if (pr.menuPath != null || pr.menuLinks != null || pr.topSecMenu == true) { -%>Menu<%= (pr.customSearch != null)? ' <^- msg('and search') ^>': ''%><%_ } else { -%><^- msg('Search') ^><%_ } -%></h2>
                     <ul class="app-list-main list-unstyled">
                         <%_ if (pr.menuPath != null || pr.menuLinks != null || pr.topSecMenu == true) { -%><li class="wb-mb-links" id="wb-glb-mn"><a href="#mb-pnl" aria-controls="mb-pnl" class="btn overlay-lnk" role="button"><^- msg('Menu') ^></a><h2><^- msg('Menu') ^></h2></li><%_ } -%>
@@ -174,12 +174,12 @@
                     <div id="mb-pnl"></div>
                     <%_ if (pr.customSearch != null && pr.customSearch.length > 0) {
                         const item=pr.customSearch[0]; -%>
-                        <section id="app-srch-mb" class="wb-overlay modal-content overlay-def wb-bar-t">
+                        <section id="app-srch-mb" class="wb-overlay modal-content overlay-def wb-bar-t" arial-label="<^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %>">
                             <div class="modal-header">
                                 <h3 class="modal-title"><^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %></h3>
                             </div>
                             <div class="modal-body">
-                                <form action="<%= item.action %>" method="<%= item.method %>" name="cse-search-box" role="search" class="form-inline">
+                                <form action="<%= item.action %>" method="<%= item.method %>" name="cse-search-box" role="search" class="form-inline" aria-label="<^- msg('Search') ^>">
                                     <div class="input-group">
                                         <label for="<%= item.id != null? 'app-' + item.id: 'app-srch-q-mb' %>" class="wb-inv"><^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %></label>
                                         <input placeholder="<^- msg('Search') ^><%= item.placeholder != null? ' ' + item.placeholder: '' %>" id="<%= item.id != null? 'app-' + item.id: 'app-srch-q-mb' %>" class="app-srch-q-mb form-control" name="q" type="search" value="" size="27" maxlength="150">
@@ -198,7 +198,7 @@
                 </nav>
             <%_ } -%>
             <%_ if (pr.appSettings != null || pr.signOut != null || pr.signIn != null) { -%>
-            <nav>
+            <nav aria-label="<^- msg('Account menu') ^>">
                 <h2 class="wb-inv"><^- msg('Account menu') ^></h2>
                 <ul class="app-list-account list-unstyled">
                     <%_ if (pr.appSettings != null && pr.appSettings.length > 0) {
@@ -222,9 +222,9 @@
         </div>
 
         <%_ if (pr.menuLinks != null) { -%>
-            <nav id="wb-sm" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-labelledby="appNavMenu">
+            <nav id="wb-sm" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement" aria-label="<^- msg('Main navigation menu') ^>">
                 <div class="pnl-strt container nvbar">
-                    <h2 class="wb-inv" id="appNavMenu"><^- msg('Main navigation menu') ^></h2>
+                    <h2 class="wb-inv"><^- msg('Main navigation menu') ^></h2>
                     <div class="row">
                         <ul class="list-inline menu" role="menubar">
                             <%_ for (var menuLinkIndex=0; menuLinkIndex<pr.menuLinks.length; menuLinkIndex++) {
@@ -256,8 +256,8 @@
         <%_ } -%>
     <%_ } -%>
     <%_ if (pr.breadcrumbs != null) { -%>
-        <nav id="wb-bc" property="breadcrumb">
-            <h2><^- msg('You are here:') ^></h2>
+        <nav id="wb-bc" property="breadcrumb" aria-labelledby="cdts-breadcrumb">
+            <h2 id="cdts-breadcrumb"><^- msg('You are here:') ^></h2>
             <div class="container">
                 <ol class="breadcrumb">
                     <%_ for (var breadcrumbIndex=0; breadcrumbIndex<pr.breadcrumbs.length; breadcrumbIndex++) {