PAT a11y updates - part 2

alpha-canada-ca · Dec 1, 2023 · 0647ca3 · 0647ca3
1 parent ac64074
commit 0647ca3
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 24 deletions.
diff --git a/assets/js/i18n/en.json b/assets/js/i18n/en.json
@@ -187,6 +187,7 @@
     "Visitorprofile": "Visitor profile",
     "Visitoractivity": "Visitor activity",
     "moreDetailedAnalysis" : "If you would like a more detailed analysis for this web page, reach out to your <a target='_blank' href='https://www.gcpedia.gc.ca/wiki/Institutional_Representatives_for_Analytics'>institutional representatives for analytics</a> (accessible only on the Government of Canada network).",
+    "Close": "Close1",
 
     "quote0": "What did the janitor say when he jumped out of the closet? Supplies!",
     "quote1": "Why did Hans Solo not enjoy his steak dinner? It was Chewie!",

diff --git a/assets/js/i18n/fr.json b/assets/js/i18n/fr.json
@@ -187,6 +187,6 @@
     "Visitorprofile": "Profil du visiteur",
     "Visitoractivity": "Activité des visiteurs",
     "Didyouknow": "Le savais-tu?",
-    "moreDetailedAnalysis": "Si vous désirez une analyse plus détaillée de cette page Web, veuillez contacter vos <a target='_blank' href='https://www.gcpedia.gc.ca/wiki/Institutional_Representatives_for_Analytics?setlang=fr&uselang=fr'>représentants institutionnels en analytique Web</a> (accessible uniquement sur le réseau du gouvernement du Canada)."
-
+    "moreDetailedAnalysis": "Si vous désirez une analyse plus détaillée de cette page Web, veuillez contacter vos <a target='_blank' href='https://www.gcpedia.gc.ca/wiki/Institutional_Representatives_for_Analytics?setlang=fr&uselang=fr'>représentants institutionnels en analytique Web</a> (accessible uniquement sur le réseau du gouvernement du Canada).",
+    "Close": "Fermer"
 }
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 <head>
     <meta charset="utf-8">
     <!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
-    <title data-i18n="app-title"></title>
+    <title data-i18n="app-title">Page analytics tool</title>
     <!-- Meta data -->
     <meta content="width=device-width,initial-scale=1" name="viewport">
     <!-- Meta data -->
@@ -125,32 +125,34 @@ <h1 id="wb-cont" property="name" data-i18n="app-title"></h1>
 
             <div class="form-group">
                 <select id="date-range" class="form-control" name="date-range">
-                    <option data-value="2" data-index="2" value="2" data-i18n="Yesterday" selected="selected"></option> <!-- data-index must equal 2 so that process.php can use $yesterday -->
+                    <option data-value="2" data-index="2" value="2" data-i18n="Yesterday" selected="selected">Yesterday</option> <!-- data-index must equal 2 so that process.php can use $yesterday -->
                 </select>
                 <!-- calendar date picker for startdate -->
                 <div class="form-group">
                     <label for="startdate" class="required">
                         <span class="field-name" data-i18n="select-startdate"></span> 
-                        <strong class="required" data-i18n="Required"></strong>
+                        <strong class="required" data-i18n="Required" data-i18n-aria-label="hlp-three"></strong>
                         <sup>
                             <a href="javascript:void(0);" class="glyphicon glyphicon-info-sign" data-i18n-aria-label="hlp-modal-startdate" onclick="openOverlay('date_start_content_modal')"></a>
-                            <span class="wb-inv" data-i18n="hlp-three-start-title"></span>
+                            <!-- <span class="wb-inv" data-i18n="hlp-three"></span> -->
                         </sup>
                     </label>
-                    <input class="form-control" type="date" id="startdate" name="startdate" min="" required="required"/>
+                    <input class="form-control" type="date" id="startdate" name="startdate" min="" required="required" aria-label="Select start date, required field. Enter the date in the format: year (four digits), month (two digits), day (two digits)" />
+                    <!-- <span id="startDateHelp" class="wb-inv" data-i18n="hlp-three"></span> -->
                 </div>
 
                 <!-- calendar date picker for enddate -->
                 <div class="form-group">
                     <label for="enddate" class="required">
                         <span class="field-name" data-i18n="select-enddate"></span> 
-                        <strong class="required" data-i18n="Required"></strong>
+                        <strong class="required" data-i18n="Required" data-i18n-aria-label="hlp-three"></strong>
                         <sup>
                             <a href="javascript:void(0);" class="glyphicon glyphicon-info-sign" data-i18n-aria-label="hlp-modal-enddate" onclick="openOverlay('date_end_content_modal')"></a>
-                            <span class="wb-inv" data-i18n="hlp-three-end-title"></span>
+                            <!-- <span class="wb-inv" data-i18n="hlp-three"></span> -->
                         </sup>
                     </label>
-                    <input class="form-control" type="date" id="enddate" name="enddate" min="" required="required"/>
+                    <input class="form-control" type="date" id="enddate" name="enddate" min="" required="required" aria-label="Select end date, required field. Enter the date in the format: year (four digits), month (two digits), day (two digits)" />
+                    <!-- <span id="endDateHelp" class="wb-inv" data-i18n="hlp-three"></span> -->
                 </div>
             </div>
             <button data-gc-analytics-formsubmit="submit" class="btn btn-primary" id="searchBttn" type="submit"><span class="glyphicon-search glyphicon"></span> <span data-i18n="Getdata"></span></button>
@@ -414,8 +416,9 @@ <h2 id="mesures-clés" style="margin-left: 15px;"><strong data-i18n="Keymetrics"
                                                 <span class="glyphicon glyphicon-info-sign" aria-hidden="true" onclick="openOverlay('uniquev_content_modal')"></span> 
                                                 <span class="wb-inv" data-i18n="hlp-unique-visitors-title"></span>
                                             </sup>
-                                            <div id="uv"></div>
                                         </p>
+                                        <div id="uv"></div>
+                                        <p></p>
                                     </section>
                                 </div>
 
@@ -427,8 +430,9 @@ <h2 id="mesures-clés" style="margin-left: 15px;"><strong data-i18n="Keymetrics"
                                                 <span class="glyphicon glyphicon-info-sign" aria-hidden="true" onclick="openOverlay('visits_content_modal')"></span> 
                                                 <span class="wb-inv" data-i18n="hlp-average-visits-title"></span>
                                             </sup>
-                                            <div id="visit"></div>
                                         </p>
+                                        <div id="visit"></div>
+                                        <p></p>
                                     </section>
                                 </div>
 
@@ -440,8 +444,9 @@ <h2 id="mesures-clés" style="margin-left: 15px;"><strong data-i18n="Keymetrics"
                                                 <span class="glyphicon glyphicon-info-sign" aria-hidden="true" onclick="openOverlay('pv_content_modal')"></span> 
                                                 <span class="wb-inv" data-i18n="hlp-average-pgv-title"></span>
                                             </sup>
-                                            <div id="pagev"></div>
                                         </p>
+                                        <div id="pagev"></div>
+                                        <p></p>
                                     </section>
                                 </div>
 
@@ -453,8 +458,9 @@ <h2 id="mesures-clés" style="margin-left: 15px;"><strong data-i18n="Keymetrics"
                                                 <span class="glyphicon glyphicon-info-sign" aria-hidden="true" onclick="openOverlay('tmspnt_content_modal')"></span> 
                                                 <span class="wb-inv" data-i18n="hlp-average-tmspnt-title"></span>
                                             </sup>
-                                            <div id="avgtime"></div>
                                         </p>
+                                        <div id="avgtime"></div>
+                                        <p></p>
                                     </section>
                                 </div>
 
@@ -774,32 +780,44 @@ <h2 id="fnb" data-i18n="Footnotes"></h2>
                 -->
                 </div>
             </div>
-            <p id="moreDetailedAnalysis"><i class="fa fa-address-book-o" style="font-size:24px; padding-right:15px"></i></span><span data-i18n="[html]moreDetailedAnalysis"></span></p>
+            <p id="moreDetailedAnalysis"><i class="fa fa-address-book-o" style="font-size:24px; padding-right:15px"></i><span data-i18n="[html]moreDetailedAnalysis"></span></p>
         </div>
 
 <section id="uniquev_content_modal" class="modal-dialog modal-content overlay-def mfp-hide">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-unique-visitors-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-unique-visitors"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="visits_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-average-visits-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-average-visits"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="pv_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-average-pgv-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-average-pgv"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="tmspnt_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-average-tmspnt-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-average-tmspnt"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="rap_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
@@ -809,42 +827,63 @@ <h2 class="modal-title" data-i18n="hlp-rap-title"></h2>
         <p data-i18n="hlp-rap"></p>
         <p data-i18n="hlp-rap2"></p>
     </div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="fwylf_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-fwylf-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-fwylf"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="snum_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-srch-started-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-srch-started"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="srchP_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-phrases-search-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-phrases-search"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="reft_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-refferrer-type-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-refferrer-type"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="ppt_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-users-came-from-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-users-came-from"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="srchA_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-search-terms-lead-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-search-terms-lead"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="np_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
@@ -860,66 +899,99 @@ <h2 class="modal-title" data-i18n="hlp-users-click-title"></h2>
         </ul>
         <p><strong data-i18n="Notice:"></strong> <span data-i18n="Depending"></span></p>
     </div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="chrtp_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-device-used-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-device-used"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="chrtt_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-trends-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-trends"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="provChart_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-whereaccess-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-whereaccess"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="gscc_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-total-clicks-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-total-clicks"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="gsci_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-total-impressions-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-total-impressions"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="gscr_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-region-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-region"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="gscctr_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-ctr-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-ctr"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="gscpos_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-position-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-position"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="date_start_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-three-start-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-three"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>
 <section id="date_end_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
     <header class="modal-header">
         <h2 class="modal-title" data-i18n="hlp-three-end-title"></h2>
     </header>
     <div class="modal-body" data-i18n="hlp-three"></div>
+    <div class="modal-footer">
+        <button class="btn btn-sm btn-primary pull-left popup-modal-dismiss" type="button" data-i18n="Close"><span class="wb-inv"></span></button>
+    </div>
 </section>