Merge pull request #148 from FCSCOpendata/fix/accessibility

Accessibility Fixes: Global Components and Pages
FCSCOpendata · Dec 19, 2023 · 4fe37aa · 4fe37aa
2 parents 7b6ba11 + b6a226f
commit 4fe37aa
Show file tree

Hide file tree

Showing 23 changed files with 115 additions and 64 deletions.
diff --git a/components/_shared/ScrollIndicator.tsx b/components/_shared/ScrollIndicator.tsx
@@ -64,7 +64,7 @@ const ScrollIndicator: React.FC<{
               <div className="h-full absolute flex flex-col justify-evenly w-full items-center border-[#333333] border-t-[1px] border-b-[1px] w-1">
                 {stops.map((stop, index) => (
                   <button
-                    aria-label="test"
+                    aria-label={`Section ${index + 1}`}
                     className={`transition-all ease-in-out origin-center duration-100 rounded-full border-[1px] border-[#333333] w-[10px] h-[10px] bg-[#fff] ${
                       active == index ? 'scale-150' : ''
                     } flex justify-center items-center`}

diff --git a/components/_shared/carousel/card/Card.tsx b/components/_shared/carousel/card/Card.tsx
@@ -15,8 +15,8 @@ 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]">
-        <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
+      <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-30" />
         <div>
           <img
             src={image.url}
@@ -25,12 +25,12 @@ 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`}
+          )} leading-4 item-title flex justify-between group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all items-center`}
         >
-          <h3 className="font-avenir font-bold">{title}</h3>
+          <h3 className="font-avenir font-bold ">{title}</h3>
           {!!icon.url && (
             <div
               className={`block overflow-hidden w-[40px] h-[40px] ${AR(

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/_shared/developer_experience/Code.tsx b/components/_shared/developer_experience/Code.tsx
@@ -1,5 +1,8 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import {
+  docco,
+  githubGist,
+} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { AR } from '../../../hooks/locale';
 import CopyIconButton from '../CopyIconButton';
 import useTranslation from 'next-translate/useTranslation';
@@ -24,7 +27,7 @@ const Code: React.FC<any> = ({ language, children }) => {
           <SyntaxHighlighter
             language={language}
             className="syntax"
-            style={docco}
+            style={githubGist}
             customStyle={{
               backgroundColor: '#FEFEFE',
               borderRadius: '25px',

diff --git a/components/dataset/About.tsx b/components/dataset/About.tsx
@@ -34,33 +34,49 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           />
         </h1>
       </div>
-      <div className="flex flex-col lg:flex-row justify-start gap-x-8 mb-4 text-[#787878] text-[20px] font-normal">
+      <div className="flex flex-col lg:flex-row justify-start gap-x-8 mb-4 text-[#595959] text-[20px] font-normal">
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/library-icon.svg" alt="orgs" className="w-5 h-3" />
+          <img
+            src="/images/library-icon.svg"
+            alt="organization"
+            className="w-5 h-3"
+          />
           <Link href={`/@${result.organization.name}`}>
             <a href={`/@${result.organization.name}`}>
               {result.organization.title}
             </a>
           </Link>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/print-icon.svg" alt="orgs" className="w-5 h-3 " />
+          <img
+            src="/images/print-icon.svg"
+            alt="date created"
+            className="w-5 h-3 "
+          />
           <span>
             {t('created') +
               ' ' +
               new Date(result.created).toLocaleDateString('en-GB')}
           </span>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/clock-icon.svg" alt="orgs" className="w-5 h-3" />
+          <img
+            src="/images/clock-icon.svg"
+            alt="date updated"
+            className="w-5 h-3"
+          />
           <span>
             {t('updated') +
               ' ' +
               new Date(result.updated).toLocaleDateString('en-GB')}
           </span>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/book-icon.svg" alt="orgs" className="w-5  h-3" />
+          <img
+            src="/images/book-icon.svg"
+            alt="license"
+            className="w-5  h-3"
+          />
           <span>{result.license_title}</span>
         </div>
         {result.total_downloads > 0 ? (
@@ -75,7 +91,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           ''
         )}
       </div>
-      <div className="flex justify-start gap-x-4 md:gap-x-8 mb-4 text-[#787878] text-[20px] font-normal items-baseline">
+      <div className="flex justify-start gap-x-4 md:gap-x-8 mb-4 text-[#595959] text-[20px] font-normal items-baseline">
         <div className="font-avenir flex text-sm py-2 items-baseline">
           <span>{t('share')}: </span>
           <Share title={result.title} />
@@ -89,10 +105,10 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           <Rate title={result.title} id={result.id} />
         </div>
       </div>
-      <article className="font-avenir text-[#7C7C7C] text-[20px] font-normal  mb-4">
+      <article className="font-avenir text-[#595959] text-[20px] font-normal  mb-4">
         {result.description?.replace(/<[^>]*>?/gm, '') || ''}
       </article>
-      <div className="flex flex-row font-avenir font-normal text-[15px] text-[#086F06]">
+      <div className="flex flex-row font-avenir font-normal text-[15px] text-[#074106]">
         <Tags
           tags={result.tags}
           style={`rounded-full bg-[#80E47E] py-2 px-4 ${AR('', 'mr-4')}`}

diff --git a/components/dataset/DataExplorer.tsx b/components/dataset/DataExplorer.tsx
@@ -159,7 +159,7 @@ const DataExplorer: React.FC<{
                   {i === activeTable ? (
                     <img
                       src="/images/checked-icon.svg"
-                      alt="orgs"
+                      alt="org checked"
                       className={`w-5 h-4 mb-4 absolute -top-2 ${AR(
                         'right-2',
                         '-right-2'
@@ -175,7 +175,7 @@ const DataExplorer: React.FC<{
                         ? `/images/${resource.format.toLowerCase()}-icon.svg`
                         : '/images/resources/unknown.svg'
                     }
-                    alt="orgs"
+                    alt={`resource ${i}`}
                     className="w-10 mb-4"
                   />
 
@@ -191,9 +191,9 @@ const DataExplorer: React.FC<{
       <div className="lg:col-span-9 p-6 lg:p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex flex-col md:flex-row justify-between mb-4">
           <div className="md:w-2/3">
-            <p className="font-medium font-avenir text-2xl mb-5 text-[#4D4D4D]">
+            <h2 className="font-medium font-avenir text-2xl mb-5 text-[#4D4D4D]">
               {resources[activeTable].title || resources[activeTable].name}
-            </p>
+            </h2>
           </div>
           <div className="grid xl:justify-items-end align-middle justify-items-start ">
             <Link
@@ -217,7 +217,7 @@ const DataExplorer: React.FC<{
         </div>
 
         <div
-          className={`flex font-avenir text-[20px] text-[#808080] font-normal ${AR(
+          className={`flex font-avenir text-[20px] text-[#545454] font-normal ${AR(
             'pr-4',
             'pl-4'
           )} flex-col sm:flex-row`}
@@ -237,7 +237,7 @@ const DataExplorer: React.FC<{
             className={`${AR(
               'ml-3',
               'mr-3'
-            )} text-[#C4C4C4] text-1 hidden sm:block`}
+            )} text-[#545454] text-1 hidden sm:block`}
           >
             |
           </div>
@@ -250,7 +250,7 @@ const DataExplorer: React.FC<{
             className={`${AR(
               'ml-3',
               'mr-3'
-            )} text-[#C4C4C4] text-1 hidden sm:block`}
+            )} text-[#545454] text-1 hidden sm:block`}
           >
             |
           </div>

diff --git a/components/dataset/Share.tsx b/components/dataset/Share.tsx
@@ -8,6 +8,7 @@ const Share: React.FC<{ title: string }> = ({ title }) => {
   return (
     <span className={`text-[#1F356C] ${AR('ml-2', 'mr-2')}}`}>
       <a
+        aria-label="Share"
         href={`mailto:?subject=${subject}&body=${title} - ${
           typeof window !== 'undefined' ? window.location.href : ''
         }  %0d%0a %0d%0a ${t('goto-site', {

diff --git a/components/dataset/SimilarDatasets.tsx b/components/dataset/SimilarDatasets.tsx
@@ -49,7 +49,7 @@ export default function SimilarDatasets({ variables }) {
       <div className="flex justify-center w-full xl:p-10">
         <div className="flex flex-col items-between h-full xl:w-2/3 mb-10 w-full">
           <div className="self-center mb-4 font-avenir text-[30px] font-extrabold text-[#4D4D4D]">
-            <p>{t('explore-s-datasets')}</p>
+            <h2>{t('explore-s-datasets')}</h2>
           </div>
           <div className="flex xl:flex-row flex-col justify-between bg-[#F7FAFC] p-2 rounded-xl">
             <button
@@ -58,7 +58,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/edu-icon.svg"
-                alt="orgs"
+                alt="topic icon"
                 className={`w-4 h-4 ${AR('ml-2', 'mr-2')}`}
               />
               {result.groups[0]?.title} {t('topic')}
@@ -69,7 +69,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/ball-icon.svg"
-                alt="orgs"
+                alt="keywork icon"
                 className={`w-4 h-4 text-white ${AR('ml-2', 'mr-2')}`}
               />
               {result.tags[0]?.title} {t('keyword')}
@@ -80,7 +80,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/library-icon.svg"
-                alt="orgs"
+                alt="org icon"
                 className={`w-4 h-4 text-white ${AR('ml-2', 'mr-2')}`}
               />
               {result.organization.title}

diff --git a/components/home/main/OpenData101.tsx b/components/home/main/OpenData101.tsx
@@ -10,14 +10,16 @@ export default function OpenData101(props) {
   }
 
   return (
-    <div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto ">
+    <div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto">
       <img
         src="/images/open-data-101.svg"
-        alt="Open Data 101"
+        alt="Open Data 101 Background"
         className="w-full"
       />
       <div className="absolute w-full lg:w-1/2  lg:inset-x-1/4 top-0 sm:top-auto sm:bottom-1/2 text-center">
-        <p className="text-[#54CA59] font-semibold">- {t('hm-p-next')} -</p>
+        <p className="text-[#0E5D15] text-[18px] font-semibold">
+          - {t('hm-p-next')} -
+        </p>
         <a href={`${AR('/ar')}/p/open-data-101`}>
           <h2 className="font-avenir font-extrabold text-2xl lg:text-4xl mb-2">
             {text}
@@ -28,7 +30,7 @@ export default function OpenData101(props) {
         </p>
         <a
           href="#"
-          className="text-[#54CA59] font-medium"
+          className="text-[#0E5D15] font-medium text-[18px]"
           onClick={scrollToTop}
         >
           {t('opendata-a')}

diff --git a/components/home/main/Topics.tsx b/components/home/main/Topics.tsx
@@ -44,10 +44,10 @@ export default function Topics() {
                 <a
                   key={index}
                   href={`${AR('/ar')}/topic/${topic.name}`}
-                  className="group h-full w-full flex flex-stretch"
+                  className="group h-full w-full flex flex-stretch topic-item"
                 >
-                  <div className="relative bg-gray-200 w-full rounded-lg overflow-hidden">
-                    <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
+                  <div className="relative bg-gray w-full rounded-lg overflow-hidden ">
+                    <span className="absolute left-0 z-20 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l " />
                     <Image
                       src={topic.image_display_url}
                       priority={false}
@@ -57,7 +57,7 @@ export default function Topics() {
                       alt={topic.title}
                       className="w-full h-full object-center object-contain"
                     />
-                    <p className="absolute py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
+                    <p className="item-title absolute z-10 py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
                       {topic.title}
                     </p>
                   </div>

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/resource/About.tsx b/components/resource/About.tsx
@@ -42,13 +42,13 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           {resource.format === 'CSV' ? (
             <img
               src="/images/csv-icon.svg"
-              alt="Dataset title"
+              alt="CSV"
               className="inline w-6 xl:mr-2"
             />
           ) : (
             <img
               src="/images/excel-icon.svg"
-              alt="Dataset title"
+              alt="Excel"
               className="inline w-6 xl:mr-2"
             />
           )}
@@ -62,7 +62,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
             />
           </h1>
         </div>
-        <article className="font-avenir text-[#7C7C7C] text-[20px] font-normal mb-4">
+        <article className="font-avenir text-[#545454] text-[20px] font-normal mb-4">
           {resource.description?.replace(/<[^>]*>?/gm, '') || ''}
         </article>
       </div>