Merge branch 'main' into prod

content/fr/news/2023-04-28-des-pdf-majoritairement-inaccessibles.md

@@ -185,7 +185,7 @@ div#pdf-20230503-1 button#hc-linkto-highcharts-data-table-0 {
 <aside class="contextbox">
     <h2>Méthodologie d’évaluation</h2>
     <h3>Constitution de l’échantillon</h3>
-    <p>L’échantillon de sites a été obtenu à partir de <a href="https://github.com/zakird/crux-top-lists">la liste des sites dans le Top 1 Million de l’UX Report de Google Chrome</a> (voir aussi la <a href="https://developer.chrome.com/docs/crux/methodology/">méthodologie</a> utilisée par Google pour établir cette liste). Nous y avons recherché tous les sites en .lu et détecté les sites présents dans <a href="https://data.public.lu/fr/datasets/inventaire-des-sites-publics/">l’inventaire des sites publics</a> publié par le SIP en open data. Pour simplifier l’exercice, nous avons gardé uniquement les sites de l’État et des communes et exclu les sites demandant une identification ainsi que les doublons (ex&#8239;: www.services-publics.lu et guichet.public.lu). Cette méthode a permis d’obtenir la liste des 17 sites présentée en début d’article.</p>
+    <p>L’échantillon de sites a été obtenu à partir de <a href="https://github.com/zakird/crux-top-lists">la liste des sites dans le Top 1 Million de l’<span lang="en">UX Report</span> de Google Chrome</a> (voir aussi la <a href="https://developer.chrome.com/docs/crux/methodology/">méthodologie</a> utilisée par Google pour établir cette liste). Nous y avons recherché tous les sites en .lu et détecté les sites présents dans <a href="https://data.public.lu/fr/datasets/inventaire-des-sites-publics/">l’inventaire des sites publics</a> publié par le SIP en open data. Pour simplifier l’exercice, nous avons gardé uniquement les sites de l’État et des communes et exclu les sites demandant une identification ainsi que les doublons (ex&#8239;: www.services-publics.lu et guichet.public.lu). Cette méthode a permis d’obtenir la liste des 17 sites présentée en début d’article.</p>
     <h3>Analyse des fichiers</h3>
     <p>L’outil <a href="https://github.com/accessibility-luxembourg/simplA11yPDFCrawler">simplA11yPDFCrawler</a>, développé au SIP, a été utilisé pour collecter les PDF sur ces 17 sites et les analyser. Seuls les documents bureautiques présents sur ces sites ont été téléchargés, les liens externes n’ont pas été pris en compte. Afin de pouvoir réaliser l’étude en un temps raisonnable, cette collecte a été limitée à 24 heures par site, ce qui signifie que certains sites peuvent mettre à disposition plus de documents que ceux analysés dans le cadre de cette étude.</p>
     <h3>Limites de l’étude</h3>

src/css/main.scss

@@ -266,51 +266,6 @@ blockquote {
   @include blockquote();
 }
 
-// button "back to top"
-.back {
-    background: #fff;
-    position: fixed;
-    bottom: 0;
-    right: 2rem;
-    z-index: 1;
-    height: 48px;
-    width: 48px;
-    -webkit-transition: background 200ms ease-in-out,color 200ms ease-in-out;
-    transition: background 200ms ease-in-out,color 200ms ease-in-out;
-}
-.back span {
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute !important;
-    width: 1px;
-}
-.back svg {
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
-
-}
-.back:hover, .back:focus {
-    background: $primary-color;
-    color: #fff;
-}
-
-.is-hidden {
-    display: none;
-}
-
-.icon {
-
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
-}
-
 /* govbar */
 .govbar {
   background: #FFF;

src/js/graph.js

@@ -149,9 +149,24 @@ function build_chart (highcharts, ch_title, ch_dest, ch_data, ch_type, ch_annota
     const ch_animation = ! window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     let newSkipLink = "Passer à la description du graphique";
     if (document.querySelector('html').getAttribute('lang') === "en") {newSkipLink = "Skip to the chart description";}
+
     const chart = highcharts.chart(ch_dest, {
         chart: {
-            type: ch_type
+            type: ch_type,
+            events: {
+                render() {
+                    // HOTFIX for the jump when navigating with the keyboard on charts with a legend
+                    // the problem appears when the page is already scrolled and the page loads, then the top css attribute gets a wrong value
+                    // examples of articles with a chart containing a legend:
+                    // /fr/news/2023-02-24-complaints2022.html
+                    // /fr/news/2023-04-28-des-pdf-majoritairement-inaccessibles
+                    setTimeout(() => {
+                        document.querySelectorAll('.highcharts-a11y-proxy-button').forEach((button) => {
+                            button.style.top = 0;
+                        });
+                    }, 250);
+                }
+            }
         },
         accessibility: {
             point: {

src/js/newsletter.js

@@ -94,6 +94,7 @@ document.addEventListener('DOMContentLoaded', function(e) {
         const btn = document.getElementById('submitbtn');
         const emailField   = document.getElementById('sip_email');
         const checkConsent = document.getElementById('sip_consent');
+        let emailInError = false;
 
 
         emailField.parentElement.classList.remove('error');
@@ -112,6 +113,8 @@ document.addEventListener('DOMContentLoaded', function(e) {
             newelement.setAttribute("id", emailField.id + "Error");
             emailField.parentNode.appendChild(newelement);
             newelement.innerHTML = getMessage('email', validationMessages);
+            emailInError = true;
+            emailField.focus();
         }
 
         if (checkConsent.validity.valueMissing) {
@@ -123,6 +126,9 @@ document.addEventListener('DOMContentLoaded', function(e) {
             newelement.setAttribute("id", checkConsent.id + "Error");
             checkConsent.parentNode.appendChild(newelement);
             newelement.innerHTML = getMessage('checkbox', validationMessages);
+            if (!emailInError) {
+                checkConsent.focus();
+            }
         }
 
         if (emailField.reportValidity() && checkConsent.reportValidity()) {

src/tpl/decla-form.ejs

@@ -210,7 +210,7 @@
     </div>    
 
     <button type="button" id="decla_btn" class="btn btn-primary"><%= __("Create your statement") %></button>
-    <div id="errorPanel" role="alert" aria-live="polite"></div>
+    <div id="errorPanel" role="alert"></div>
 </form>
 </div>
 
@@ -225,8 +225,8 @@
     <% langs.forEach(function(e) { %>
         <div class="decla" id="decla-<%= e.code %>">
             <h3 id="decla-<%= e.code %>-title"><%= __("Statement") + __("in") + e.name %></h3>
-            <button aria-labelledby="decla-<%= e.code %>-title" class="clipboard"><%= __("Copy to clipboard") %></button>
-            <button aria-labelledby="decla-<%= e.code %>-title" class="download"><%= __("Download HTML") %></button>
+            <button id="copy-<%= e.code %>" aria-labelledby="copy-<%= e.code %> decla-<%= e.code %>-title" class="clipboard"><%= __("Copy to clipboard") %></button>
+            <button id="download-<%= e.code %>" aria-labelledby="download-<%= e.code %> decla-<%= e.code %>-title" class="download"><%= __("Download HTML") %></button>
             <section id="decla-<%= e.code %>-result" class="decla-result"></section>
         </div>    
     <% }) %>

src/tpl/decla_de.ejs

@@ -247,7 +247,7 @@
     <li>schriftlich in einem Dokument oder per E-Mail;</li>
     <li>mündlich in einem Interview oder per Telefon.</li>
 </ul> 
-<h<%= title_level+1 %>>Durchsetzungsverfahren</h<%= title_level+1 %>> 
+<h<%= title_level+1 %>>Durchsetzungs<wbr>verfahren</h<%= title_level+1 %>> 
 <p>Im Falle einer nicht zufriedenstellenden Antwort haben Sie ebenfalls die Möglichkeit, das <a href="https://sip.gouvernement.lu/de.html">Informations- und Presseamt</a>, das für die Kontrolle der Barrierefreiheit zuständig ist, über dessen  <a href="https://sip.gouvernement.lu/de/support/reclamation-accessibilite.html">Online-Beschwerdeformular</a>, oder <a href="https://www.ombudsman.lu" hreflang="fr">die Ombudsperson</a>, Bürgerbeauftragte des Großherzogtums Luxemburg, zu informieren.</p>
 <hr />
 <p><small>

src/tpl/decla_lb.ejs

@@ -35,7 +35,7 @@
     <h<%= title_level+1 %>>Wat ass déi digital Accessibilitéit?</h<%= title_level+1 %>>
     <p>D’Zil vun der digitaler Accessibilitéit ass et, datt Persoune mat engem Handicap de Web an déi mobil Applikatioune kënne benotzen. 
     </p>
-    <h<%= title_level+1 %>>Konformitéitsstatut</h<%= title_level+1 %>>
+    <h<%= title_level+1 %>>Konformitéits<wbr>statut</h<%= title_level+1 %>>
     <p class="basic-information conformance-status <%= conformity %>">
         <% if (sites.length == 0) { %>
             <% if (apps.length == 0) { %> 
@@ -167,10 +167,10 @@
         <% } %>
     <% } %>
     <% if (access_features_lb !== "") { %>
-        <h<%= title_level+1 %>>Accessibilitéitsfunktiounen</h<%= title_level+1 %>>
+        <h<%= title_level+1 %>>Accessibilitéits<wbr>funktiounen</h<%= title_level+1 %>>
         <p class="technical-information accessibility-features"><%= access_features_lb %></p>
         <% } %>                      
-    <h<%= title_level+1 %>>Virbereedung vun dëser Accessibilitéitsdeklaratioun</h<%= title_level+1 %>>
+    <h<%= title_level+1 %>>Virbereedung vun dëser Accessibilitéits<wbr>deklaratioun</h<%= title_level+1 %>>
     <p>
         Dës Deklaratioun gouf de(n) <span class="basic-information statement-created-date"><%= date_prepa.toLocaleDateString('de') %></span> erstallt.
         D'Angaben an dëser Deklaratioun sinn exakt a baséieren op enger effektiver Bewäertung vun der Konformitéit

src/tpl/main.ejs

@@ -93,11 +93,5 @@
       </div>
     </main>
     <%- include('footer', {'links': config[lang].footer, 'name': name, 'prefix': prefix, 'lang': lang, 'editorsNote': config[lang].footerEditor, '__': __}) %>
-    <a href="#top" class="back" title="<%= __("Back to top") %>">
-      <svg class="icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-        <path d="M1.5 19.5c-.2 0-.4-.1-.6-.2-.4-.3-.5-1-.1-1.4l10.5-13c.2-.2.5-.4.8-.4s.6.1.8.4l11 13c.4.4.3 1.1-.1 1.4-.4.4-1.1.3-1.4-.1L12 7.1l-9.7 12c-.2.3-.5.4-.8.4"></path>
-      </svg>
-      <span><%= __("Back to top") %></span>
-    </a>
 </body>
 </html>