From 83c1b5685a2d2fe06534aa312202bc9ef21bffd2 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Thu, 3 Nov 2022 12:06:53 +0100
Subject: [PATCH] improve user a11y

---
 client/src/components/NewMessage.tsx | 22 +++++++++++++++++-----
 client/src/components/User.tsx       |  2 +-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/src/components/NewMessage.tsx b/client/src/components/NewMessage.tsx
index 3ba694f..7fcbbc6 100644
--- a/client/src/components/NewMessage.tsx
+++ b/client/src/components/NewMessage.tsx
@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
-import {newMessage} from '@controllers/MessageController';
+import { newMessage } from '@controllers/MessageController';
 
 const NewMessage = () => {
   const [message, setMessage] = useState('');
@@ -30,14 +30,26 @@ const NewMessage = () => {
 
   return (
     <footer className="new-message z-10 flex justify-center w-full">
-      <form onSubmit={handleSubmit} className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark">
+      <form
+        onSubmit={handleSubmit}
+        className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark"
+      >
         <div className="file">
           <label htmlFor="image" className="cursor-pointer block p-2">
             <div className="rounded-full text-grey-dark bg-red-light text-lg p-2">
               <FaPlus className="" />
             </div>
+            <p className="sr-only">Ajouter une image</p>
           </label>
-          <input type="file" name="image" id="image" accept="image/*" className="hidden" value={image} onChange={e => setImage(e.target.value)} />
+          <input
+            type="file"
+            name="image"
+            id="image"
+            accept="image/*"
+            className="hidden"
+            value={image}
+            onChange={(e) => setImage(e.target.value)}
+          />
         </div>
 
         <input
@@ -46,8 +58,8 @@ const NewMessage = () => {
           onChange={(e) => setMessage(e.target.value)}
           placeholder="Message"
           className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
-          id='content'
-          name='content'
+          id="content"
+          name="content"
         />
         <button
           type="submit"
diff --git a/client/src/components/User.tsx b/client/src/components/User.tsx
index bb27ea7..91823b7 100644
--- a/client/src/components/User.tsx
+++ b/client/src/components/User.tsx
@@ -181,7 +181,7 @@ const User = ({ author }: any) => {
                 </div>
                 <div className="flex gap-4">
                   <div
-                    className="rounded-md border py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-transparent hover:text-red"
+                    className="rounded-md border py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-transparent hover:text-red cursor-pointer"
                     onClick={(e) => setShow(false)}
                   >
                     Annuler