start adding aria

src/ui/static/js/global.js

@@ -26,10 +26,16 @@ class Menu {
 
   toggle() {
     this.sidebarEl.classList.toggle("-translate-x-full");
+    if (this.sidebarEl.classList.contains("-translate-x-full")) {
+      this.sidebarEl.setAttribute("aria-expanded", "false");
+    } else {
+      this.sidebarEl.setAttribute("aria-expanded", "true");
+    }
   }
 
   close() {
     this.sidebarEl.classList.add("-translate-x-full");
+    this.sidebarEl.setAttribute("aria-expanded", "false");
   }
 }
 
@@ -66,7 +72,7 @@ class News {
         news.photo.url,
         news.excerpt,
         news.tags,
-        news.date,
+        news.date
       );
       let cleanHTML = DOMPurify.sanitize(cardHTML);
       //add to DOM
@@ -131,16 +137,23 @@ class Sidebar {
     this.closeBtn = document.querySelector(btnCloseAtt);
     this.openBtn.addEventListener("click", this.open.bind(this));
     this.closeBtn.addEventListener("click", this.close.bind(this));
+    init();
+  }
+
+  init() {
+    this.sidebarEl.setAttribute("aria-expand", "false");
   }
 
   open() {
     this.sidebarEl.classList.add("translate-x-0");
     this.sidebarEl.classList.remove("translate-x-90");
+    this.sidebarEl.setAttribute("aria-expand", "true");
   }
 
   close() {
     this.sidebarEl.classList.add("translate-x-90");
     this.sidebarEl.classList.remove("translate-x-0");
+    this.sidebarEl.setAttribute("aria-expand", "false");
   }
 }
 
@@ -180,7 +193,7 @@ class darkMode {
     };
     const send = await fetch(
       `${location.href.split("/").slice(0, -1).join("/")}/darkmode`,
-      data,
+      data
     );
   }
 }
@@ -220,7 +233,7 @@ class FlashMsg {
           flashEl.remove();
           //update count
           this.flashCount.textContent = document.querySelectorAll(
-            "[data-flash-message]",
+            "[data-flash-message]"
           ).length;
         }
       } catch (err) {}
@@ -313,7 +326,7 @@ class Banner {
         this.bannerEl.querySelector(
           `[role="listitem"][data-id="${
             +visibleEl.getAttribute("data-id") + 1
-          }"]`,
+          }"]`
         ) || this.bannerEl.querySelector(`[role="listitem"][data-id="0"]`);
 
       // Hide current one
@@ -382,7 +395,7 @@ const setMenu = new Menu();
 const setNewsSidebar = new Sidebar(
   "[data-sidebar-info]",
   "[data-sidebar-info-open]",
-  "[data-sidebar-info-close]",
+  "[data-sidebar-info-close]"
 );
 
 const setCheckbox = new Checkbox();
@@ -393,7 +406,7 @@ const setDisabledPop = new DisabledPop();
 const setFlashSidebar = new Sidebar(
   "[data-flash-sidebar]",
   "[data-flash-sidebar-open]",
-  "[data-flash-sidebar-close]",
+  "[data-flash-sidebar-close]"
 );
 const setNews = new News();
 const setDarkM = new darkMode();

src/ui/templates/file_manager.html

@@ -45,7 +45,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
           class="leading-normal text-sm"
         >
           <button
-            type="button"
+
             class="dark:text-gray-500 text-gray-600 after:float-right after:pl-2 after:text-gray-600 dark:after:text-gray-500 after:content-['/']"
           >
             {{current_endpoint}}
@@ -63,7 +63,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
       data-{{current_endpoint}}-add-folder
         class="rounded transition hidden flex-col items-center mx-2 p-2 md:py-4 md:px-6 relative cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-800"
       >
-        <button type="button">
+        <button >
           <svg
             class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100 dark:stroke-gray-600"
             xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +90,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
       data-{{current_endpoint}}-add-file
         class="rounded transition hidden flex-col items-center mx-2 p-2 md:py-4 md:px-6 relative cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-800"
       >
-        <button type="button">
+        <button >
           <svg
               class="-translate-x-1 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100 dark:stroke-gray-600"
               xmlns="http://www.w3.org/2000/svg"
@@ -226,7 +226,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
         <!-- view button-->
         <button
         role="tab"
-          type="button"
+
           value="view"
           data-{{current_endpoint}}-action-dropdown-btn="{{child['name']}}"
           class="duration-300 border-gray-300 hover:brightness-90 bg-white text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-t rounded-t border-b border-l border-r hover:bg-gray-100"
@@ -265,7 +265,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
         child['type'] == "folder" and child['can_edit'] == True %}
         <button
         role="tab"
-          type="button"
+
           value="edit"
           data-{{current_endpoint}}-action-dropdown-btn="{{child['name']}}"
           class="duration-300 border-gray-300 hover:brightness-90 bg-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 w-full border-b border-l border-r hover:bg-gray-100"
@@ -290,7 +290,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
         {% if current_endpoint == "cache" %}
         <button
         role="tab"
-          type="button"
+
           value="download"
           data-{{current_endpoint}}-download="{{child['name'].split('/')[0]}}"
           data-{{current_endpoint}}-file="{{child['name'].split('/')[1]}}"
@@ -313,7 +313,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
         {%else%}
         <button
         role="tab"
-        type="button"
+
         value="download"
         data-{{current_endpoint}}-action-dropdown-btn="{{child['name']}}"
         class="duration-300 border-gray-300 hover:brightness-90 bg-white text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-b border-l border-r hover:bg-gray-100"
@@ -339,7 +339,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
         {% if child['can_delete'] == True %}
         <button
         role="tab"
-          type="button"
+
           value="delete"
           data-{{current_endpoint}}-action-dropdown-btn="{{child['name']}}"
           class="bg-white duration-300 border-gray-300 hover:brightness-90 text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-b border-l border-r hover:bg-gray-100"
@@ -431,7 +431,7 @@ <h5 class="mb-2 font-bold dark:text-white/90">
       <div class="mt-4 w-full justify-end flex">
         <button
         data-{{current_endpoint}}-modal-close
-          type="button"
+
           class="close-btn text-xs mr-2"
         >
           Close

src/ui/templates/flashs.html

@@ -5,7 +5,8 @@
   class="transition-all group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-[4.5rem] right-20 sm:right-24 xl:right-24 z-990"
 >
   <button
-    type="button"
+    aria-controls="sidebar-flash"
+    aria-label="Open flash action sidebar"
     data-flash-sidebar-open
     class="transition scale-90 sm:scale-100 dark:brightness-95 p-3 text-xl bg-white shadow-sm cursor-pointer rounded-circle text-slate-700"
   >
@@ -31,20 +32,23 @@
 
 <!-- right sidebar -->
 <aside
+  id="sidebar-flash"
   data-flash-sidebar
+  aria-expanded="false"
   class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
 >
   <!-- close btn-->
-  <svg
-    data-flash-sidebar-close
-    class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 320 512"
-  >
-    <path
-      d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-    />
-  </svg>
+  <button aria-label="close flash sidebar" data-flash-sidebar-close>
+    <svg
+      class="pointer-events-none fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+    >
+      <path
+        d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
+      />
+    </svg>
+  </button>
   <!-- close btn-->
 
   <!-- header -->
@@ -74,6 +78,8 @@ <h5 class="mt-4 mb-1 dark:text-white font-bold">MESSAGES</h5>
     <!-- flash message-->
     {% for category, message in messages %}
     <div
+      role="alert"
+      aria-description="flash feedback message"
       data-flash-message
       class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
     >
@@ -84,8 +90,8 @@ <h5 class="text-lg mb-0 text-white">Error</h5>
         <h5 class="text-lg mb-0 text-white">Success</h5>
         {%endif%}
         <button
+          aria-label="close flash message"
           data-close-flash-message
-          type="button"
           class="absolute right-8 top-2"
         >
           <svg

src/ui/templates/global_config.html

@@ -7,7 +7,7 @@
       <h5 class="transition duration-300 ease-in-out 0 ml-2 font-bold text-md uppercase dark:text-white/90 mb-0">CONFIGS</h5>
       <!-- search inpt-->
       <div class="flex relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3">
-
+        <label class="sr-only" for="settings-filter">filter settings</label>
         <input
           type="text"
           id="settings-filter"

src/ui/templates/home.html

@@ -36,6 +36,8 @@ <h5 class="mb-1 font-bold dark:text-white/90">{{ version }}</h5>
   <!-- end text -->
   <!-- icon -->
   <div
+    role="img"
+    aria-label="version"
     class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-secondary"
   >
     <svg
@@ -75,6 +77,8 @@ <h5 class="mb-1 font-bold dark:text-white/90">{{ instances_number }}</h5>
   <!-- end text -->
   <!-- icon -->
   <div
+    role="img"
+    aria-label="instances"
     class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-red-500"
   >
     <svg
@@ -122,6 +126,8 @@ <h5 class="mb-1 font-bold dark:text-white/90">{{ services_number }}</h5>
   <!-- end text -->
   <!-- icon -->
   <div
+    role="img"
+    aria-label="services"
     class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-orange-500"
   >
     <svg
@@ -162,7 +168,11 @@ <h5 class="mb-1 font-bold dark:text-white/90">
   </div>
   <!-- end text -->
   <!-- icon -->
-  <div class="inline-block w-12 h-12 text-center rounded-circle bg-yellow-500">
+  <div
+    role="img"
+    aria-label="plugins"
+    class="inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+  >
     <svg
       class="scale-50 -translate-y-1.5 leading-none text-lg relative fill-white"
       xmlns="http://www.w3.org/2000/svg"

src/ui/templates/instances.html

@@ -31,9 +31,10 @@
     <!-- end state and title-->
 
     <!-- detail list -->
-    <div class="grid grid-cols-1 gap-2 mt-4 mb-6 ml-1">
+    <div role="grid" class="grid grid-cols-1 gap-2 mt-4 mb-6 ml-1">
       <!-- detail -->
       <div
+        role="gridcell"
         class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0"
       >
         <p
@@ -50,6 +51,7 @@
       <!-- end detail -->
       <!-- detail -->
       <div
+        role="gridcell"
         class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0"
       >
         <p