A11y improvements

static/locales/en/translation.json

@@ -103,6 +103,7 @@
         "link": "Go to {{link}}"
     },
     "theme": {
+        "switcher": "Switch theme",
         "light": "Light",
         "dark": "Dark",
         "system": "Auto"

static/locales/it/translation.json

@@ -103,6 +103,7 @@
         "link": "Vai a {{link}}"
     },
     "theme": {
+        "switcher": "Cambia tema",
         "light": "Chiaro",
         "dark": "Scuro",
         "system": "Auto"

templates/common/base.html

@@ -14,7 +14,7 @@
 explicit grant from the SFTPGo Team ([email protected]).
 -->
 {{- 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,21 +768,21 @@
                     </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>
                         <span class="path2"></span>
                     </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>

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 "*"}}

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>

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">

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">

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>