From 38ce5042ffb4e585a2fe505af3c6453412ac290a Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Thu, 4 Jul 2024 12:04:35 +0200
Subject: [PATCH] feat(ux): :wheelchair: improve accessibility with titles alts
 and labels

---
 components/Header.tsx      | 2 +-
 components/ProjectCard.tsx | 6 +++++-
 islands/AiChatBox.tsx      | 1 +
 islands/ThemePicker.tsx    | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 789a6a1..fa4b612 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -57,7 +57,7 @@ export function Header() {
 				<SearchBox />
 				<MoreBox>
 					<ThemePicker />
-					<a href='/profil'>
+					<a href='/profil' title={'Accéder à mon compte'}>
 						<i class='ri-user-line'></i>
 					</a>
 					<AiChatBox />
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index 7bda3f8..85d32ae 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -14,7 +14,11 @@ export function ProjectCard(
 ) {
 	return (
 		<div class='components__project_card'>
-			<img src={icon} class='components__project_card__icon' />
+			<img
+				alt='Icon du projet'
+				src={icon}
+				class='components__project_card__icon'
+			/>
 			<div class='components__project_card__content'>
 				<h3>{title}</h3>
 				<div class='components__project_card__state'>
diff --git a/islands/AiChatBox.tsx b/islands/AiChatBox.tsx
index a17b66a..46bdce6 100644
--- a/islands/AiChatBox.tsx
+++ b/islands/AiChatBox.tsx
@@ -88,6 +88,7 @@ export default function AiChatBox() {
 			<button
 				class='islands__ai_chat_box__button'
 				onClick={() => dialog.current?.showModal()}
+				title={'Ouvrir la chat box IA'}
 			>
 				<i class='ri-bard-line'></i>
 			</button>
diff --git a/islands/ThemePicker.tsx b/islands/ThemePicker.tsx
index 0d445df..9f7e167 100644
--- a/islands/ThemePicker.tsx
+++ b/islands/ThemePicker.tsx
@@ -39,7 +39,7 @@ export default function ThemePicker() {
 	})
 
 	return (
-		<label class='islands__theme_picker'>
+		<label class='islands__theme_picker' title={'Sélectionner un thème'}>
 			<span>{themeIcon}</span>
 			<select
 				value={theme}