From 83d807cd270b7015f3127dd3c0bc26beccf971c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A4ser?= <sebastien.naser@gmail.com>
Date: Mon, 13 Feb 2023 14:13:47 +0100
Subject: [PATCH] fix: fix aria-label missing

---
 .../card-blog-details/card-blog-details.tsx   | 12 ++--
 .../components/card-blog/card-blog.tsx        | 13 +++-
 apps/website/components/footer/footer.tsx     | 29 ++++++--
 apps/website/components/header/header.tsx     | 72 ++++++++++++++-----
 .../home-section-blog-une.tsx                 | 12 +++-
 5 files changed, 104 insertions(+), 34 deletions(-)

diff --git a/apps/website/components/card-blog-details/card-blog-details.tsx b/apps/website/components/card-blog-details/card-blog-details.tsx
index ca4604d..4eaf9b6 100644
--- a/apps/website/components/card-blog-details/card-blog-details.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.tsx
@@ -35,17 +35,20 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
         </h2>
         <section className="flex items-center justify-between">
           <div className="flex">
-            <a href="#"
-               className="flex items-center">
+            <span className="flex items-center">
               <img
                 src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                 alt="avatar"
+                width="auto"
+                height="auto"
                 className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
               <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
-            </a>
+            </span>
           </div>
           <div className="flex flex-col">
             <a href={getCategoryUrl(item)}
+               title={"Accédez à la catégorie " + delve(item, 'category.data.attributes.name', 'N/A')}
+               aria-label={"Accédez à la catégorie " + delve(item, 'category.data.attributes.name', 'N/A')}
                className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
               {delve(item, 'category.data.attributes.name', 'N/A')}
             </a>
@@ -81,8 +84,7 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
               <FacebookMessengerShareButton
                 url={shareUrl}
                 appId="521270401588372"
-                className="Demo__some-network__share-button"
-              >
+                className="Demo__some-network__share-button">
                 <FacebookMessengerIcon size={32}
                                        round />
               </FacebookMessengerShareButton>
diff --git a/apps/website/components/card-blog/card-blog.tsx b/apps/website/components/card-blog/card-blog.tsx
index cc43aaa..b0aeacc 100644
--- a/apps/website/components/card-blog/card-blog.tsx
+++ b/apps/website/components/card-blog/card-blog.tsx
@@ -27,6 +27,8 @@ export function CardBlog({item}: CardBlogProps) {
               text-gray-600
               dark:text-gray-300">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
             <a href={getCategoryUrl(item)}
+               title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
+               aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
                className="px-2 py-1 text-sm font-bold rounded
                bg-gray-600 text-gray-100
                hover:bg-gray-500">
@@ -35,6 +37,8 @@ export function CardBlog({item}: CardBlogProps) {
           </div>
           <div className="mt-2">
             <a
+              title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
+              aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
               href={getPostUrl(item)}
               className="text-xl font-bold hover:underline
               text-gray-700
@@ -47,18 +51,21 @@ export function CardBlog({item}: CardBlogProps) {
           </div>
           <div className="flex justify-between items-center mt-4">
             <a href={getPostUrl(item)}
+               title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
+               aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
                className="text-blue-500 text-sm hover:underline">Lire l'article</a>
             <div>
-              <a href="#"
-                 className="flex items-center">
+              <span className="flex items-center">
                 <img
                   src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                   alt="avatar"
+                  width="auto"
+                  height="auto"
                   className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
                 <h3 className="text-normal font-bold hover:underline
                 text-gray-700
                 dark:text-gray-300">Alex John</h3>
-              </a>
+              </span>
             </div>
           </div>
         </div>
diff --git a/apps/website/components/footer/footer.tsx b/apps/website/components/footer/footer.tsx
index cf94fbf..966f133 100644
--- a/apps/website/components/footer/footer.tsx
+++ b/apps/website/components/footer/footer.tsx
@@ -6,8 +6,13 @@ export function Footer({items = []}) {
     const value = delve(item, 'attributes', {});
 
     return (
-      <li key={value.title + index} className="my-1 h-10 flex align-middle items-center md:h-auto">
-        <a href={value.url} target={value.target} className="mr-4 hover:underline md:mr-6 ">
+      <li key={value.title + index}
+          className="my-1 h-10 flex align-middle items-center md:h-auto">
+        <a href={value.url}
+           target={value.target}
+           title={"Accédez à la page " + value.title}
+           aria-label={"Accédez à la page " + value.title}
+           className="mr-4 hover:underline md:mr-6 ">
           {value.title}
         </a>
       </li>
@@ -17,17 +22,27 @@ export function Footer({items = []}) {
   return (
     <footer className="p-4 bg-white md:px-6 md:py-8 dark:bg-gray-900">
       <div className="sm:flex sm:items-center sm:justify-between">
-        <a href="/" className="flex items-center mb-4 sm:mb-0">
-          <img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo"/>
+        <a href="/"
+           aria-label="Page d'accueil MeCP"
+           title="Page d'accueil MeCP"
+           className="flex items-center mb-4 sm:mb-0">
+          <img src="https://flowbite.com/docs/images/logo.svg"
+               className="h-8 mr-3"
+               height="auto"
+               width="auto"
+               alt="Flowbite Logo" />
           <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
         </a>
         <ul className="flex flex-wrap items-center justify-end mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
           {items.map((item, index: number) => generateItem(item, index))}
         </ul>
       </div>
-      <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
-      <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 3 <a
-        href="https://flowbite.com/" className="hover:underline">Flowbite™</a>. All Rights Reserved.
+      <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+      <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 3
+        <a href="/"
+           aria-label="Page d'accueil MeCP"
+           title="Page d'accueil MeCP"
+           className="hover:underline">MeCP™</a>. All Rights Reserved.
     </span>
     </footer>
   );
diff --git a/apps/website/components/header/header.tsx b/apps/website/components/header/header.tsx
index d4850eb..2a9d163 100644
--- a/apps/website/components/header/header.tsx
+++ b/apps/website/components/header/header.tsx
@@ -50,6 +50,8 @@ export function Header({items = []}) {
     return (
       <a href={item.url}
          target={item.target}
+         title={"Accédez à la page " + item.title}
+         aria-label={"Accédez à la page " + item.title}
          className={"text-gray-900 hover:text-blue-600 dark:text-gray-400 dark:hover:bg-transparent dark:hover:text-gray-500 " + (isActive ? 'text-blue-600 dark:text-gray-500' : '') + " block py-2 pl-3 pr-4 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:p-0"}
          aria-current="page">{item.title}</a>
     )
@@ -60,6 +62,8 @@ export function Header({items = []}) {
     return (
       <li key={value.title + index}>
         <a href={value.url}
+           title={"Accédez à la page " + value.title}
+           aria-label={"Accédez à la page " + value.title}
            className="text-gray-900 dark:text-gray-400 hover:text-blue-600 dark:hover:text-gray-500">
           {value.title}
         </a>
@@ -86,7 +90,8 @@ export function Header({items = []}) {
         <div id="menu-dropdown"
              className="absolute z-10 grid hidden w-auto text-sm bg-white border border-gray-100 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-700">
           <div className="p-4 pb-0 text-gray-900 md:pb-4 dark:text-white">
-            <ul className="space-y-4" aria-labelledby="mega-menu-dropdown-button">
+            <ul className="space-y-4"
+                aria-labelledby="mega-menu-dropdown-button">
               {item.children.data.map((children, index) => renderRegularDropdownItem(children, index))}
             </ul>
           </div>
@@ -99,17 +104,21 @@ export function Header({items = []}) {
     return (
       <>
         <a href="/sign-in"
+           title="Page de connexion"
+           aria-label="Page de connexion"
            className="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 mr-1 md:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">
           <span className="hidden lg:block">Connexion</span>
           <span className="block lg:hidden">
-            <FontAwesomeIcon icon={faRightToBracket}/>
+            <FontAwesomeIcon icon={faRightToBracket} />
           </span>
         </a>
         <a href="/sign-up"
+           title="Page d'inscription"
+           aria-label="Page d'inscription"
            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 mr-1 md:mr-2 dark:bg-dark-600 dark:hover:bg-dark-500 focus:outline-none dark:focus:ring-blue-800">
           <span className="hidden lg:block">Inscription</span>
           <span className="block lg:hidden">
-            <FontAwesomeIcon icon={faUserPlus}/>
+            <FontAwesomeIcon icon={faUserPlus} />
           </span>
         </a>
       </>
@@ -120,14 +129,16 @@ export function Header({items = []}) {
     return (
       <>
         <button type="button"
+                role="button"
                 className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
                 id="user-menu-button"
+                aria-label="Options de l'utilisateur"
                 aria-expanded="false"
                 data-dropdown-placement="bottom">
-          <span className="sr-only">Open user menu</span>
+          <span className="sr-only">Options de l'utilisateur</span>
           <img className="w-8 h-8 rounded-full"
                src={hasAvatar((session.user as any)) ? getBackendImg((session.user as any).avatar.formats.thumbnail.url) : siteConfig.defaultUserAvatar}
-               alt="user photo"/>
+               alt="user photo" />
         </button>
         <div
           className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
@@ -137,31 +148,40 @@ export function Header({items = []}) {
             <span
               className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">{session.user.email}</span>
           </div>
-          <ul className="py-1" aria-labelledby="user-menu-button">
+          <ul className="py-1"
+              aria-labelledby="user-menu-button">
             <li>
               <a href="#"
+                 aria-label="Profile"
+                 title="Profile"
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Dashboard
+                Profile
               </a>
             </li>
             <li>
               <a href="#"
+                 aria-label="Paramètres"
+                 title="Paramètres"
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Settings
+                Paramètres
               </a>
             </li>
             <li>
               <a href="#"
+                 aria-label="Mes cours"
+                 title="Mes cours"
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Earnings
+                Mes cours
               </a>
             </li>
             <li>
               <a href="#"
+                 title="Dconnexion"
+                 aria-label="Dconnexion"
                 // @ts-ignore
                  onClick={signOut}
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Sign out
+                Déconnexion
               </a>
             </li>
           </ul>
@@ -179,25 +199,42 @@ export function Header({items = []}) {
             className="bg-white dark:bg-gray-800 w-full md:w-auto p-2 md:p-4"
             id="navbar-default">
             <div className="container max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-              <a href="/" className="flex items-center">
-                <img src="https://flowbite.com/docs/images/logo.svg" className="h-6 mr-3 sm:h-9" alt="Flowbite Logo"/>
+              <a href="/"
+                 aria-label="Page d'accueil MeCP"
+                 title="Page d'accueil MeCP"
+                 className="flex items-center">
+                <img src="https://flowbite.com/docs/images/logo.svg"
+                     className="h-6 mr-3 sm:h-9"
+                     height="auto"
+                     width="auto"
+                     alt="Flowbite Logo" />
                 <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
               </a>
               <div className="flex items-center">
                 <button
+                  id="shop-panel-button"
+                  name="shop-panel-button"
+                  aria-label="Accéder au panier d'achat"
+                  role="button"
+                  type="button"
                   className="text-gray-700 border border-transparent hover:bg-gray-200 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center mr-2 dark:text-blue-500 dark:hover:text-white dark:focus:ring-blue-800">
-                  <FontAwesomeIcon icon={faBagShopping}/>
+                  <FontAwesomeIcon icon={faBagShopping} />
                 </button>
 
                 {session ? renderConnectedUser() : renderAnonymousUser()}
 
                 <button id="menu-button"
                         type="button"
+                        role="navigation"
                         className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        aria-label="Déplier le menu"
                         aria-controls="navbar-dropdown"
                         aria-expanded="false">
                   <span className="sr-only">Open main menu</span>
-                  <svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
+                  <svg className="w-6 h-6"
+                       aria-hidden="true"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd"
                           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
@@ -207,15 +244,16 @@ export function Header({items = []}) {
               </div>
             </div>
           </section>
-          <hr className="border-gray-100 dark:border-gray-700 container max-w-screen-xl mx-auto"/>
-          <section className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
+          <hr className="border-gray-100 dark:border-gray-700 container max-w-screen-xl mx-auto" />
+          <section className="hidden w-full md:block md:w-auto"
+                   id="navbar-dropdown">
             <div className="container max-w-screen-xl mx-auto">
               <ul className="flex flex-col md:p-4 font-medium md:flex-row md:space-x-8 md:mt-0">
                 {items.map((item, index: number) => renderGenerateItem(item, index))}
               </ul>
             </div>
           </section>
-          <hr className="border-gray-100 sm:mx-auto dark:border-gray-700"/>
+          <hr className="border-gray-100 sm:mx-auto dark:border-gray-700" />
         </main>
       </div>
     </nav>
diff --git a/apps/website/components/home-section-blog-une/home-section-blog-une.tsx b/apps/website/components/home-section-blog-une/home-section-blog-une.tsx
index 8c42888..7eb7161 100644
--- a/apps/website/components/home-section-blog-une/home-section-blog-une.tsx
+++ b/apps/website/components/home-section-blog-une/home-section-blog-une.tsx
@@ -23,6 +23,8 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
         </div>
         <div className="flex justify-between items-center absolute right-5 top-5">
           <a href={getCategoryUrl(item)}
+             title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
+             aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
              className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
             {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
           </a>
@@ -40,6 +42,8 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
           <div className="mt-2">
             <a
               href={getPostUrl(item)}
+              title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
+              aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
               className="text-xl font-bold hover:underline
                   text-gray-700
                   dark:text-gray-200">
@@ -52,18 +56,22 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
 
           <div className="flex justify-between items-center mt-4">
             <a href={getPostUrl(item)}
+               title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
+               aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
                className="text-blue-500 text-sm hover:underline">Lire l'article</a>
             <div>
-              <a href="#"
+              <span
                  className="flex items-center">
                 <img
                   src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                   alt="avatar"
+                  width="auto"
+                  height="auto"
                   className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
                 <h3 className="text-normal font-bold hover:underline
                     text-gray-700
                     dark:text-gray-300">Alex John</h3>
-              </a>
+              </span>
             </div>
           </div>
         </main>