Ajout des cgu

DataSentinel/src/components/Layout/Header.jsx

@@ -5,7 +5,7 @@ import { useAuth } from '../../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 import styles from './Header.module.css';
 
-export default function Header({ onToggleSidebar }) {
+export default function Header({ onToggleSidebar, sidebarOpen }) {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
 
@@ -15,26 +15,45 @@ export default function Header({ onToggleSidebar }) {
   }
 
   return (
-    <header className={styles.header}>
+    <header className={styles.header} role="banner">
+      {/* Lien d'évitement pour l'accessibilité clavier */}
+      <a href="#main-content" className={styles.skipLink}>
+        Aller au contenu principal
+      </a>
+
       <div className={styles.left}>
         {/* Bouton burger pour mobile */}
-        <button className={styles.burgerBtn} onClick={onToggleSidebar} aria-label="Menu">
-          <Menu size={20} color="var(--color-white)" />
+        <button
+          className={styles.burgerBtn}
+          onClick={onToggleSidebar}
+          aria-label={sidebarOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
+          aria-expanded={sidebarOpen}
+          aria-controls="sidebar"
+        >
+          <Menu size={20} color="var(--color-white)" aria-hidden="true" />
         </button>
-        <div className={styles.logo}>
-          <span className={styles.logoIcon}>▶</span>
+        <div className={styles.logo} role="img" aria-label="Data Sentinel">
+          <span className={styles.logoIcon} aria-hidden="true">▶</span>
           <span className={styles.logoText}>Data Sentinel</span>
         </div>
-        <span className={styles.byXefi}>by XEFI</span>
+        <span className={styles.byXefi} aria-label="by XEFI">by XEFI</span>
       </div>
 
       <div className={styles.right}>
         <button className={styles.iconBtn} aria-label="Notifications">
-          <Bell size={18} color="var(--color-white)" />
+          <Bell size={18} color="var(--color-white)" aria-hidden="true" />
         </button>
-        {user && <span className={styles.username}>{user.nom}</span>}
-        <button className={styles.logoutBtn} onClick={handleLogout}>
-          <LogOut size={15} />
+        {user && (
+          <span className={styles.username} aria-label={`Connecté en tant que ${user.nom}`}>
+            {user.nom}
+          </span>
+        )}
+        <button
+          className={styles.logoutBtn}
+          onClick={handleLogout}
+          aria-label="Se déconnecter"
+        >
+          <LogOut size={15} aria-hidden="true" />
           Déconnexion
         </button>
       </div>