From 6ca13dbab88ca7ea7a6c23ac199cd13b1bbe16b8 Mon Sep 17 00:00:00 2001
From: Eirik Sletteberg <eiriksletteberg@gmail.com>
Date: Fri, 18 Apr 2025 17:28:30 +0200
Subject: [PATCH] A11y improvements

---
 static/locales/en/translation.json   |  1 +
 static/locales/it/translation.json   |  1 +
 templates/common/base.html           | 45 +++++++++++++-------------
 templates/webadmin/base.html         | 34 ++++++++++----------
 templates/webadmin/eventaction.html  |  4 +--
 templates/webadmin/mfa.html          |  8 ++---
 templates/webclient/base.html        |  6 ++--
 templates/webclient/editfile.html    |  4 +--
 templates/webclient/files.html       | 48 ++++++++++++++--------------
 templates/webclient/mfa.html         | 12 +++----
 templates/webclient/shares.html      |  4 +--
 templates/webclient/shareupload.html |  2 +-
 12 files changed, 85 insertions(+), 84 deletions(-)

diff --git a/static/locales/en/translation.json b/static/locales/en/translation.json
index 63646ee7a..02c2fce0d 100644
--- a/static/locales/en/translation.json
+++ b/static/locales/en/translation.json
@@ -103,6 +103,7 @@
         "link": "Go to {{link}}"
     },
     "theme": {
+        "switcher": "Switch theme",
         "light": "Light",
         "dark": "Dark",
         "system": "Auto"
diff --git a/static/locales/it/translation.json b/static/locales/it/translation.json
index 2a40aba97..feb49f2a7 100644
--- a/static/locales/it/translation.json
+++ b/static/locales/it/translation.json
@@ -103,6 +103,7 @@
         "link": "Vai a {{link}}"
     },
     "theme": {
+        "switcher": "Cambia tema",
         "light": "Chiaro",
         "dark": "Scuro",
         "system": "Auto"
diff --git a/templates/common/base.html b/templates/common/base.html
index c8d7f9bc2..f94601c8b 100644
--- a/templates/common/base.html
+++ b/templates/common/base.html
@@ -14,7 +14,7 @@
 explicit grant from the SFTPGo Team (support@sftpgo.com).
 -->
 {{- define "errmsg"}}
-<div id="errorMsg" class="{{if not . }}d-none {{end}}rounded border-warning border border-dashed bg-light-warning d-flex align-items-center p-5 mb-10">
+<div id="errorMsg" role="alert" class="{{if not . }}d-none {{end}}rounded border-warning border border-dashed bg-light-warning d-flex align-items-center p-5 mb-10">
     <i class="ki-duotone ki-information-5 fs-3x text-warning me-5">
         <span class="path1"></span>
         <span class="path2"></span>
@@ -730,10 +730,9 @@
     }
 </style>
 {{- end}}
-
 {{- define "theme-switcher"}}
 <div class="d-flex align-items-center ms-2 ms-lg-3">
-    <a href="#" class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
+    <button data-i18n="[aria-label]theme.switcher" aria-label="Theme switcher" aria-haspopup="menu" class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'click'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
         <i class="ki-duotone ki-night-day theme-light-show fs-2">
             <span class="path1"></span>
             <span class="path2"></span>
@@ -750,10 +749,10 @@
             <span class="path1"></span>
             <span class="path2"></span>
         </i>
-    </a>
-    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px" data-kt-menu="true" data-kt-element="theme-mode-menu">
+    </button>
+    <div role="menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px" data-kt-menu="true" data-kt-element="theme-mode-menu">
         <div class="menu-item px-3 my-0">
-            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
+            <button class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
                 <span class="menu-icon" data-kt-element="icon">
                     <i class="ki-duotone ki-night-day fs-2">
                         <span class="path1"></span>
@@ -769,10 +768,10 @@
                     </i>
                 </span>
                 <span data-i18n="theme.light" class="menu-title">Light</span>
-            </a>
+            </button>
         </div>
         <div class="menu-item px-3 my-0">
-            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
+            <button class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                 <span class="menu-icon" data-kt-element="icon">
                     <i class="ki-duotone ki-moon fs-2">
                         <span class="path1"></span>
@@ -780,10 +779,10 @@
                     </i>
                 </span>
                 <span data-i18n="theme.dark" class="menu-title">Dark</span>
-            </a>
+            </button>
         </div>
         <div class="menu-item px-3 my-0">
-            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
+            <button class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
                 <span class="menu-icon" data-kt-element="icon">
                     <i class="ki-duotone ki-screen fs-2">
                         <span class="path1"></span>
@@ -793,7 +792,7 @@
                     </i>
                 </span>
                 <span data-i18n="theme.system" class="menu-title">System</span>
-            </a>
+            </button>
         </div>
     </div>
 </div>
@@ -849,15 +848,15 @@
         <div class="d-flex flex-column flex-root app-root d-none" id="app_root">
             <div class="app-page  flex-column flex-column-fluid " id="kt_app_page">
                 {{- if .LoggedUser.Username}}
-                <div id="kt_app_header" class="app-header" data-kt-sticky="true" data-kt-sticky-activate="{default: true, lg: true}" data-kt-sticky-name="app-header-minimize" data-kt-sticky-offset="{default: '200px', lg: '300px'}" data-kt-sticky-animation="false">
+                <aside id="kt_app_header" class="app-header" data-kt-sticky="true" data-kt-sticky-activate="{default: true, lg: true}" data-kt-sticky-name="app-header-minimize" data-kt-sticky-offset="{default: '200px', lg: '300px'}" data-kt-sticky-animation="false">
                     <div class="app-container  container-fluid d-flex align-items-stretch flex-stack " id="kt_app_header_container">
                         <div class="d-flex align-items-center d-block d-lg-none ms-n3" title="Show sidebar menu">
-                            <div class="btn btn-icon btn-color-gray-800 btn-active-color-primary w-35px h-35px me-1" id="kt_app_sidebar_mobile_toggle">
+                            <button class="btn btn-icon btn-color-gray-800 btn-active-color-primary w-35px h-35px me-1" id="kt_app_sidebar_mobile_toggle">
                                 <i class="ki-duotone ki-abstract-14 fs-2">
                                     <span class="path1"></span>
                                     <span class="path2"></span>
                                 </i>
-                            </div>
+                            </button>
                             <span>
                                 <img alt="Logo" src="{{.StaticURL}}{{.Branding.LogoPath}}" class="h-30px" />
                             </span>
@@ -872,7 +871,7 @@
 							</div>
                         </div>
                     </div>
-                </div>
+                </aside>
                 {{- else if .IsLoggedToShare}}
                 <div class="app-container container-fluid d-flex mt-5">
                     <div class="d-flex align-items-center d-block ms-3">
@@ -892,25 +891,25 @@
 
                         </div>
                     </div> -->
-                    <div id="kt_app_sidebar" class="app-sidebar flex-column" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="300px" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
-                        <div class="app-sidebar-header flex-column mx-10 pt-8" id="kt_app_sidebar_header">
+                    <aside id="kt_app_sidebar" class="app-sidebar flex-column" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="300px" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
+                        <header class="app-sidebar-header flex-column mx-10 pt-8" id="kt_app_sidebar_header">
                             <div class="d-flex flex-stack d-none d-lg-flex mb-13">
                                 <div class="app-sidebar-logo">
 									<img alt="Logo" src="{{.StaticURL}}{{.Branding.LogoPath}}" class="h-40px app-sidebar-logo-default" />
 									<span class="text-sidebar fs-4 fw-semibold ps-5">{{.Branding.ShortName}}</span>
 								</div>
                             </div>
-                        </div>
+                        </header>
                         <div class="app-sidebar-navs flex-column-fluid pb-6" id="kt_app_sidebar_navs">
                             <div id="kt_app_sidebar_navs_wrappers" class="hover-scroll-y my-2 mx-4" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_sidebar_header" data-kt-scroll-wrappers="#kt_app_sidebar_navs" data-kt-scroll-offset="5px">
-                                <div id="#kt_app_sidebar_menu" data-kt-menu="true" data-kt-menu-expand="false" class="menu menu-column menu-rounded menu-sub-indention menu-active-bg mb-7">
+                                <nav id="#kt_app_sidebar_menu" data-kt-menu="true" data-kt-menu-expand="false" class="menu menu-column menu-rounded menu-sub-indention menu-active-bg mb-7">
                                     {{- template "sidebaritems" .}}
-                                </div>
+                                </nav>
                             </div>
                         </div>
-                    </div>
+                    </aside>
                     {{- end}}
-                    <div class="app-main flex-column flex-row-fluid " id="kt_app_main">
+                    <main class="app-main flex-column flex-row-fluid " id="kt_app_main">
                         <div class="d-flex flex-column flex-column-fluid">
                             <div id="kt_app_content" class="app-content flex-column-fluid">
                                 <div id="kt_app_content_container" class="app-container container-fluid">
@@ -927,7 +926,7 @@
                             </div>
                         </div>
                         {{- end}}
-                    </div>
+                    </main>
                 </div>
             </div>
         </div>
diff --git a/templates/webadmin/base.html b/templates/webadmin/base.html
index f60bac8ce..27675ff86 100644
--- a/templates/webadmin/base.html
+++ b/templates/webadmin/base.html
@@ -17,13 +17,13 @@
 {{- block "additionalnavitems" .}}{{- end}}
 {{- template "theme-switcher"}}
 <div class="d-flex align-items-center ms-2 ms-lg-3">
-    <div class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
+    <button aria-haspopup="menu" aria-label="User menu" data-i18n="[aria-label]title.profile" class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'click'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
         <i class="ki-duotone ki-user fs-2">
             <i class="path1"></i>
             <i class="path2"></i>
         </i>
-    </div>
-    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 w-250px" data-kt-menu="true">
+    </button>
+    <div role="menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 w-250px" data-kt-menu="true">
         <div class="menu-item px-3 my-0">
             <div class="menu-content d-flex align-items-center px-3 py-2">
                 <div class="me-5">
@@ -60,9 +60,9 @@
         {{- end}}
         {{- end}}
         <div class="menu-item px-3 my-0">
-            <a id="id_logout_link" href="#" class="menu-link px-3 py-2">
+            <button id="id_logout_link" class="menu-link px-3 py-2">
                 <span data-i18n="login.signout" class="menu-title">Sign out</span>
-            </a>
+            </button>
         </div>
     </div>
 </div>
@@ -128,7 +128,7 @@
 {{- end}}
 {{ if .LoggedUser.HasPermission "*"}}
 <div data-kt-menu-trigger="click" class="menu-item menu-accordion {{- if .IsEventManagerPage}} here show{{- end}}">
-    <span class="menu-link">
+    <button aria-controls="menu-sub-accordion-1" class="menu-link">
         <span class="menu-icon">
             <i class="ki-duotone ki-calendar fs-1">
                 <span class="path1"></span>
@@ -137,8 +137,8 @@
         </span>
         <span data-i18n="title.event_manager" class="menu-title">Event Manager</span>
         <span class="menu-arrow"></span>
-    </span>
-    <div class="menu-sub menu-sub-accordion">
+    </button>
+    <nav id="menu-sub-accordion-1" class="menu-sub menu-sub-accordion">
         <div class="menu-item">
             <a class="menu-link {{- if eq .CurrentURL .EventRulesURL}} active{{- end}}" href="{{.EventRulesURL}}">
                 <span class="menu-bullet">
@@ -155,19 +155,19 @@
                 <span data-i18n="title.event_actions" class="menu-title fs-5 fw-semibold">Actions</span>
             </a>
         </div>
-    </div>
+    </nav>
 </div>
 {{- end}}
 {{- if or (.LoggedUser.HasPermission "*") (and .HasDefender (.LoggedUser.HasPermission "view_defender"))}}
 <div data-kt-menu-trigger="click" class="menu-item menu-accordion {{- if .IsIPManagerPage}} here show{{- end}}">
-    <span class="menu-link">
+    <button class="menu-link" aria-controls="menu-sub-accordion-2" aria-expanded="true">
         <span class="menu-icon">
             <i class="ki-solid ki-shield fs-1"></i>
         </span>
         <span data-i18n="title.ip_manager" class="menu-title">IP Manager</span>
         <span class="menu-arrow"></span>
-    </span>
-    <div class="menu-sub menu-sub-accordion">
+    </button>
+    <nav id="menu-sub-accordion-2" class="menu-sub menu-sub-accordion">
         {{- if .LoggedUser.HasPermission "*"}}
         <div class="menu-item">
             <a class="menu-link {{- if eq .CurrentURL .IPListsURL}} active{{- end}}" href="{{.IPListsURL}}">
@@ -188,12 +188,12 @@
             </a>
         </div>
         {{- end}}
-    </div>
+    </nav>
 </div>
 {{- end}}
 {{- if or (.LoggedUser.HasPermission "*") (.LoggedUser.HasPermission "view_status") (and .HasSearcher (.LoggedUser.HasPermission "view_events"))}}
 <div data-kt-menu-trigger="click" class="menu-item menu-accordion {{- if .IsServerManagerPage}} here show{{- end}}">
-    <span class="menu-link">
+    <button aria-controls="menu-sub-accordion-3" class="menu-link">
         <span class="menu-icon">
             <i class="ki-duotone ki-setting-3 fs-1">
                 <span class="path1"></span>
@@ -205,8 +205,8 @@
         </span>
         <span data-i18n="title.server_manager" class="menu-title">Server Manager</span>
         <span class="menu-arrow"></span>
-    </span>
-    <div class="menu-sub menu-sub-accordion">
+    </button>
+    <nav id="menu-sub-accordion-3" class="menu-sub menu-sub-accordion">
         {{- if .LoggedUser.HasPermission "*"}}
         <div class="menu-item">
             <a class="menu-link {{- if eq .CurrentURL .ConfigsURL}} active{{- end}}" href="{{.ConfigsURL}}">
@@ -247,7 +247,7 @@
             </a>
         </div>
         {{- end}}
-    </div>
+    </nav>
 </div>
 {{- end}}
 {{- if .LoggedUser.HasPermission "*"}}
diff --git a/templates/webadmin/eventaction.html b/templates/webadmin/eventaction.html
index c50f6b0c6..debeeffac 100644
--- a/templates/webadmin/eventaction.html
+++ b/templates/webadmin/eventaction.html
@@ -883,9 +883,9 @@ <h3 data-i18n="actions.fs_types.copy" class="card-title section-title-inner">Cop
         <div class="modal-content">
             <div class="modal-header">
                 <h3 data-i18n="actions.placeholders_modal_title" class="modal-title">Supported placeholders</h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body fs-5 fw-semibold">
                 <p>
diff --git a/templates/webadmin/mfa.html b/templates/webadmin/mfa.html
index d90f91937..efdfad58d 100644
--- a/templates/webadmin/mfa.html
+++ b/templates/webadmin/mfa.html
@@ -157,9 +157,9 @@ <h2 class="accordion-header" id="accordion_rec_codes">
         <div class="modal-content">
             <div class="modal-header">
                 <h3 id="idRecoveryCodesTitle" class="modal-title"></h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body">
                 <div id="idRecoveryCodesList" class="d-flex flex-column">
@@ -177,9 +177,9 @@ <h3 id="idRecoveryCodesTitle" class="modal-title"></h3>
         <div class="modal-content">
             <div class="modal-header">
                 <h3 data-i18n="2fa.setup_title" class="modal-title">Set up two-factor authentication</h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body scroll-y pt-10 pb-15 px-lg-17">
                 <div class="text-gray-700 fw-semibold fs-6 mb-10">
diff --git a/templates/webclient/base.html b/templates/webclient/base.html
index 1280cd3e2..a07e4f639 100644
--- a/templates/webclient/base.html
+++ b/templates/webclient/base.html
@@ -19,13 +19,13 @@
 {{- template "theme-switcher"}}
 {{- end}}
 <div class="d-flex align-items-center ms-2 ms-lg-3">
-    <div class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
+    <button aria-haspopup="menu" aria-label="User menu" data-i18n="[aria-label]title.profile" class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'click'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
         <i class="ki-duotone ki-user fs-2">
             <i class="path1"></i>
             <i class="path2"></i>
         </i>
-    </div>
-    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 w-250px" data-kt-menu="true">
+    </button>
+    <div role="menu"class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 w-250px" data-kt-menu="true">
         {{- if not .IsLoggedToShare }}
         <div class="menu-item px-3 my-0">
             <div class="menu-content d-flex align-items-center px-3 py-2">
diff --git a/templates/webclient/editfile.html b/templates/webclient/editfile.html
index c86a28075..bb160eaad 100644
--- a/templates/webclient/editfile.html
+++ b/templates/webclient/editfile.html
@@ -67,9 +67,9 @@ <h6 id="card_title" class="card-title section-title"></h6>
         <div class="modal-content">
             <div class="modal-header">
                 <h3 data-i18n="editor.keybinding" class="modal-title">Editor keybindings</h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body fs-5 fw-semibold">
                 <p>
diff --git a/templates/webclient/files.html b/templates/webclient/files.html
index 66dc49af4..9ea9e9689 100644
--- a/templates/webclient/files.html
+++ b/templates/webclient/files.html
@@ -64,20 +64,20 @@
     </div>
     <div class="card-body">
         <div class="d-flex flex-stack">
-            <div class="badge badge-lg badge-light-primary" data-kt-filemanager-table-nav-bar="base">
+            <nav class="badge badge-lg badge-light-primary" data-kt-filemanager-table-nav-bar="base">
                 <div class="d-flex align-items-center flex-wrap">
                     <i class="ki-duotone ki-home fs-1 text-primary me-3"></i>
                     <a data-i18n="fs.home" href="{{.FilesURL}}?path=%2F">Home</a>
                     {{- range .Paths}}
                     <i class="ki-duotone ki-right fs-2x text-primary mx-1"></i>
                     {{- if eq .Href ""}}
-                    <span>{{.DirName}}</span>
+                    <span aria-current="page">{{.DirName}}</span>
                     {{- else}}
-                    <a href="{{.Href}}">{{.DirName}}</a>
+                    <a aria-current="page" href="{{.Href}}">{{.DirName}}</a>
                     {{- end}}
                     {{- end}}
                 </div>
-            </div>
+            </nav>
             <div class="d-flex align-items-center d-none" data-kt-filemanager-table-toolbar="selected">
                 <div class="fw-bold me-5">
                     <span class="me-2" data-kt-filemanager-table-select="selected_count"></span>
@@ -140,8 +140,8 @@
                     <span class="path2"></span>
                 </i>
             </span>
-            <input data-i18n="[placeholder]fs.create_folder_msg" id="file_manager_new_folder_input" type="text" name="new_folder_name" placeholder="Enter the new folder name" class="form-control mw-250px me-3" />
-            <button class="btn btn-icon btn-light-primary me-3" id="file_manager_add_folder">
+            <input required data-i18n="[placeholder]fs.create_folder_msg" id="file_manager_new_folder_input" type="text" name="new_folder_name" placeholder="Enter the new folder name" class="form-control mw-250px me-3" />
+            <button data-i18n="[aria-label]general.add" class="btn btn-icon btn-light-primary me-3" id="file_manager_add_folder">
                 <span class="indicator-label">
                     <i class="ki-duotone ki-check fs-1"></i>
                 </span>
@@ -149,7 +149,7 @@
                     <span class="spinner-border spinner-border-sm align-middle"></span>
                 </span>
             </button>
-            <button class="btn btn-icon btn-light-danger" id="file_manager_cancel_folder">
+            <button data-i18n="[aria-label]general.cancel" class="btn btn-icon btn-light-danger" id="file_manager_cancel_folder">
                 <i class="ki-solid ki-cross fs-1"></i>
             </button>
         </div>
@@ -159,7 +159,7 @@
         <div id="upload_files_empty_container" class="d-none mt-10">
             <form id="upload_files_empty_form" action="{{.FilesURL}}?path={{.CurrentDir}}" method="POST" enctype="multipart/form-data">
                 <div class="fv-row">
-                    <div class="dropzone mh-350px overflow-auto visibility-auto" id="upload_files_empty">
+                    <button type="button" class="dropzone mh-350px overflow-auto visibility-auto" id="upload_files_empty">
                         <div class="dz-message needsclick align-items-center">
                             <i class="ki-duotone ki-file-up fs-3x text-primary">
                                 <span class="path1"></span>
@@ -170,7 +170,7 @@ <h3 data-i18n="fs.upload.message_empty" class="fs-5 fw-bold text-gray-900 mb-1">
                                 <!-- <span class="fs-7 fw-semibold text-gray-500">Upload up to 30 files</span> -->
                             </div>
                         </div>
-                    </div>
+                    </button>
                 </div>
             </form>
             <div class="d-flex justify-content-end mt-5">
@@ -2396,14 +2396,14 @@ <h4 class="gslide-title"></h4>
 {{- define "additionalnavitems"}}
 {{- if .QuotaUsage.HasQuotaInfo}}
 <div class="d-flex align-items-center ms-2 ms-lg-3">
-    <div class="btn btn-icon btn-active-light-primary position-relative w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
+    <button aria-haspopup="menu" class="btn btn-icon btn-active-light-primary position-relative w-35px h-35px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'click'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
         <i class="ki-duotone {{if .QuotaUsage.IsQuotaLow}}ki-information-5 text-warning{{else}}ki-information-2{{end}} fs-2">
             <span class="path1"></span>
             <span class="path2"></span>
             <span class="path3"></span>
         </i>
-    </div>
-    <div class="menu menu-sub menu-sub-dropdown menu-column w-375px" data-kt-menu="true">
+    </button>
+    <div role="menu" class="menu menu-sub menu-sub-dropdown menu-column w-375px" data-kt-menu="true">
         <div class="card">
             <div class="card-header">
                 <h3 class="card-title"><span data-i18n="fs.quota_usage.title" class="text-gray-700 fw-bold fs-6">Quota usage</span></h3>
@@ -2493,14 +2493,14 @@ <h3 class="card-title"><span data-i18n="fs.quota_usage.title" class="text-gray-7
         <div class="modal-content">
             <div class="modal-header border-0">
                 <h3 data-i18n="fs.upload.text" class="modal-title">Upload files</h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body">
                 <form id="upload_files_form" action="{{.FilesURL}}?path={{.CurrentDir}}" method="POST" enctype="multipart/form-data">
                     <div class="fv-row">
-                        <div class="dropzone mh-350px overflow-auto visibility-auto" id="upload_files">
+                        <button type="button" class="dropzone mh-350px overflow-auto visibility-auto" id="upload_files">
                             <div class="dz-message needsclick align-items-center">
                                 <i class="ki-duotone ki-file-up fs-3x text-primary"><span class="path1"></span><span class="path2"></span></i>
                                 <div class="ms-4">
@@ -2508,7 +2508,7 @@ <h3 data-i18n="fs.upload.message" class="fs-5 fw-bold text-gray-900 mb-1">Drop f
                                     <!-- <span class="fs-7 fw-semibold text-gray-500">Upload up to 30 files</span> -->
                                 </div>
                             </div>
-                        </div>
+                        </button>
                     </div>
                 </form>
             </div>
@@ -2527,9 +2527,9 @@ <h3 data-i18n="fs.upload.message" class="fs-5 fw-bold text-gray-900 mb-1">Drop f
                 <h5 class="modal-title">
                     <span id="video_title"></span>
                 </h5>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
 
             <div class="modal-body">
@@ -2549,9 +2549,9 @@ <h5 class="modal-title">
                 <h5 class="modal-title">
                     <span id="rename_title"></span>
                 </h5>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
 
             <div class="modal-body">
@@ -2577,9 +2577,9 @@ <h5 class="modal-title">
                 <h3 data-i18n="general.choose_target_folder" class="modal-title">
                     Choose target folder
                 </h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
 
             <div class="modal-body">
@@ -2594,10 +2594,10 @@ <h3 data-i18n="general.choose_target_folder" class="modal-title">
                 </div>
                 <div class="row">
                     <div class="col-md-9 align-items-center d-flex flex-stack">
-                        <div class="badge badge-lg badge-light-primary">
+                        <nav class="badge badge-lg badge-light-primary">
                             <div id="dirs_browser_nav" class="d-flex align-items-center flex-wrap">
                             </div>
-                        </div>
+                        </nav>
                     </div>
                     <div class="col-md-3 align-items-center d-flex justify-content-end">
                         <button id="id_dir_browser_create_dir" type="button" class="btn btn-flex btn-primary">
diff --git a/templates/webclient/mfa.html b/templates/webclient/mfa.html
index 6a8ea801a..fdbe460f8 100644
--- a/templates/webclient/mfa.html
+++ b/templates/webclient/mfa.html
@@ -184,9 +184,9 @@ <h2 class="accordion-header" id="accordion_rec_codes">
         <div class="modal-content">
             <div class="modal-header">
                 <h3 id="idRecoveryCodesTitle" class="modal-title"></h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body">
                 <div id="idRecoveryCodesList" class="d-flex flex-column">
@@ -204,9 +204,9 @@ <h3 id="idRecoveryCodesTitle" class="modal-title"></h3>
         <div class="modal-content">
             <div class="modal-header">
                 <h3 data-i18n="2fa.info_title" class="modal-title">Learn about two-factor authentication</h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body fw-semibold fs-6">
                 <p data-i18n="2fa.info1">SSH protocol (SFTP/SCP/SSH commands) will ask for the passcode if the client uses keyboard interactive authentication.</p>
@@ -229,9 +229,9 @@ <h3 data-i18n="2fa.info_title" class="modal-title">Learn about two-factor authen
         <div class="modal-content">
             <div class="modal-header">
                 <h3 data-i18n="2fa.setup_title" class="modal-title">Set up two-factor authentication</h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body scroll-y pt-10 pb-15 px-lg-17">
                 <div class="text-gray-700 fw-semibold fs-6 mb-10">
diff --git a/templates/webclient/shares.html b/templates/webclient/shares.html
index 7de12d320..795ad0d70 100644
--- a/templates/webclient/shares.html
+++ b/templates/webclient/shares.html
@@ -69,9 +69,9 @@ <h3 data-i18n="share.view_manage" class="card-title section-title">View and mana
                 <h3 data-i18n="share.access_links_title" class="modal-title">
                     Share access links
                 </h3>
-                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
+                <button data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal" aria-label="Close">
                     <i class="ki-solid ki-cross fs-2x text-gray-700"></i>
-                </div>
+                </button>
             </div>
             <div class="modal-body fs-5">
                 <div id="readShare" class="mb-5">
diff --git a/templates/webclient/shareupload.html b/templates/webclient/shareupload.html
index 92b0cccd6..d759f304a 100644
--- a/templates/webclient/shareupload.html
+++ b/templates/webclient/shareupload.html
@@ -40,7 +40,7 @@ <h3 data-i18n="title.upload_to_share" class="card-title section-title">Upload on
             {{- template "errmsg" ""}}
             <form id="upload_files_form" action="{{.UploadBasePath}}" method="POST" enctype="multipart/form-data">
                 <div class="fv-row">
-                    <div class="dropzone mh-350px overflow-auto visibility-auto" id="upload_files">
+                    <div role="button" tabindex="0" class="dropzone mh-350px overflow-auto visibility-auto" id="upload_files">
                         <div class="dz-message needsclick align-items-center">
                             <i class="ki-duotone ki-file-up fs-3x text-primary"><span class="path1"></span><span class="path2"></span></i>
                             <div class="ms-4">