Automated Release v1.1.2

Please find changes in CHANGELOG.md file

CHANGELOG.md

@@ -32,3 +32,14 @@
 - :pencil: add CONTRIBUTORS
 ### Changes
 - :pencil: change LICENCE ( #16 )
+## [1.1.2] - 2020-04-10
+### Added
+- ♿ Increase contrast ratio hover link color (#29)
+- ♿ Add landmarks roles to header, main and footer sections (#43)
+- ♿ Add title to open stores link and add more explicit text (#44, #45)
+- ♿ Expose aria-invalid field assistance technologies (#24)
+- ✨ Add timestamp to generated pdf (#9)
+- 💄 Don't use autocompletion for release date and time (#31)
+- 💄 Add underline on hover links
+### Fixes
+- Fix Typo site.webmanifest (#52)

src/certificate.js

@@ -88,13 +88,8 @@ function idealFontSize (font, text, maxWidth, minSize, defaultSize) {
 }
 
 async function generatePdf (profile, reasons) {
-  const generatedDate = new Date()
+  const creationDate = new Date().toLocaleDateString('fr-FR')
-  setDateNow(generatedDate)
+  const creationHour = new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }).replace(':', 'h')
-  const creationDate = `${day}/${month}/${year}`
-
-  const hour = pad(generatedDate.getHours())
-  const minute = pad(generatedDate.getMinutes())
-  const creationHour = `${hour}h${minute}`
 
   const { lastname, firstname, birthday, lieunaissance, address, zipcode, town, datesortie, heuresortie } = profile
   const releaseHours = String(heuresortie).substring(0, 2)
@@ -223,6 +218,7 @@ if (isFacebookBrowser()) {
 function addSlash () {
   $('#field-birthday').value = $('#field-birthday').value.replace(/^(\d{2})$/g, '$1/')
   $('#field-birthday').value = $('#field-birthday').value.replace(/^(\d{2})\/(\d{2})$/g, '$1/$2/')
+  $('#field-birthday').value = $('#field-birthday').value.replace(/\/\//g, '/')
 }
 
 $('#field-birthday').onkeyup = function () {
@@ -244,7 +240,9 @@ $('#generate-btn').addEventListener('click', async event => {
   const reasons = getAndSaveReasons()
   const pdfBlob = await generatePdf(getProfile(), reasons)
   localStorage.clear()
-  downloadBlob(pdfBlob, 'attestation.pdf')
+  const creationDate = new Date().toLocaleDateString('fr-CA')
+  const creationHour = new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }).replace(':', '-')
+  downloadBlob(pdfBlob, `attestation-${creationDate}_${creationHour}.pdf`) 
 
   snackbar.classList.remove('d-none')
   setTimeout(() => snackbar.classList.add('show'), 100)
@@ -268,6 +266,60 @@ $$('input').forEach(input => {
   }
 })
 
+const conditions = {
+  '#field-firstname': {
+    condition: 'length',
+  },
+  '#field-lastname': {
+    condition: 'length',
+  },
+  '#field-birthday': {
+    condition: 'pattern',
+    pattern: /^([0][1-9]|[1-2][0-9]|30|31)\/([0][1-9]|10|11|12)\/(19[0-9][0-9]|20[0-1][0-9]|2020)/g
+  },
+  '#field-lieunaissance': {
+    condition: 'length',
+  },
+  '#field-address': {
+    condition: 'length',
+  },
+  '#field-town': {
+    condition: 'length',
+  },
+  '#field-zipcode': {
+    condition: 'pattern',
+    pattern: /\d{5}/g
+  },
+  '#field-datesortie': {
+    condition: 'pattern',
+    pattern: /\d{4}-\d{2}-\d{2}/g
+  },
+  '#field-heuresortie': {
+    condition: 'pattern',
+    pattern: /\d{2}:\d{2}/g
+  }
+}
+
+Object.keys(conditions).forEach(field => {
+  $(field).addEventListener('input', () => {
+    if (conditions[field].condition == 'pattern') {
+      const pattern = conditions[field].pattern;
+      if ($(field).value.match(pattern)) {
+        $(field).setAttribute('aria-invalid', "false");
+      } else {
+        $(field).setAttribute('aria-invalid', "true");
+      }
+    }
+    if (conditions[field].condition == 'length') {
+      if ($(field).value.length > 0) {
+        $(field).setAttribute('aria-invalid', "false");
+      } else {
+        $(field).setAttribute('aria-invalid', "true");
+      }
+    }
+  })
+})
+
 function addVersion () {
   document.getElementById('version').innerHTML = `${new Date().getFullYear()} - ${process.env.VERSION}`
 }

src/favicons/site.webmanifest

@@ -1,7 +1,7 @@
 {
     "name": "Générateur d'attestation de déplacement dérogatoire",
     "short_name": "Déplacement covid-19",
-    "desctiption": "L'application officielle du gouvernement pour la génération d'attestation de déplacement dérogatoire dématérialisée.",
+    "description": "L'application officielle du gouvernement pour la génération d'attestation de déplacement dérogatoire dématérialisée.",
     "categories": ["government", "health"],
     "lang": "fr-FR",
     "icons": [
@@ -14,6 +14,26 @@
             "src": "android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
+        },
+        {
+            "src": "apple-touch-icon.png",
+            "sizes": "180x180",
+            "type": "image/png"
+        },
+        {
+            "src": "apple-touch-icon-precomposed.png",
+            "sizes": "180x180",
+            "type": "image/png"
+        },
+        {
+            "src": "apple-touch-icon-120x120.png",
+            "sizes": "120x120",
+            "type": "image/png"
+        },
+        {
+            "src": "apple-touch-icon-120x120-precomposed.png",
+            "sizes": "120x120",
+            "type": "image/png"
         }
     ],
     "orientation": "portrait-primary",

src/index.html

@@ -29,7 +29,7 @@
     <title>COVID-19 – Générateur d'attestation de déplacement dérogatoire</title>
 </head>
 <body>
-    <header class="wrapper">
+    <header role="banner" class="wrapper">
         <img class="logo" src="/MIN_Interieur_RVB.svg" alt="Ministère de l'intérieur. Liberté, égalité, fraternité.">
         <div>
             <h1 class="flex flex-wrap">
@@ -47,7 +47,7 @@
             </p>
         </div>
     </header>
-
+    <main role="main">
     <p class="alert  alert-danger  d-none" role="alert" id="alert-facebook"></p>
 
     <div class="wrapper">
@@ -68,6 +68,7 @@
                         placeholder="Jean"
                         required
                         autofocus
+                        aria-invalid="true"
                     >
                     <span class="validity" aria-hidden="true"></span>
                 </div>
@@ -84,6 +85,7 @@
                         name="lastname"
                         autocomplete="family-name"
                         placeholder="Dupont"
+                        aria-invalid="true"
                         required
                         autofocus
                     >
@@ -97,11 +99,12 @@
                 <div class="input-group  align-items-center">
                     <input
                         type="text"
-                        pattern="^([0][1-9]|[1-2][0-9]|30|31)/([0][1-9]|10|11|12)/(19[0-9][0-9]|20[0-1][0-9]|2020)"
+                        pattern="^([0][1-9]|[1-2][0-9]|30|31)\/([0][1-9]|10|11|12)\/(19[0-9][0-9]|20[0-1][0-9]|2020)"
                         inputmode="numeric"
                         class="form-control"
                         id="field-birthday"
                         name="birthday"
+                        aria-invalid="true"
                         autocomplete="bday"
                         placeholder="01/01/1970"
                         maxlength="10"
@@ -120,6 +123,7 @@
                         class="form-control"
                         id="field-lieunaissance"
                         name="lieunaissance"
+                        aria-invalid="true"
                         placeholder="Lyon"
                         required
                     >
@@ -136,6 +140,7 @@
                         class="form-control"
                         id="field-address"
                         name="address"
+                        aria-invalid="true"
                         autocomplete="address-line1" 
                         placeholder="999 avenue de france"
                         required
@@ -154,6 +159,7 @@
                         id="field-town"
                         name="town"
                         autocomplete="address-level1"
+                        aria-invalid="true"
                         placeholder="Paris"
                         required
                     >
@@ -174,6 +180,7 @@
                         class="form-control"
                         id="field-zipcode"
                         name="zipcode"
+                        aria-invalid="true"
                         autocomplete="postal-code" 
                         minlength="4"
                         maxlength="5"
@@ -194,7 +201,7 @@
     
                 <div class="form-check">
                     <input class="form-check-input" type="checkbox" name="field-reason" id="checkbox-courses" value="courses">
-                    <label class="form-check-label" for="checkbox-courses">Déplacements pour effectuer des achats de fournitures nécessaires à l’activité professionnelle et des achats de première nécessité dans des établissements dont les activités demeurent autorisées <a href="https://www.service-public.fr/particuliers/actualites/A13921" target="_blank">(liste sur gouvernement.fr)</a>.</label>
+                    <label class="form-check-label" for="checkbox-courses">Déplacements pour effectuer des achats de fournitures nécessaires à l’activité professionnelle et des achats de première nécessité dans des établissements dont les activités demeurent autorisées (<a href="https://www.service-public.fr/particuliers/actualites/A13921" class="stores-link" title="Liste des commerces et établissements qui restent ouverts - nouvelle page" target="_blank">liste des commerces et établissements qui restent ouverts</a>).</label>
                 </div>
                 
                 <div class="form-check">
@@ -224,7 +231,7 @@
             <div class="form-group">
                 <label for="field-datesortie">Date de sortie</label>
                 <div class="input-group  align-items-center">
-                    <input type="date" class="form-control" id="field-datesortie" name="datesortie" placeholder="JJ/MM/YYYY" required>
+                    <input type="date" class="form-control" id="field-datesortie" name="datesortie" autocomplete="off" placeholder="JJ/MM/YYYY" aria-invalid="true" required>
                     <span class="validity" aria-hidden="true"></span>
                 </div>
             </div>
@@ -232,7 +239,7 @@
             <div class="form-group">
                 <label for="field-heuresortie">Heure de sortie</label>
                 <div class="input-group  align-items-center">
-                    <input type="time" class="form-control" id="field-heuresortie" name="heure" required>
+                    <input type="time" class="form-control" id="field-heuresortie" name="heure" autocomplete="off" aria-invalid="true" required>
                     <span class="validity" aria-hidden="true"></span>
                 </div>
             </div>
@@ -256,14 +263,14 @@
         </p> 
         <img class="center" src="/logo_dnum.svg" alt="logo dnum">
     </div>
-
+    </main>
-    <footer class="main-footer">
+    <footer role="contentinfo" class="main-footer">
         <div class="footer-links">
-            <a href="./confidentialite.html" title="Confidentialité - nouvelle page" target="_blank" class="footer-link">Confidentialité</a>
+            <a href="./confidentialite.html" title="Confidentialité - nouvelle page" target="_blank" class="footer-line footer-link">Confidentialité</a>
-            <a href="https://www.interieur.gouv.fr/Infos-du-site/Mentions-legales" title="Mentions légales - nouvelle page" target="_blank" class="footer-link">Mentions légales</a>
+            <a href="https://www.interieur.gouv.fr/Infos-du-site/Mentions-legales" title="Mentions légales - nouvelle page" target="_blank" class="footer-line footer-link">Mentions légales</a>
-            <a href="https://www.gouvernement.fr/info-coronavirus" title="Information du gouvernement sur le Covid-19 - nouvelle page" target="_blank" class="footer-link">Informations du gouvernement sur le Covid-19</a> 
+            <a href="https://www.gouvernement.fr/info-coronavirus" title="Information du gouvernement sur le Covid-19 - nouvelle page" target="_blank" class="footer-line footer-link">Informations du gouvernement sur le Covid-19</a> 
-            <div class="footer-link" >Plus d’infos au<a class="num-08" href="tel:0800130000"> 0 800 130 000</a></div>
+            <div class="footer-line" >Plus d’infos au <a class="num-08" href="tel:0800130000">0 800 130 000</a></div>
-            <p class="footer-link" id="version"></p>
+            <p class="footer-line" id="version"></p>
         </div>
     </footer> 
 

src/main.css

@@ -214,6 +214,10 @@ input:valid+span:after {
   color: #000191;
 }
 
+.github-link:hover {
+    text-decoration: underline;
+}
+
 .label-mi {
   text-align: center;
   font-size: 1em;
@@ -234,7 +238,7 @@ input:valid+span:after {
   max-width: 500px;
 }
 
-.footer-link {
+.footer-line {
   display: block;
   margin: 0.75em;
   font-size: 0.9em;
@@ -242,7 +246,7 @@ input:valid+span:after {
 }
 
 .footer-link:hover {
-  text-decoration: none;
+  text-decoration: underline;
   color: #ffffff;
 }
 
@@ -255,6 +259,15 @@ input:valid+span:after {
   color: #00a94f;
 }
 
+.num-08:hover {
+    text-decoration: underline;
+    color: #0A81FF;
+}
+
+.stores-link:hover {
+    text-decoration: underline;
+}
+
 .confidentialite {
   .cookies {
     border-collapse: collapse;