From 17f2def84ed9f9fb26c14e48bab64fcedac5792d Mon Sep 17 00:00:00 2001
From: William Lima <william.lima@nosi.cv>
Date: Sun, 17 Dec 2023 22:00:52 -0100
Subject: [PATCH] #140 accessibility fixes

---
 components/_shared/carousel/card/Card.tsx          | 4 ++--
 components/_shared/carousel/icon_card/IconCard.tsx | 2 +-
 components/organization/Header.tsx                 | 8 +++++++-
 components/organization/MainOptions.tsx            | 1 +
 components/request/RequestData.tsx                 | 7 +++++--
 components/search/Pagination.tsx                   | 1 +
 components/static/List.tsx                         | 4 ++--
 7 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/_shared/carousel/card/Card.tsx b/components/_shared/carousel/card/Card.tsx
index d84953f..bd9bab6 100644
--- a/components/_shared/carousel/card/Card.tsx
+++ b/components/_shared/carousel/card/Card.tsx
@@ -15,7 +15,7 @@ interface CardProps {
 const Card: React.FC<CardProps> = ({ title, icon, image }) => {
   return (
     <>
-      <div className="relative w-full bg-gray-200 rounded-lg overflow-hidden group min-h-[100px]">
+      <div className="relative w-full bg-black rounded-lg overflow-hidden group min-h-[100px] topic-item z-10">
         <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
         <div>
           <img
@@ -25,7 +25,7 @@ const Card: React.FC<CardProps> = ({ title, icon, image }) => {
           />
         </div>
         <div
-          className={`absolute py-4 bottom-0 inset-x-0 text-white text-m ${AR(
+          className={`absolute z-20 py-4 bottom-0 inset-x-0 text-white text-m ${AR(
             'pr-5',
             'pl-5'
           )} leading-4 flex justify-between group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all items-center`}
diff --git a/components/_shared/carousel/icon_card/IconCard.tsx b/components/_shared/carousel/icon_card/IconCard.tsx
index 79bb680..112fa32 100644
--- a/components/_shared/carousel/icon_card/IconCard.tsx
+++ b/components/_shared/carousel/icon_card/IconCard.tsx
@@ -26,7 +26,7 @@ const IconCard: React.FC<IconCardProps> = ({
     <>
       <div
         className={`${
-          isActive ? 'text-[#22B373]' : ''
+          isActive ? 'text-[#136541] hover:text-[#22B373]' : ''
         } flex flex-col items-center`}
       >
         <div className="h-[60px] w-[60px]">
diff --git a/components/organization/Header.tsx b/components/organization/Header.tsx
index c94b851..c6e36dd 100644
--- a/components/organization/Header.tsx
+++ b/components/organization/Header.tsx
@@ -1,7 +1,12 @@
 import useTranslation from 'next-translate/useTranslation';
 import ImageHeader from '../_shared/image_header/ImageHeader';
 
-const Header: React.FC<any> = ({ org, datasetsCount, badgeOnClick }) => {
+const Header: React.FC<any> = ({
+  org,
+  datasetsCount,
+  badgeOnClick,
+  color,
+}) => {
   const { t } = useTranslation('common');
 
   const icon = {
@@ -27,6 +32,7 @@ const Header: React.FC<any> = ({ org, datasetsCount, badgeOnClick }) => {
         badgeText={badgeText}
         image={image}
         badgeOnClick={badgeOnClick}
+        color={color}
       >
         {description}
       </ImageHeader>
diff --git a/components/organization/MainOptions.tsx b/components/organization/MainOptions.tsx
index cc3b14a..4c02d02 100644
--- a/components/organization/MainOptions.tsx
+++ b/components/organization/MainOptions.tsx
@@ -142,6 +142,7 @@ const MainOptions: React.FC<any> = ({
     <>
       <div className="mb-20">
         <OrgHeader
+          color="#188154"
           org={activeOrg}
           datasetsCount={activeOrg?.package_count}
           badgeOnClick={() => {
diff --git a/components/request/RequestData.tsx b/components/request/RequestData.tsx
index 380abcf..4f4c983 100644
--- a/components/request/RequestData.tsx
+++ b/components/request/RequestData.tsx
@@ -155,7 +155,7 @@ const RequestData: React.FC = () => {
           <div className="text-center font-avenir text-[36px] font-extrabold  text-[#4D4D4D]">
             <h1>{t('request-header')}</h1>
           </div>
-          <p className="pl-2 text-center font-avenir font-normal text-[18px] text-[#7C7C7C] leading-[1.375rem] mb-8">
+          <p className="pl-2 text-center font-avenir font-normal text-[18px] text-[#595959] leading-[1.375rem] mb-8">
             {t('request-descrp')}
           </p>
           <div className="flex pl-2 py-2 rounded-lg bg-white font-avenir text-[18px] font-normal text-[#858585] mb-4 hover:border-b-4 hover:rounded-b-xl hover:border-b-[#22B373]">
@@ -163,6 +163,7 @@ const RequestData: React.FC = () => {
             <input
               type="text"
               placeholder={t('name')}
+              title={t('name')}
               className="w-3/4 border-none focus:ring-0  focus:border-white"
               required
               ref={nameRef}
@@ -177,6 +178,7 @@ const RequestData: React.FC = () => {
             <img src="/images/email.svg" alt="email" className="mr-2" />
             <input
               type="email"
+              title={t('email')}
               placeholder={t('email')}
               className="w-3/4 border-none focus:ring-0  focus:border-white"
               required
@@ -192,13 +194,14 @@ const RequestData: React.FC = () => {
             <textarea
               placeholder={t('request-msg')}
               className="w-full h-48 border-none focus:ring-0 focus:border-white"
+              title={t('request-msg')}
               onChange={(e) => {
                 setCount(e.target.value.length);
               }}
               required
               ref={textRef}
             />
-            <div className="float-right text-[15px] text-[#808080]">
+            <div className="float-right text-[15px] text-[#595959]">
               {count}/1000
             </div>
           </div>
diff --git a/components/search/Pagination.tsx b/components/search/Pagination.tsx
index e67ddd1..4c6e099 100644
--- a/components/search/Pagination.tsx
+++ b/components/search/Pagination.tsx
@@ -113,6 +113,7 @@ const Pagination: React.FC<{
               onClick={() => {
                 handleClick(pageNum, pages[pageNum - 1]);
               }}
+              aria-label={`Page ${index + 1}`}
               className={`mx-2 ${
                 pageNum === currentPage
                   ? 'px-3 py-0 rounded-md bg-blue-100'
diff --git a/components/static/List.tsx b/components/static/List.tsx
index 47462a7..cc343a0 100644
--- a/components/static/List.tsx
+++ b/components/static/List.tsx
@@ -82,7 +82,7 @@ const List: React.FC = () => {
                         {post.title}
                       </h1>
                       <p
-                        className={`text-sm font-medium text-[#7C7C7C] line-clamp-2 text-center ${AR(
+                        className={`text-sm font-medium text-[#555555] line-clamp-2 text-center ${AR(
                           'sm:text-right',
                           'sm:text-left'
                         )}`}
@@ -92,7 +92,7 @@ const List: React.FC = () => {
                     </a>
                   </Link>
                   <div className="grow h-full"></div>
-                  <div className="inline-flex items-center justify-center sm:justify-start py-1 xl:py-2 space-x-2 text-[#7C7C7C]">
+                  <div className="inline-flex items-center justify-center sm:justify-start py-1 xl:py-2 space-x-2 text-[#545454]">
                     <div className={`${AR('ml-4', 'mr-4')}`}>
                       <img
                         src="/images/time.svg"