Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test accessbility error from ci/cd #606

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
2 changes: 2 additions & 0 deletions deployment/frontend/src/components/_shared/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ export default function Footer({
href="https://www.portaljs.com/"
target="_blank"
className=" text-wri-green"
aria-label="Portal.js website"
>
Portal.js
</a>{' '}
Expand All @@ -168,6 +169,7 @@ export default function Footer({
<a
href="https://www.datopian.com/"
target="_blank"
aria-label="Datopian website"
>
<Image
src="/images/datopian.png"
Expand Down
2 changes: 2 additions & 0 deletions deployment/frontend/src/components/home/HomeFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export function HomeFooter() {
href="https://www.portaljs.com/"
target="_blank"
className=" text-wri-green"
aria-label="Portal.js website"
>
Portal.js
</a>{' '}
Expand All @@ -158,6 +159,7 @@ export function HomeFooter() {
<a
href="https://www.datopian.com/"
target="_blank"
aria-label="Datopian website"
>
<Image
src="/images/datopian.png"
Expand Down
217 changes: 112 additions & 105 deletions deployment/frontend/src/components/search/DatasetHorizontalCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,136 +46,143 @@ export default function DatasetHorizontalCard({
dataset?.rw_id || dataset?.resources?.some((r) => r.datastore_active)

return (
<div className="flex flex-col border border-[#C9C9C9] hover:border-wri-green bg-white p-5 mb-2 shadow-wri-dcard transition hover:bg-[#EFF5F7] group rounded-[4px]">
<div className="flex flex-col lg:flex-row gap-y-2">
<div className="flex items-center grow shrink ">
<h3 className="font-acumin text-[18px] font-bold leading-[28px] text-stone-900 line-clamp-1 group-hover:text-wri-green">
{dataset.title}
</h3>
{dataset.visibility_type &&
session.status == 'authenticated' &&
dataset.visibility_type != 'public' && (
<Chip
text={
visibilityTypeLabels[
dataset.visibility_type
] ?? ''
}
/>
)}
</div>

<div className="flex lg:ml-auto gap-x-[12px] shrink-0">
{formats.slice(0, 4).map((format) => (
<span
key={`dataset-${dataset.name}-format-${format}`}
className={` font-acumin inline-flex w-fit items-center justify-center rounded-[9999px] px-[12px] py-[4px] text-center text-[12px] font-bold leading-[16px] ${
format &&
Object.keys(formatColors).includes(
format.toLowerCase()
)
? getFormatColor(format.toLowerCase())
: 'bg-wri-light-green'
}`}
<Link href={`/datasets/${dataset.name}`}>
<div className="flex flex-col border border-[#C9C9C9] hover:border-wri-green bg-white p-5 mb-2 shadow-wri-dcard transition hover:bg-[#EFF5F7] group rounded-[4px]">
<div className="flex flex-col lg:flex-row gap-y-2">
<div className="flex items-center grow shrink ">
<h3
className="font-acumin text-[18px] font-bold leading-[28px] text-stone-900 line-clamp-1 group-hover:text-wri-green"
tabIndex={0}
>
<span className="my-auto">{format}</span>
</span>
))}
{dataset.title}
</h3>
{dataset.visibility_type &&
session.status == 'authenticated' &&
dataset.visibility_type != 'public' && (
<Chip
text={
visibilityTypeLabels[
dataset.visibility_type
] ?? ''
}
/>
)}
</div>

<div className="flex lg:ml-auto gap-x-[12px] shrink-0">
{formats.slice(0, 4).map((format) => (
<span
key={`dataset-${dataset.name}-format-${format}`}
className={` font-acumin inline-flex w-fit items-center justify-center rounded-[9999px] px-[12px] py-[4px] text-center text-[12px] font-bold leading-[16px] ${
format &&
Object.keys(formatColors).includes(
format.toLowerCase()
)
? getFormatColor(format.toLowerCase())
: 'bg-wri-light-green'
}`}
>
<span className="my-auto">{format}</span>
</span>
))}
</div>
</div>
</div>

<p className="font-acumin text-[1rem] leading-[22px] font-light text-[#1A1919] line-clamp-4 mt-[12px] w-full h-[88px] lg:w-[733.783px] mb-[21px] ">
{dataset.short_description ?? ''}
</p>
<p className="font-acumin text-[1rem] leading-[22px] font-light text-[#1A1919] line-clamp-4 mt-[12px] w-full h-[88px] lg:w-[733.783px] mb-[21px] ">
{dataset.short_description ?? ''}
</p>

<div className="flex flex-col lg:flex-row gap-x-1.5 gap-y-2">
<div className="flex items-center grow shrink gap-x-[16px] gap-y-[4px] flex-wrap">
{dataset.organization?.title && (
<div className="flex flex-col lg:flex-row gap-x-1.5 gap-y-2">
<div className="flex items-center grow shrink gap-x-[16px] gap-y-[4px] flex-wrap">
{dataset.organization?.title && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<UserGroupIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.organization?.title}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Team</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<UserGroupIcon className="h-3 w-3 text-wri-green" />
<ArrowPathIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.organization?.title}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Team</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ArrowPathIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.metadata_modified
? 'Last Updated ' +
new Date(
dataset.metadata_modified
)
.toLocaleDateString('en-US', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
.replace(
/^([a-zA-Z]+) (\d+), (\d+)$/,
'$2 $1 $3'
{dataset.metadata_modified
? 'Last Updated ' +
new Date(
dataset.metadata_modified
)
: ''}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Last modified</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
{(dataset.temporal_coverage_start ||
dataset.temporal_coverage_end) && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ClockIcon className="h-3 w-3 text-blue-800" />
<p className="font-acumin flex text-[14px] leading-[14px] font-normal text-[#4F4E4E]">
{dataset.temporal_coverage_start ||
'?'}
{' - '}
{dataset.temporal_coverage_end ||
'?'}
.toLocaleDateString(
'en-US',
{
day: 'numeric',
month: 'short',
year: 'numeric',
}
)
.replace(
/^([a-zA-Z]+) (\d+), (\d+)$/,
'$2 $1 $3'
)
: ''}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
Temporal Coverage
<p>Last modified</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
</div>
<Link href={`/datasets/${dataset.name}`}>
<div className="flex justify-end lg:justify-start lg:ml-auto shrink-0 group-hover:text-wri-green">
{(dataset.temporal_coverage_start ||
dataset.temporal_coverage_end) && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ClockIcon className="h-3 w-3 text-blue-800" />
<p className="font-acumin flex text-[14px] leading-[14px] font-normal text-[#4F4E4E]">
{dataset.temporal_coverage_start ||
'?'}
{' - '}
{dataset.temporal_coverage_end ||
'?'}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
Temporal Coverage
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
</div>

<button className="flex justify-end lg:justify-start lg:ml-auto shrink-0 group-hover:text-wri-green">
<div className="text-base leading-[24px] font-bold">
View dataset
</div>
<div className="pt-0.5">
<ChevronRightIcon className="h-4 w-4 stroke-current stroke-[3] " />
</div>
</div>
</Link>
</button>
</div>
</div>
</div>
</Link>
)
}
Loading