#140 accessibility fixes

FCSCOpendata · Dec 17, 2023 · 17f2def · 17f2def
1 parent 132ad90
commit 17f2def
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -155,14 +155,15 @@ 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]">
             <img src="/images/profile.svg" alt="profile" className="mr-2" />
             <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
@@ -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
@@ -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"