Fix aria errors, minor tweaks

themes/default/public/js/lufi-download.js

@@ -39,7 +39,7 @@ document.addEventListener("DOMContentLoaded", () => {
     passwordFormDOM.onsubmit = (event) => {
       event.preventDefault();
 
-      passwordFormDOM.classList.add("hidden");
+      hideNode(passwordFormDOM);
 
       startDownload();
     };
@@ -48,14 +48,14 @@ document.addEventListener("DOMContentLoaded", () => {
   const showZipContent = (zipFile, cardDOM) => {
     const zipContainerDOM = cardDOM.querySelector(".content .zip-container");
 
-    zipContainerDOM.classList.remove("hidden");
+    showNode(zipContainerDOM);
 
     zipContainerDOM.querySelector(".action-show-zip").onclick = (event) => {
-      event.target.classList.add("hidden");
+      hideNode(event.target);
 
       const zipContentDOM = zipContainerDOM.querySelector(".zip-content");
 
-      zipContentDOM.classList.remove("hidden");
+      showNode(zipContentDOM);
 
       document.body.style.cursor = "wait";
 
@@ -64,7 +64,7 @@ document.addEventListener("DOMContentLoaded", () => {
         .andThen((job) => job.waitForCompletion())
         .map((job) => {
           job.archiveFiles.forEach((file) => {
-            const itemDOM = zipContainerDOM
+            const itemDOM = document
               .querySelector("template#zip-item")
               .content.cloneNode(true).children[0];
 

themes/default/public/js/lufi-list-invitations.js

@@ -31,14 +31,14 @@ const toggleHidden = () => {
   if (invitationsListDOM.getAttribute("data-visibility") === "hidden") {
     toggleButtonDOM.innerText = i18n.hideText;
 
-    itemsHiddenDOM.forEach((item) => item.classList.remove("hidden"));
+    itemsHiddenDOM.forEach((item) => showNode(item));
 
     invitationsListDOM.setAttribute("data-visibility", "shown");
   } else {
     toggleButtonDOM.innerText = i18n.showText;
 
     itemsHiddenDOM.forEach((item) => {
-      item.classList.add("hidden");
+      hideNode(item);
 
       const checkbox = item.querySelector("input");
 
@@ -157,7 +157,7 @@ const toggleVisibility = () => {
 
           if (t.show) {
             itemDOM.setAttribute("data-visibility", 1);
-            itemDOM.classList.remove("hidden");
+            showNode(itemDOM);
             itemDOM
               .querySelector(".column.selection .icon.hide-source")
               .remove();
@@ -169,7 +169,7 @@ const toggleVisibility = () => {
                 .querySelector(".invitations-list")
                 .getAttribute("data-visibility") === "hidden"
             ) {
-              itemDOM.classList.add("hidden");
+              hideNode(itemDOM);
             }
 
             itemDOM

themes/default/public/js/lufi-upload.js

@@ -70,14 +70,15 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 
   const clearZip = () => {
-    zipZoneDOM.classList.add("hidden");
+    hideNode(zipZoneDOM);
-    zipZoneDOM.querySelector(".action-upload-zip").classList.remove("hidden");
+    showNode(zipZoneDOM.querySelector(".action-upload-zip"));
-    zipZoneDOM.querySelector(".zip-compressing").classList.add("hidden");
+    hideNode(zipZoneDOM.querySelector(".zip-compressing"));
+    hideNode(inputZipNameDOM);
+
     zipZoneDOM.querySelector(".files-list").replaceChildren();
 
-    inputZipNameDOM.classList.add("hidden");
-
     archiveEntries = undefined;
+    zipSize = 0;
     mustZipDOM.checked = false;
   };
 
@@ -176,7 +177,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     if (fileCardsDOM.querySelectorAll(".file-card.success").length > 0) {
-      uploadedZoneDOM.querySelector(".buttons").classList.remove("hidden");
+      showNode(uploadedZoneDOM.querySelector(".buttons"));
     }
 
     return cardDOM;
@@ -191,7 +192,7 @@ document.addEventListener("DOMContentLoaded", () => {
       if (!mustZipDOM.checked) {
         clearZip();
       } else {
-        inputZipNameDOM.classList.remove("hidden");
+        showNode(inputZipNameDOM);
       }
     };
 
@@ -237,7 +238,8 @@ document.addEventListener("DOMContentLoaded", () => {
         password
       );
     } else {
-      zipZoneDOM.classList.remove("hidden");
+      showNode(zipZoneDOM);
+
       lufi
         .addFilesToArchive(files, archiveEntries)
         .andThen((entries) => {
@@ -295,11 +297,11 @@ document.addEventListener("DOMContentLoaded", () => {
     updateMailLinksButton(serverKey, true);
 
     if (fileCardsDOM.children.length === 0) {
-      uploadedZoneDOM.classList.add("hidden");
+      hideNode(uploadedZoneDOM);
     }
 
     if (fileCardsDOM.querySelectorAll(".file-card.success").length === 0) {
-      uploadedZoneDOM.querySelector(".buttons").classList.add("hidden");
+      hideNode(uploadedZoneDOM);
     }
   };
 
@@ -388,7 +390,7 @@ document.addEventListener("DOMContentLoaded", () => {
     zipName,
     password
   ) => {
-    uploadedZoneDOM.classList.remove("hidden");
+    showNode(uploadedZoneDOM);
 
     const serverUrl = new URL(ws_url.replace("/upload", ""));
     serverUrl.protocol = serverUrl.protocol === "ws:" ? "http:" : "https:";
@@ -511,8 +513,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const uploadZip = () => {
     document.body.style.cursor = "wait";
-    zipZoneDOM.querySelector(".action-upload-zip").classList.add("hidden");
+    hideNode(zipZoneDOM.querySelector(".action-upload-zip"));
-    zipZoneDOM.querySelector(".zip-compressing").classList.remove("hidden");
+    showNode(zipZoneDOM.querySelector(".zip-compressing"));
 
     const { zipName, deleteDays, shouldDeleteOnFirstView, password } =
       retrieveUploadParams();
@@ -522,9 +524,15 @@ document.addEventListener("DOMContentLoaded", () => {
       .andThen((job) => {
         document.body.style.cursor = "auto";
 
+        zipZoneDOM.querySelector(".action-close").onclick = () => {
+          job.terminate();
+
+          clearZip();
+        };
+
         return job.waitForCompletion();
       })
-      .andThen((job) => {
+      .map((job) => {
         // if '.zip-zone' is hidden, the zipping has been aborted
         if (!zipZoneDOM.classList.contains("hidden")) {
           addToast(i18n.enqueued.replace("XXX", zipName), "success");

themes/default/templates/about.html.ep

@@ -1,23 +1,24 @@
 <section class="about-section">
-    <h3><%= l('What is Lufi?') %></h3>
+  <h1><%= l('About') %></h1>
-    <p><%= l('Lufi is a free (as in free speech) file hosting software.') %></p>
+  <h3><%= l('What is Lufi?') %></h3>
-    <h3><%= l('Privacy') %></h3>
+  <p><%= l('Lufi is a free (as in free speech) file hosting software.') %></p>
-    <p><%= l('The files uploaded on a Lufi instance are encrypted before the upload to the server: the administrator of the server can not see the file\'s content.') %><br>
+  <h3><%= l('Privacy') %></h3>
-    <%= l('The administrator can only see the file\'s name, its size and its mimetype (what kind of file it is: video, text, etc.).') %></p>
+  <p><%= l('The files uploaded on a Lufi instance are encrypted before the upload to the server: the administrator of the server can not see the file\'s content.') %><br>
-    <p><%= l('You don\'t need to register yourself to upload files but be aware that, for legal reasons, your IP address will be stored when you send a file. Don\'t panic, this is normally the case for all sites on which you send files.') %></p>
+  <%= l('The administrator can only see the file\'s name, its size and its mimetype (what kind of file it is: video, text, etc.).') %></p>
-    <h3><%= l('How does it work?') %></h3>
+  <p><%= l('You don\'t need to register yourself to upload files but be aware that, for legal reasons, your IP address will be stored when you send a file. Don\'t panic, this is normally the case for all sites on which you send files.') %></p>
-    <p><%= l('Drag and drop files in the appropriate area or use the traditional way to send files and the files will be chunked, encrypted and sent to the server. You will get two links per file: a download link, that you give to the people you want to share the file with and a deletion link, allowing you to delete the file whenever you want.') %></p>
+  <h3><%= l('How does it work?') %></h3>
-    <p><%= l('You can see the list of your files by clicking on the "My files" link at the top right of this page.') %></p>
+  <p><%= l('Drag and drop files in the appropriate area or use the traditional way to send files and the files will be chunked, encrypted and sent to the server. You will get two links per file: a download link, that you give to the people you want to share the file with and a deletion link, allowing you to delete the file whenever you want.') %></p>
-    <h3><%= l('How to report an illegal file?') %></h3>
+  <p><%= l('You can see the list of your files by clicking on the "My files" link at the top right of this page.') %></p>
-    <p><%== l('Please contact the administrator: %1', config('contact')) %></p>
+  <h3><%= l('How to report an illegal file?') %></h3>
-    <h3><%= l('Who wrote this software?') %></h3>
+  <p><%== l('Please contact the administrator: %1', config('contact')) %></p>
-    <p><%== l('The original (and only for now) author is <a href="https://fiat-tux.fr" class="classic">Luc Didry</a>.') %></p>
+  <h3><%= l('Who wrote this software?') %></h3>
-    <h3><%= l('How to install the software on my server?') %></h3>
+  <p><%== l('The original (and only for now) author is <a href="https://fiat-tux.fr" class="classic">Luc Didry</a>.') %></p>
-    <p><%== l('As Lufi is a free software licensed under of the terms of the <a href="https://gnu.org/licenses/agpl.html" class="classic">AGPLv3</a>, you can install it on you own server. Have a look on the <a href="https://framagit.org/fiat-tux/hat-softwares/lufi/wikis/home" class="classic">Wiki</a> for the procedure.') %><br>
+  <h3><%= l('How to install the software on my server?') %></h3>
-       <%== l('Get the source code on <a href="https://framagit.org/fiat-tux/hat-softwares/lufi" class="classic">the official repository</a> or on its <a href="https://github.com/ldidry/lufi" class="classic">Github mirror</a>') %>
+  <p><%== l('As Lufi is a free software licensed under of the terms of the <a href="https://gnu.org/licenses/agpl.html" class="classic">AGPLv3</a>, you can install it on you own server. Have a look on the <a href="https://framagit.org/fiat-tux/hat-softwares/lufi/wikis/home" class="classic">Wiki</a> for the procedure.') %><br>
-    </p>
+      <%== l('Get the source code on <a href="https://framagit.org/fiat-tux/hat-softwares/lufi" class="classic">the official repository</a> or on its <a href="https://github.com/ldidry/lufi" class="classic">Github mirror</a>') %>
-    <h3><%= l('Version') %></h3>
+  </p>
-    <p><%== l('Latest tag of this instance: %1', sprintf('<a href="https://framagit.org/fiat-tux/hat-softwares/lufi/-/releases/%s" class="classic">%s</a>', stash('version')->{tag}, stash('version')->{tag})) %></p>
+  <h3><%= l('Version') %></h3>
-    <p><%== l('Latest commit of this instance: %1', sprintf('<a href="https://framagit.org/fiat-tux/hat-softwares/lufi/-/commit/%s" class="classic">%s</a>', stash('version')->{commit}, stash('version')->{commit})) %></p>
+  <p><%== l('Latest tag of this instance: %1', sprintf('<a href="https://framagit.org/fiat-tux/hat-softwares/lufi/-/releases/%s" class="classic">%s</a>', stash('version')->{tag}, stash('version')->{tag})) %></p>
-    <p><%= link_to url_for('/') => ( class => "button action-back-homepage" ) => begin %><%= l('Back to homepage') %><% end%></p>
+  <p><%== l('Latest commit of this instance: %1', sprintf('<a href="https://framagit.org/fiat-tux/hat-softwares/lufi/-/commit/%s" class="classic">%s</a>', stash('version')->{commit}, stash('version')->{commit})) %></p>
+  <p><%= link_to url_for('/') => ( class => "button action-back-homepage" ) => begin %><%= l('Back to homepage') %><% end%></p>
 </section>

themes/default/templates/files.html.ep

@@ -31,7 +31,7 @@
   <table class="files-table">
     <thead>
       <tr>
-        <th></th>
+        <th><%= l('Action') %></th>
         <th><%= l('File name') %></th>
         <th><%= l('Download link') %></th>
         <th><%= l('Counter') %></th>
@@ -52,12 +52,12 @@
   <tr class="item">
     <td class="column selection">
       <div class="checkbox input-delete-on-first-view">
-        <input type="checkbox" autocomplete="off">
+        <input type="checkbox" autocomplete="off" aria-label="Select">
       </div>
     </td>
     <td class="column name"></td>
     <td class="column download">
-      <a class="icon-button icon download" href="#"></a>
+      <a class="icon-button icon download" title="<%= l('Download') %>" href="#"></a>
     </td>
     <td class="column counter"></td>
     <td class="column delete-at-first-view">
@@ -66,10 +66,10 @@
     <td class="column created-at"></td>
     <td class="column expires-at"></td>
     <td class="column deletion">
-      <button type="button" class="icon icon-button delete" href="#"></button>
+      <button type="button" class="icon icon-button delete" title="<%= l('Delete') %>"></button>
     </td>
     <td class="column mail">
-      <a class="icon icon-button mail" href="#"></a>
+      <a class="icon icon-button mail" title="<%= l('Mail') %>" href="#"></a>
     </td>
   </tr>
 </template>

themes/default/templates/index.html.ep

@@ -29,7 +29,7 @@
   <section class="upload-zone">
     <form class="upload-form">
       <div class="input-delete-after-days">
-        <button type="button" class="icon-button info-delete-after-days modal-button"></button>
+        <button type="button" class="icon-button info-delete-after-days modal-button" title="<%= l('Important: more information on delays') %>"></button>
         
         <select class="select-delete-after-days" id="delete-after-days" aria-label="Delay">
         % for my $delay (qw/0 1 7 30 365/) {
@@ -91,8 +91,8 @@
       </div>
 
 
-      <div class="hidden zip-zone card">
+      <div class="hidden zip-zone card" aria-hidden="true">
-        <button type="button" class="icon-button icon close action-close"></button>
+        <button type="button" class="icon-button icon close action-close" title="<%= l('Close') %>"></button>
         
         <div class="file-description">
           <p class="file-name">documents.zip</p>
@@ -102,7 +102,7 @@
         <ul class="files-list"></ul>
 
         <button type="button" class="button action-upload-zip"><%= l("Upload generated zip file") %></button>
-        <div class="zip-compressing hidden">
+        <div class="zip-compressing hidden" aria-hidden="true">
           <div class="icon-container pulse">
             <span class="icon archive"></span>
           </div>
@@ -112,9 +112,9 @@
     </form>
   </section>
 
-  <section class="hidden uploaded-zone">
+  <section class="hidden uploaded-zone" aria-hidden="true">
     <h1><%= l('Uploaded files') %></h1>
-    <header class="hidden buttons">
+    <header class="hidden buttons" aria-hidden="true">
       <div class="actions-buttons upload-success">
         <button type="button" class="button action-copy-links"><%= l('Copy all links to clipboard') %></button>
         <a class="button action-mail-links" href="<%= url_for('/')->to_abs() %>m"><%= l('Send all links by email') %></a>

themes/default/templates/invitations/invite.html.ep

@@ -28,13 +28,13 @@
         <label for="guest_mail">
             <%= l('Email address of your guest') %>
         </label>
-        <input name="guest_mail" type="email" placeholder="name@example.org" required>
+        <input id="guest_mail" name="guest_mail" type="email" placeholder="name@example.org" required>
     </div>
     <div class="input-text">
         <label for="expire_at">
             <%= l('How many days would you like the invitation to be valid?') %>
         </label>
-        <input name="expire_at" type="number" min="1" max="<%= stash('max_expire_at') %>" step="1" value="<%= stash('max_expire_at') %>" required>
+        <input id="expire_at" name="expire_at" type="number" min="1" max="<%= stash('max_expire_at') %>" step="1" value="<%= stash('max_expire_at') %>" required>
     </div>
     <button class="button" type="submit"><%= l('Send the invitation') %></button>
   </form>

themes/default/templates/invitations/my_invitations.html.ep

@@ -17,13 +17,13 @@
   <table>
     <thead>
         <tr>
-            <th></th>
+            <th><%= l('Selection') %></th>
             <th><%= l('Guest mail') %></th>
             <th><%= l('URL') %></th>
             <th><%= l('Created at') %></th>
             <th><%= l('Expire at') %></th>
             <th><%= l('Files sent at') %></th>
-            <th></th>
+            <th><%= l('Files') %></th>
         </tr>
     </thead>
     <tbody class="invitations-list" data-visibility="hidden">
@@ -34,10 +34,10 @@
       % my $class = '';
       % $class = 'deleted' unless $e->is_valid;
       % $class .= ' hidden' unless $e->show_in_list;
-      <tr id="row-<%= $e->token %>" class="item <%= $class %>" data-visibility="<%= ($e->show_in_list) ? 1 : 0 %>">
+      <tr id="row-<%= $e->token %>" class="item <%= $class %>" aria-hidden="<%= ($e->show_in_list) ? 'true' : 'false' %>" data-visibility="<%= ($e->show_in_list) ? 1 : 0 %>">
         <td class="column selection">
           <div class="checkbox input-selection">
-            <input type="checkbox" data-token="<%= $e->token %>">
+            <input type="checkbox" data-token="<%= $e->token %>" aria-label="Select">
             
             % unless ($e->show_in_list) {
               <span class="icon hide-source" title="<%= l('This invitation is normally hidden') %>"></span>
@@ -70,7 +70,7 @@
   <dialog class="modal files-info">
     <section>
       <header>
-        <h1></h1>
+        <h1><%= l('Files sent in invitation XX1 by XX2') %></h1>
       </header>
 
       <div class="content">

themes/default/templates/layouts/default.html.ep

@@ -143,6 +143,16 @@
             });
           }
         };
+
+        const hideNode = (node) => {
+          node.classList.add("hidden");
+          node.setAttribute("aria-hidden", true);
+        }
+
+        const showNode = (node) => {
+          node.classList.remove("hidden");
+          node.setAttribute("aria-hidden", false);
+        }
         
         document.addEventListener("DOMContentLoaded", () => {            
           if (!"Notification" in window || typeof Notification === "undefined") {

themes/default/templates/login.html.ep

@@ -10,11 +10,11 @@
   <form class="login-form" method="post" action="<%= url_for('login') %>">
     <div class="input-text login">
         <label for="login"><%= l('Login') %></label>
-        <input type="text" name="login" autofocus required>
+        <input type="text" id="login" name="login" autofocus required>
     </div>
     <div class="input-text input-password">
         <label for="password"><%= l('Password') %></label>
-        <input type="password" name="password" required>
+        <input type="password" id="password" name="password" required>
     </div>
     %= csrf_field
     <input name="redirect" value="<%= stash('redirect') %>" type="hidden">

themes/default/templates/render.html.ep

@@ -63,10 +63,10 @@
           <a class="button action-download" autofocus href="#"><%= l('Get the file')%></a>
 
           <div class="content">
-            <div class="hidden zip-container">
+            <div class="hidden zip-container" aria-hidden="true">
               <button type="button" class="button action-show-zip"><%= l('Show zip content') %></button>
 
-              <div class="hidden zip-content">
+              <div class="hidden zip-content" aria-hidden="true">
                 <h2><%= l('Zip content:') %></h2>
                 <ul>
                 </ul>