From d69f31addc839b41e2de94f43589aa2556c4ef30 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Thu, 3 Nov 2022 14:49:59 +0100
Subject: [PATCH] fix a11y

---
 client/src/components/AppHeader.tsx      | 2 +-
 client/src/components/Image.tsx          | 2 +-
 client/src/components/Like.tsx           | 3 ++-
 client/src/components/NewMessage.tsx     | 3 +++
 client/src/components/ScrollToBottom.tsx | 3 ++-
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/components/AppHeader.tsx b/client/src/components/AppHeader.tsx
index 8b5061a..c784565 100644
--- a/client/src/components/AppHeader.tsx
+++ b/client/src/components/AppHeader.tsx
@@ -25,7 +25,7 @@ const AppHeader = () => {
     <header className="sticky top-0 z-100 w-full shadow-sm shadow-slate-900">
       <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
         <div className="app-header__logo flex items-center gap-3">
-          <img src={logo} alt="logo" className="h-14" />
+          <img src={logo} alt="Logo du site" className="h-14" />
           <span className="w-0 transition-all duration-500 sm:w-full flex-shrink overflow-hidden text-red font-bold text-4xl">Groupomania</span>
         </div>
         <div className="right">
diff --git a/client/src/components/Image.tsx b/client/src/components/Image.tsx
index 0f679ad..a09255a 100644
--- a/client/src/components/Image.tsx
+++ b/client/src/components/Image.tsx
@@ -39,7 +39,7 @@ const Image = ({ src, alt, className, onError }: { src: string; alt?: string; cl
       )}
       <img
         src={(error && onError === undefined) ? 'https://via.placeholder.com/150' : src}
-        alt={alt}
+        alt={(error && onError === undefined) ? 'Image absente' : alt}
         onError={handleError}
         className={className}
         onClick={onClick}
diff --git a/client/src/components/Like.tsx b/client/src/components/Like.tsx
index 1dd8e75..4fa9a56 100644
--- a/client/src/components/Like.tsx
+++ b/client/src/components/Like.tsx
@@ -24,9 +24,10 @@ const Like = ({ messageId, isLiked }: { messageId: string; isLiked: boolean }) =
     <button
       className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer"
       onClick={like}
-      value="like"
+      name="like"
     >
       <FaThumbsUp className={'fill-red-light text-xl  w-10 h-10 p-2.5' + (isLiked ? ' fill-red' : '')} />
+      <span className="sr-only">Aimer</span>
     </button>
   );
 };
diff --git a/client/src/components/NewMessage.tsx b/client/src/components/NewMessage.tsx
index 9120b02..c6da596 100644
--- a/client/src/components/NewMessage.tsx
+++ b/client/src/components/NewMessage.tsx
@@ -61,6 +61,9 @@ const NewMessage = () => {
           id="content"
           name="content"
         />
+        <label htmlFor="content" className="sr-only">
+          Message
+        </label>
         <button
           type="submit"
           className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index d6e3caf..3547190 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -38,11 +38,12 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
         className={'absolute right-3 ' + (show ? 'animate-show bottom-3 block' : 'animate-hide hidden bottom-0 -mb-10')}
-        value="Scroll to bottom"
+        name="bottom"
       >
         <span className="popup-btn block cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
           <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
         </span>
+        <span className='sr-only'>Descendre en bas de la page</span>
       </button>
     </>
   );