feat: améliorer l'accessibilité et les performances avec support pour prefers-reduced-motion, prefers-contrast, focus-visible, ajout de preconnect pour les domaines externes, versioning des assets CSS/JS, et correction des chemins de ressources avec ltrim

shaarli-pro/css/custom_views.css

@@ -26,8 +26,8 @@ body.view-todo #linklist {
 /* Sidebar */
 .todo-sidebar {
     width: 280px;
-    background-color: var(--background-secondary, #f8f9fa);
-    border-right: 1px solid var(--border-color, #e2e8f0);
+    background-color: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
     padding: 1rem;
     display: flex;
     flex-direction: column;

shaarli-pro/css/style.css

@@ -3744,3 +3744,58 @@ select:focus {
 .text-right {
     text-align: right;
 }
+
+/* ===== Accessibility Enhancements ===== */
+
+/* Reduced Motion - Respect user preferences */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+    :root {
+        --border: #000000;
+        --text-main: #000000;
+        --text-secondary: #000000;
+        --primary: #0000ff;
+        --primary-hover: #0000cc;
+        --bg-body: #ffffff;
+        --bg-sidebar: #ffffff;
+        --bg-card: #ffffff;
+    }
+
+    [data-theme="dark"] {
+        --border: #ffffff;
+        --text-main: #ffffff;
+        --text-secondary: #ffffff;
+        --primary: #00ffff;
+        --primary-hover: #66ffff;
+        --bg-body: #000000;
+        --bg-sidebar: #000000;
+        --bg-card: #000000;
+    }
+
+    .sidebar-link:focus,
+    .header-nav-link:focus,
+    button:focus-visible,
+    a:focus-visible {
+        outline: 3px solid currentColor;
+        outline-offset: 4px;
+    }
+}
+
+/* Focus Visible - Enhanced keyboard navigation */
+@supports not selector(:focus-visible) {
+    *:focus {
+        outline: 2px solid var(--primary);
+        outline-offset: 2px;
+    }
+}

shaarli-pro/img/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#2563eb"/>
+  <path d="M21 17h22a4 4 0 0 1 4 4v26a4 4 0 0 1-4 4H21a4 4 0 0 1-4-4V21a4 4 0 0 1 4-4Z" fill="#ffffff"/>
+  <circle cx="32" cy="32" r="7" fill="#2563eb"/>
+</svg>

shaarli-pro/includes.html

@@ -2,6 +2,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="referrer" content="same-origin">
+<link rel="icon" type="image/svg+xml" href="/{function="ltrim($asset_path, '/')"}/img/favicon.svg#">
 <link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
 <link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
 <link rel="search" type="application/opensearchdescription+xml" href="{$base_path}/open-search#" title="Shaarli search - {$shaarlititle}" />
@@ -22,42 +23,46 @@
 </script>
 
 <!-- Professional Theme CSS -->
-<link type="text/css" rel="stylesheet" href="{$asset_path}/css/style.css#" />
-<link type="text/css" rel="stylesheet" href="{$asset_path}/css/custom_views.css#" />
+<link type="text/css" rel="stylesheet" href="/{function="ltrim($asset_path, '/')"}/css/style.css?v=1.0.1" />
+<link type="text/css" rel="stylesheet" href="/{function="ltrim($asset_path, '/')"}/css/custom_views.css?v=1.0.1" />
 {if="$pageName=='editlink' || $pageName=='addlink' || $pageName=='editlinkbatch'"}
-<link type="text/css" rel="stylesheet" href="{$asset_path}/css/awesomplete.css#" />
-<script src="{$asset_path}/js/awesomplete.min.js#" defer></script>
+<link type="text/css" rel="stylesheet" href="/{function="ltrim($asset_path, '/')"}/css/awesomplete.css?v=1.0.1" />
+<script src="/{function="ltrim($asset_path, '/')"}/js/awesomplete.min.js?v=1.0.1" defer></script>
 {/if}
 
+<!-- Preconnect to external domains for performance -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
 
 <!-- Icons (Material Design Icons) -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css" crossorigin="anonymous">
 
 <!-- Theme Color -->
 <meta name="theme-color" content="#2563eb">
 
 <!-- Plugins CSS -->
 {loop="$plugins_includes.css_files"}
-<link type="text/css" rel="stylesheet" href="{$root_path}/{$value}#" />
+<link type="text/css" rel="stylesheet" href="/{function="ltrim($value, '/')"}?v=1.0.1" />
 {/loop}
 
 {if="is_file('data/user.css')"}
-<link type="text/css" rel="stylesheet" href="{$root_path}/data/user.css#" />
+<link type="text/css" rel="stylesheet" href="/data/user.css?v=1.0.1" />
 {/if}
 
 <script>
 var shaarli = {
 basePath: '{$base_path}',
 rootPath: '{$root_path}',
-assetPath: '{$asset_path}',
+assetPath: '/{function="ltrim($asset_path, '/')"}',
 isAuth: {if="$is_logged_in"}true{else}false{/if},
 pageName: '{$pageName}',
 visibility: '{$visibility}',
 untaggedonly: {if="$untaggedonly"}true{else}false{/if}
 };
 </script>
-<script src="{$asset_path}/js/script.js#" defer></script>
-<script src="{$asset_path}/js/custom_views.js#" defer></script>
+<script src="/{function="ltrim($asset_path, '/')"}/js/script.js?v=1.0.1" defer></script>
+<script src="/{function="ltrim($asset_path, '/')"}/js/custom_views.js?v=1.0.1" defer></script>
 
 {if="file_exists('tpl/shaarli-pro/extra.html')"}
 {include="extra"}

shaarli-pro/js/script.js

@@ -59,14 +59,24 @@ document.addEventListener('DOMContentLoaded', () => {
     let cachedBookmarks = null;
     let cachedTags = null;
 
+    // Escape HTML to prevent XSS
+    function escapeHtml(text) {
+        if (typeof text !== 'string') return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
     // Highlight matching text with <mark> tags
     function highlightMatch(text, query) {
-        if (!query || query.length === 0) return text;
+        if (!query || query.length === 0) return escapeHtml(text);
 
+        // Escape HTML first to prevent XSS
+        const escapedText = escapeHtml(text);
         // Escape special regex characters in query
         const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         const regex = new RegExp(`(${escapedQuery})`, 'gi');
-        return text.replace(regex, '<mark>$1</mark>');
+        return escapedText.replace(regex, '<mark>$1</mark>');
     }
 
     // Fuzzy search - matches substring anywhere in text

shaarli-pro/linklist.html

@@ -1,114 +1,148 @@
 <!DOCTYPE html>
-<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
-<head>
-{$pageName="linklist"}
-{include="includes"}
-</head>
-<body>
-{include="page.header"}
-<div id="linklist">
-{loop="$plugin_start_zone"}
-{$value}
-{/loop}
-<!-- {* ----- barre outils ----- *} -->
-<div class="content-toolbar">
-<div class="toolbar-left">{include="linklist.paging"}</div>
-<div class="toolbar-right">
-<div class="view-toggle">
-<button class="view-toggle-btn active" id="view-grid-btn" title="Grid"><i class="mdi mdi-view-grid"></i></button>
-<button class="view-toggle-btn" id="view-list-btn" title="List"><i class="mdi mdi-view-list"></i></button>
-<button class="view-toggle-btn" id="view-compact-btn" title="Compact"><i class="mdi mdi-view-headline"></i></button>
-</div>
-</div>
-</div>
+<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
 
-<!-- {* ----- résultats de recherche par tags ----- *} -->
-{if="!empty($search_tags)"}
-<div class="search-results-header">
-<span class="search-count">{$result_count} results tagged</span>
-{$exploded_tags=tags_str2array($search_tags, $tags_separator)}
-{loop="$exploded_tags"}
-<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="urlencode($value)"}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a></span>
-{/loop}
-</div>
-{/if}
+     <head>
+          {$pageName="linklist"}
+          {include="includes"}
+     </head>
 
-<!-- {* ----- aucun lien ----- *} -->
-{if="count($links)==0"}
-<div class="empty-state">
-<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
-<h2 class="empty-state-title">No bookmarks found</h2>
-<p class="empty-state-text">{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>{else}Start adding bookmarks to see them here.{/if}</p>
-</div>
-{else}
-<!-- {* ----- au moins un lien ----- *} -->
-<div class="links-list view-grid" id="links-list">
-{loop="$links"}
-<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
-{if="$is_logged_in"}
-<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>
-{/if}
-{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentElement.style.display='none'"></div>{/if}
-<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
-<div class="link-content">
-<div class="link-header">
-<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>
-{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}
-</a>
-<span class="link-url">{$value.url}</span>
-<div class="link-meta">
-<span class="link-date">{$value.created|format_date}</span>
-<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
-</div>
-</div>
+     <body>
+          {include="page.header"}
+          <div id="linklist">
+               {loop="$plugin_start_zone"}
+               {$value}
+               {/loop}
+               <!-- {* ----- toolbar ----- *} -->
+               <div class="content-toolbar">
+                    <div class="toolbar-left">{include="linklist.paging"}</div>
+                    <div class="toolbar-right">
+                         <div class="view-toggle" role="group" aria-label="Changer de vue">
+                              <button class="view-toggle-btn active" id="view-grid-btn" aria-label="Vue grille"
+                                   aria-pressed="true"><i class="mdi mdi-view-grid" aria-hidden="true"></i></button>
+                              <button class="view-toggle-btn" id="view-list-btn" aria-label="Vue liste"
+                                   aria-pressed="false"><i class="mdi mdi-view-list" aria-hidden="true"></i></button>
+                              <button class="view-toggle-btn" id="view-compact-btn" aria-label="Vue compacte"
+                                   aria-pressed="false"><i class="mdi mdi-view-headline"
+                                        aria-hidden="true"></i></button>
+                         </div>
+                    </div>
+               </div>
 
-{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
-<div class="link-footer">
-<div class="link-tag-list">
-{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
-</div>
-<div class="link-actions">
-{if="$is_logged_in"}
-<a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
-<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
-<a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
-{/if}
-<!-- bouton plein écran (dans les 3 vues) -->
-<a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
-{loop="$value.link_plugin"}
-<span class="link-plugin">{$value}</span>
-{/loop}
-<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
-</div>
-</div>
-</div>
-</div>
-{/loop}
-</div>
-{include="linklist.paging"}
-{/if} 
-{loop="$plugin_end_zone"}
-{$value}
-{/loop}
-</div>
+               <!-- {* ----- tag search results ----- *} -->
+               {if="!empty($search_tags)"}
+               <div class="search-results-header">
+                    <span class="search-count">{$result_count} résultat(s) tagué(s)</span>
+                    {$exploded_tags=tags_str2array($search_tags, $tags_separator)}
+                    {loop="$exploded_tags"}
+                    <span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="
+                              urlencode($value)"}" class="search-tag-close" title="Retirer le tag"
+                              aria-label="Retirer le tag {$value}"><i class="mdi mdi-close"
+                                   aria-hidden="true"></i></a></span>
+                    {/loop}
+               </div>
+               {/if}
 
-<!-- {* ----- modale unique ----- *} -->
-<div id="desc-modal" class="modal-overlay">
-<div class="modal-content">
-<button class="modal-close" id="desc-modal-close">&times;</button>
-<div class="modal-body" id="desc-modal-body"></div>
-</div>
-</div>
+               <!-- {* ----- no links ----- *} -->
+               {if="count($links)==0"}
+               <div class="empty-state" role="status" aria-live="polite">
+                    <div class="empty-state-icon" aria-hidden="true"><i class="mdi mdi-bookmark-off-outline"></i></div>
+                    <h2 class="empty-state-title">Aucun bookmark trouvé</h2>
+                    <p class="empty-state-text">{if="!empty($search_term)"}Aucun résultat pour : <strong>{$search_term}</strong>{else}Commencez à ajouter des bookmarks pour les voir apparaître ici.{/if}</p>
+               </div>
+               {else}
+               <!-- {* ----- at least one link ----- *} -->
+               <div class="links-list view-grid" id="links-list">
+                    {loop="$links"}
+                    <div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
+                         {if="$is_logged_in"}
+                         <div class="link-select-checkbox"><input type="checkbox" class="link-checkbox"
+                                   data-id="{$value.id}" aria-label="Sélectionner ce bookmark"></div>
+                         {/if}
+                         {if="$value.thumbnail !== false"}<div class="link-thumbnail"><img
+                                   src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt=""
+                                   style="width:100%;height:100%;object-fit:cover;"
+                                   onerror="this.parentElement.style.display='none'"></div>{/if}
+                         <div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Privé"
+                                   aria-label="Bookmark privé"></i>{else}<i class="mdi mdi-lock-open-variant"
+                                   title="Public" aria-label="Bookmark public"></i>{/if}</div>
+                         <div class="link-content">
+                              <div class="link-header">
+                                   <a href="{$value.real_url}" class="link-title"
+                                        {if="strpos($value.url, $value.shorturl) !== false"} title="Note" {/if}>
+                                        {if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin"
+                                             style="color:var(--primary);"
+                                             aria-hidden="true"></i>{/if}{$value.title_html}
+                                   </a>
+                                   <span class="link-url">{$value.url}</span>
+                                   <div class="link-meta">
+                                        <span class="link-date">{$value.created|format_date}</span>
+                                        <a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink"
+                                             title="Lien permanent" aria-label="Lien permanent"><i
+                                                  class="mdi mdi-link-variant" aria-hidden="true"></i></a>
+                                   </div>
+                              </div>
 
-<!-- {* ----- QR Code Modal ----- *} -->
-<div id="qrcode-modal" class="qrcode-modal-overlay">
-<div class="qrcode-modal-content">
-<button class="qrcode-modal-close" id="qrcode-modal-close">&times;</button>
-<div id="qrcode-modal-body"></div>
-</div>
-</div>
+                              {if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
+                              <div class="link-footer">
+                                   <div class="link-tag-list">
+                                        {loop="$value.taglist"}<span class="link-tag"><a
+                                                  href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
+                                   </div>
+                                   <div class="link-actions">
+                                        {if="$is_logged_in"}
+                                        <a href="{$base_path}/admin/shaare/{$value.id}" title="Modifier"
+                                             aria-label="Modifier ce bookmark"><i class="mdi mdi-pencil"
+                                                  aria-hidden="true"></i></a>
+                                        <a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}"
+                                             title="Épingler/Désépingler" aria-label="Épingler ou désépingler"><i
+                                                  class="mdi mdi-pin" aria-hidden="true"></i></a>
+                                        <a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}"
+                                             title="Supprimer" aria-label="Supprimer ce bookmark"
+                                             onclick="return confirm('Supprimer ce bookmark ?');"><i
+                                                  class="mdi mdi-delete" aria-hidden="true"></i></a>
+                                        {/if}
+                                        <!-- fullscreen button (in all 3 views) -->
+                                        <a href="#" class="view-desc-btn" data-id="{$value.id}"
+                                             title="Voir la description" aria-label="Voir la description complète"><i
+                                                  class="mdi mdi-fullscreen" aria-hidden="true"></i></a>
+                                        {loop="$value.link_plugin"}
+                                        <span class="link-plugin">{$value}</span>
+                                        {/loop}
+                                        <a href="{$value.real_url}" target="_blank" rel="noopener"
+                                             title="Ouvrir le lien" aria-label="Ouvrir le lien dans un nouvel onglet"><i
+                                                  class="mdi mdi-open-in-new" aria-hidden="true"></i></a>
+                                   </div>
+                              </div>
+                         </div>
+                    </div>
+                    {/loop}
+               </div>
+               {include="linklist.paging"}
+               {/if}
+               {loop="$plugin_end_zone"}
+               {$value}
+               {/loop}
+          </div>
 
-{include="page.footer"}
-</body>
+          <!-- {* ----- description modal ----- *} -->
+          <div id="desc-modal" class="modal-overlay" role="dialog" aria-modal="true"
+               aria-label="Description du bookmark" aria-hidden="true">
+               <div class="modal-content">
+                    <button class="modal-close" id="desc-modal-close" aria-label="Fermer">&times;</button>
+                    <div class="modal-body" id="desc-modal-body"></div>
+               </div>
+          </div>
 
-</html>
+          <!-- {* ----- QR Code Modal ----- *} -->
+          <div id="qrcode-modal" class="qrcode-modal-overlay" role="dialog" aria-modal="true" aria-label="Code QR"
+               aria-hidden="true">
+               <div class="qrcode-modal-content">
+                    <button class="qrcode-modal-close" id="qrcode-modal-close" aria-label="Fermer">&times;</button>
+                    <div id="qrcode-modal-body"></div>
+               </div>
+          </div>
+
+          {include="page.footer"}
+     </body>
+
+     </html>

shaarli-pro/linklist.paging.html

@@ -13,7 +13,7 @@
 {/if}
 {$from=($page_current - 1) * $links_per_page + 1}
 {$to=min($total, ($page_current - 1) * $links_per_page + $links_per_page)}
-<div class="paging{if=" $page_max <=1"} single-page{/if}">
+<div class="paging{if="$page_max <=1"} single-page{/if}">
     {if="$page_max > 1"}
     <div class="paging-links">
         {if="$next_page_url"}<a href="{$next_page_url}" class="paging-newer" title="Newer"><i class="mdi mdi-chevron-left"></i></a>{/if}

shaarli-pro/page.footer.html

@@ -18,7 +18,7 @@
     {/loop}
 
     {loop="$plugins_footer.js"}
-    <script src="{$root_path}/{$value}"></script>
+    <script src="/{function="ltrim($value, '/')"}"></script>
     {/loop}
     {if="$pageName=='editlink' || $pageName=='addlink' || $pageName=='editlinkbatch'"}
     <script>

shaarli-pro/page.header.html

@@ -1,4 +1,5 @@
 <!--
+Bookmarklet detection logic
 {$isCalledFromBookmarklet=isset($_GET['source']) && $_GET['source'] == 'bookmarklet'}
 -->
 {if="$isCalledFromBookmarklet"}
@@ -6,57 +7,62 @@
 {else}
 
 <!-- Sidebar -->
-<aside class="sidebar" id="sidebar">
+<aside class="sidebar" id="sidebar" aria-label="Navigation principale">
     <div class="sidebar-header">
-        <div class="sidebar-logo">
+        <div class="sidebar-logo" aria-hidden="true">
             <i class="mdi mdi-bookmark-multiple"></i>
         </div>
         <a href="{$titleLink}" class="sidebar-brand">{$shaarlititle}</a>
     </div>
 
-    <nav class="sidebar-nav">
+    <nav class="sidebar-nav" aria-label="Menu latéral">
         <div class="sidebar-section">
             <div class="sidebar-section-title">Navigation</div>
-            <a href="{$base_path}/" class="sidebar-link{if="$pageName=='linklist' && empty($search_tags)"} active{/if}">
-                <i class="mdi mdi-bookmark-multiple-outline"></i>
-                <span>All Bookmarks</span>
+            <a href="{$base_path}/" class="sidebar-link{if="$pageName=='linklist' && empty($search_tags)"} active{/if}"
+                aria-label="Tous les bookmarks">
+                <i class="mdi mdi-bookmark-multiple-outline" aria-hidden="true"></i>
+                <span>Tous les bookmarks</span>
             </a>
-            <a href="{$base_path}/?searchtags=shaarli-pin" class="sidebar-link{if="isset($search_tags) && $search_tags == 'shaarli-pin'"} active{/if}">
-                <i class="mdi mdi-pin-outline"></i>
+            <a href="{$base_path}/?searchtags=shaarli-pin" class="sidebar-link{if="isset($search_tags)&&$search_tags=='shaarli-pin'"} active{/if}" aria-label="Épinglés">
+                <i class="mdi mdi-pin-outline" aria-hidden="true"></i>
                 <span>Épinglés</span>
             </a>
-            <a href="{$base_path}/tags/cloud" class="sidebar-link{if="$pageName=='tagcloud'"} active{/if}">
-                <i class="mdi mdi-tag-multiple-outline"></i>
-                <span>Tag Cloud</span>
+            <a href="{$base_path}/tags/cloud" class="sidebar-link{if="$pageName=='tagcloud'"} active{/if}"
+                aria-label="Nuage de tags">
+                <i class="mdi mdi-tag-multiple-outline" aria-hidden="true"></i>
+                <span>Nuage de tags</span>
             </a>
-            <a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}" class="sidebar-link{if="$pageName=='picwall'"} active{/if}">
-                <i class="mdi mdi-image-multiple-outline"></i>
-                <span>Picture Wall</span>
+            <a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&' )"}" class="sidebar-link{if="$pageName=='picwall'"} active{/if}" aria-label="Mur d'images">
+                <i class="mdi mdi-image-multiple-outline" aria-hidden="true"></i>
+                <span>Mur d'images</span>
             </a>
-            <a href="{$base_path}/daily" class="sidebar-link{if="$pageName=='daily'"} active{/if}">
-                <i class="mdi mdi-calendar-today"></i>
-                <span>Daily</span>
+            <a href="{$base_path}/daily" class="sidebar-link{if="$pageName=='daily'"} active{/if}"
+                aria-label="Vue quotidienne">
+                <i class="mdi mdi-calendar-today" aria-hidden="true"></i>
+                <span>Quotidien</span>
             </a>
-            <a href="{$base_path}/?searchtags=todo" class="sidebar-link{if="isset($search_tags) && $search_tags == 'todo'"} active{/if}">
-                <i class="mdi mdi-check-circle-outline"></i>
-                <span>Mes Tâches</span>
+            <a href="{$base_path}/?searchtags=todo" class="sidebar-link{if="isset($search_tags)&&$search_tags=='todo'"} active{/if}" aria-label="Mes tâches">
+                <i class="mdi mdi-check-circle-outline" aria-hidden="true"></i>
+                <span>Mes tâches</span>
             </a>
-            <a href="{$base_path}/?searchtags=note" class="sidebar-link{if="isset($search_tags) && $search_tags == 'note'"} active{/if}">
-                <i class="mdi mdi-note-text-outline"></i>
+            <a href="{$base_path}/?searchtags=note" class="sidebar-link{if="isset($search_tags)&&$search_tags=='note'"} active{/if}" aria-label="Notes">
+                <i class="mdi mdi-note-text-outline" aria-hidden="true"></i>
                 <span>Notes</span>
             </a>
         </div>
 
         {if="$is_logged_in"}
         <div class="sidebar-section">
-            <div class="sidebar-section-title">Admin</div>
-            <a href="{$base_path}/admin/tools" class="sidebar-link{if="$pageName == 'tools'"} active{/if}">
-                <i class="mdi mdi-tools"></i>
-                <span>Tools</span>
+            <div class="sidebar-section-title">Administration</div>
+            <a href="{$base_path}/admin/tools" class="sidebar-link{if="$pageName=='tools'"} active{/if}"
+                aria-label="Outils">
+                <i class="mdi mdi-tools" aria-hidden="true"></i>
+                <span>Outils</span>
             </a>
-            <a href="{$base_path}/admin/configure" class="sidebar-link{if="$pageName == 'configure'"} active{/if}">
-                <i class="mdi mdi-cog-outline"></i>
-                <span>Settings</span>
+            <a href="{$base_path}/admin/configure" class="sidebar-link{if="$pageName=='configure'"} active{/if}"
+                aria-label="Paramètres">
+                <i class="mdi mdi-cog-outline" aria-hidden="true"></i>
+                <span>Paramètres</span>
             </a>
         </div>
         {/if}
@@ -64,19 +70,19 @@
 
     <div class="sidebar-footer">
         {if="$is_logged_in"}
-        <a href="{$base_path}/admin/add-shaare" class="sidebar-add-btn">
-            <i class="mdi mdi-plus"></i>
-            <span>New Bookmark</span>
+        <a href="{$base_path}/admin/add-shaare" class="sidebar-add-btn" aria-label="Nouveau bookmark">
+            <i class="mdi mdi-plus" aria-hidden="true"></i>
+            <span>Nouveau bookmark</span>
         </a>
         {/if}
 
         <div class="theme-toggle-wrapper">
             <span class="theme-toggle-label">
-                <i class="mdi mdi-weather-sunny" id="theme-icon-light"></i>
-                <span>Light Mode</span>
+                <i class="mdi mdi-weather-sunny" id="theme-icon-light" aria-hidden="true"></i>
+                <span>Mode clair</span>
             </span>
-            <label class="theme-switch">
-                <input type="checkbox" id="theme-toggle-checkbox">
+            <label class="theme-switch" aria-label="Basculer le mode sombre">
+                <input type="checkbox" id="theme-toggle-checkbox" aria-label="Activer/désactiver le mode sombre">
                 <span class="theme-slider"></span>
             </label>
         </div>
@@ -84,7 +90,7 @@
 </aside>
 
 <!-- Sidebar Overlay for Mobile -->
-<div class="sidebar-overlay" id="sidebar-overlay"></div>
+<div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
 
 <!-- Main Content Wrapper -->
 <div class="main-content">
@@ -92,42 +98,45 @@
     <header class="header-main">
         <div class="header-inner">
             <div class="header-left">
-                <button class="mobile-menu-btn" id="mobile-menu-btn" title="Toggle Menu">
-                    <i class="mdi mdi-menu"></i>
+                <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Ouvrir le menu" aria-expanded="false"
+                    aria-controls="sidebar">
+                    <i class="mdi mdi-menu" aria-hidden="true"></i>
                 </button>
                 <a href="{$titleLink}" class="header-brand">{$shaarlititle}</a>
             </div>
 
             <!-- Main Navigation -->
-            <nav class="header-nav">
-                <a href="{$base_path}/" class="header-nav-link{if=" $pageName=='linklist'"} active{/if}">
-                    <i class="mdi mdi-home-outline"></i>
-                    <span>HOME</span>
+            <nav class="header-nav" aria-label="Navigation principale">
+                <a href="{$base_path}/" class="header-nav-link{if="$pageName=='linklist'"} active{/if}"
+                    aria-label="Accueil">
+                    <i class="mdi mdi-home-outline" aria-hidden="true"></i>
+                    <span>ACCUEIL</span>
                 </a>
-                <a href="{$base_path}/tags/cloud" class="header-nav-link{if=" $pageName=='tagcloud'"} active{/if}">
-                    <i class="mdi mdi-tag-multiple"></i>
-                    <span>TAG CLOUD</span>
+                <a href="{$base_path}/tags/cloud" class="header-nav-link{if="$pageName=='tagcloud'"} active{/if}"
+                    aria-label="Nuage de tags">
+                    <i class="mdi mdi-tag-multiple" aria-hidden="true"></i>
+                    <span>TAGS</span>
                 </a>
-                <a href="{$base_path}/picture-wall?{function=" ltrim($searchcrits, '&' )"}" class="header-nav-link{if="
-                    $pageName=='picwall'"} active{/if}">
-                    <i class="mdi mdi-image-multiple"></i>
-                    <span>PICTURE WALL</span>
+                <a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&' )"}" class="header-nav-link{if="$pageName=='picwall'"} active{/if}" aria-label="Mur d'images">
+                    <i class="mdi mdi-image-multiple" aria-hidden="true"></i>
+                    <span>IMAGES</span>
                 </a>
-                <a href="{$base_path}/daily" class="header-nav-link{if=" $pageName=='daily'"} active{/if}">
-                    <i class="mdi mdi-calendar"></i>
-                    <span>DAILY</span>
+                <a href="{$base_path}/daily" class="header-nav-link{if="$pageName=='daily'"} active{/if}"
+                    aria-label="Vue quotidienne">
+                    <i class="mdi mdi-calendar" aria-hidden="true"></i>
+                    <span>QUOTIDIEN</span>
                 </a>
-                <a href="{$base_path}/?searchtags=todo" class="header-nav-link{if="isset($search_tags) && $search_tags == 'todo'"} active{/if}">
-                    <i class="mdi mdi-check-circle-outline"></i>
+                <a href="{$base_path}/?searchtags=todo" class="header-nav-link{if="isset($search_tags)&&$search_tags=='todo'"} active{/if}" aria-label="Mes tâches">
+                    <i class="mdi mdi-check-circle-outline" aria-hidden="true"></i>
                     <span>TÂCHES</span>
                 </a>
-                <a href="{$base_path}/?searchtags=note" class="header-nav-link{if="isset($search_tags) && $search_tags == 'note'"} active{/if}">
-                    <i class="mdi mdi-note-text-outline"></i>
+                <a href="{$base_path}/?searchtags=note" class="header-nav-link{if="isset($search_tags)&&$search_tags=='note'"} active{/if}" aria-label="Notes">
+                    <i class="mdi mdi-note-text-outline" aria-hidden="true"></i>
                     <span>NOTES</span>
                 </a>
-                <button class="header-nav-link" id="search-toggle-btn" title="Search (Press S)">
-                    <i class="mdi mdi-magnify"></i>
-                    <span>SEARCH</span>
+                <button class="header-nav-link" id="search-toggle-btn" aria-label="Rechercher (raccourci S)">
+                    <i class="mdi mdi-magnify" aria-hidden="true"></i>
+                    <span>RECHERCHE</span>
                 </button>
             </nav>
 
@@ -135,53 +144,55 @@
             <div class="header-actions">
                 <!-- Filter Button -->
                 <div class="filter-dropdown" id="filter-dropdown">
-                    <button class="header-action-btn" id="filter-toggle-btn" title="Filters">
-                        <i class="mdi mdi-filter-variant"></i>
+                    <button class="header-action-btn" id="filter-toggle-btn" aria-label="Filtres" aria-expanded="false"
+                        aria-controls="filter-panel">
+                        <i class="mdi mdi-filter-variant" aria-hidden="true"></i>
                     </button>
 
                     <!-- Filter Panel -->
-                    <div class="filter-panel" id="filter-panel">
+                    <div class="filter-panel" id="filter-panel" role="dialog" aria-label="Panneau de filtres"
+                        aria-hidden="true">
                         <div class="filter-header">
-                            <span class="filter-title">Filters</span>
-                            <button class="filter-close" id="filter-close-btn">
-                                <i class="mdi mdi-close"></i>
+                            <span class="filter-title">Filtres</span>
+                            <button class="filter-close" id="filter-close-btn" aria-label="Fermer les filtres">
+                                <i class="mdi mdi-close" aria-hidden="true"></i>
                             </button>
                         </div>
                         <div class="filter-body">
                             <div class="filter-section">
-                                <div class="filter-section-title">Links Per Page</div>
-                                <a href="{$base_path}/links-per-page?nb=20" class="filter-option">20 links</a>
-                                <a href="{$base_path}/links-per-page?nb=50" class="filter-option">50 links</a>
-                                <a href="{$base_path}/links-per-page?nb=100" class="filter-option">100 links</a>
+                                <div class="filter-section-title">Liens par page</div>
+                                <a href="{$base_path}/links-per-page?nb=20" class="filter-option">20 liens</a>
+                                <a href="{$base_path}/links-per-page?nb=50" class="filter-option">50 liens</a>
+                                <a href="{$base_path}/links-per-page?nb=100" class="filter-option">100 liens</a>
                             </div>
                             <div class="filter-section">
-                                <div class="filter-section-title">Custom value</div>
+                                <div class="filter-section-title">Valeur personnalisée</div>
                                 <form method="GET" action="{$base_path}/">
                                     <input type="number" name="nb" class="filter-input" placeholder="20" min="1"
-                                        max="500">
+                                        max="500" aria-label="Nombre de liens par page">
                                 </form>
                             </div>
                             {if="$is_logged_in"}
                             <div class="filter-section">
-                                <div class="filter-section-title">Filters</div>
+                                <div class="filter-section-title">Filtres de visibilité</div>
                                 <div class="filter-toggle-row">
-                                    <span class="filter-toggle-label">Only private links</span>
-                                    <label class="toggle-switch">
-                                        <input type="checkbox" id="filter-private">
+                                    <span class="filter-toggle-label">Liens privés uniquement</span>
+                                    <label class="toggle-switch" aria-label="Filtrer les liens privés">
+                                        <input type="checkbox" id="filter-private" aria-label="Liens privés uniquement">
                                         <span class="toggle-slider"></span>
                                     </label>
                                 </div>
                                 <div class="filter-toggle-row">
-                                    <span class="filter-toggle-label">Only public links</span>
-                                    <label class="toggle-switch">
-                                        <input type="checkbox" id="filter-public">
+                                    <span class="filter-toggle-label">Liens publics uniquement</span>
+                                    <label class="toggle-switch" aria-label="Filtrer les liens publics">
+                                        <input type="checkbox" id="filter-public" aria-label="Liens publics uniquement">
                                         <span class="toggle-slider"></span>
                                     </label>
                                 </div>
                                 <div class="filter-toggle-row">
-                                    <span class="filter-toggle-label">Untagged links</span>
-                                    <label class="toggle-switch">
-                                        <input type="checkbox" id="filter-untagged">
+                                    <span class="filter-toggle-label">Liens sans tag</span>
+                                    <label class="toggle-switch" aria-label="Filtrer les liens sans tag">
+                                        <input type="checkbox" id="filter-untagged" aria-label="Liens sans tag">
                                         <span class="toggle-slider"></span>
                                     </label>
                                 </div>
@@ -193,14 +204,15 @@
 
                 {if="$is_logged_in"}
                 <!-- Multi-select Toggle -->
-                <button class="header-action-btn" id="select-mode-btn" title="Multi-select">
-                    <i class="mdi mdi-checkbox-multiple-marked-outline"></i>
+                <button class="header-action-btn" id="select-mode-btn" aria-label="Sélection multiple"
+                    aria-pressed="false">
+                    <i class="mdi mdi-checkbox-multiple-marked-outline" aria-hidden="true"></i>
                 </button>
                 {/if}
 
                 <!-- RSS Feed -->
-                <a href="{$base_path}/feed/rss" class="header-action-btn" title="RSS Feed">
-                    <i class="mdi mdi-rss"></i>
+                <a href="{$base_path}/feed/rss" class="header-action-btn" aria-label="Flux RSS">
+                    <i class="mdi mdi-rss" aria-hidden="true"></i>
                 </a>
 
                 <!-- Plugins Support -->
@@ -211,15 +223,15 @@
                 {/if}
 
                 {if="$is_logged_in"}
-                <a href="{$base_path}/admin/tools" class="header-action-btn" title="Tools">
-                    <i class="mdi mdi-cog-outline"></i>
+                <a href="{$base_path}/admin/tools" class="header-action-btn" aria-label="Outils">
+                    <i class="mdi mdi-cog-outline" aria-hidden="true"></i>
                 </a>
-                <a href="{$base_path}/admin/logout" class="header-action-btn" title="Logout">
-                    <i class="mdi mdi-logout-variant"></i>
+                <a href="{$base_path}/admin/logout" class="header-action-btn" aria-label="Déconnexion">
+                    <i class="mdi mdi-logout-variant" aria-hidden="true"></i>
                 </a>
                 {else}
-                <a href="{$base_path}/login" class="header-action-btn" title="Login">
-                    <i class="mdi mdi-login-variant"></i>
+                <a href="{$base_path}/login" class="header-action-btn" aria-label="Connexion">
+                    <i class="mdi mdi-login-variant" aria-hidden="true"></i>
                 </a>
                 {/if}
             </div>
@@ -232,8 +244,7 @@
             <form method="GET" action="{$base_path}/" id="search-form">
                 <div class="search-modal-header">
                     <input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
-                        placeholder="Type to search..." autocomplete="off" value="{if="
-                        isset($search_term)"}{$search_term}{/if}">
+                        placeholder="Type to search..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
                     <div class="search-modal-actions">
                         <button type="button" class="search-pill-btn search-pill-tags" id="search-tags-btn">
                             <i class="mdi mdi-tag-outline"></i>