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.

Sign up for GitHub

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

Accessibility Fixes: Global Components and Pages #148

Merged
merged 4 commits into from
Dec 19, 2023
Merged

Accessibility Fixes: Global Components and Pages #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
132ad90
#140 Fix Globals, Home, Dataset, Dataset Detail, Build Data
Dec 14, 2023
17f2def
#140 accessibility fixes
Dec 17, 2023
84197a9
Merge branch 'main' into fix/accessibility
willy1989cv Dec 18, 2023
b6a226f
#140 Fix card overlay
Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/_shared/ScrollIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`}
Expand Down
10 changes: 5 additions & 5 deletions components/_shared/carousel/card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion components/_shared/carousel/icon_card/IconCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
7 changes: 5 additions & 2 deletions components/_shared/developer_experience/Code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
Expand Down
32 changes: 24 additions & 8 deletions components/dataset/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -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} />
Expand All @@ -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')}`}
Expand Down
14 changes: 7 additions & 7 deletions components/dataset/DataExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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"
/>

Expand All @@ -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
Expand All @@ -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`}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions components/dataset/Share.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
8 changes: 4 additions & 4 deletions components/dataset/SimilarDatasets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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')}
Expand All @@ -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')}
Expand All @@ -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}
Expand Down
10 changes: 6 additions & 4 deletions components/home/main/OpenData101.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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')}
Expand Down
8 changes: 4 additions & 4 deletions components/home/main/Topics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion components/organization/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -27,6 +32,7 @@ const Header: React.FC<any> = ({ org, datasetsCount, badgeOnClick }) => {
badgeText={badgeText}
image={image}
badgeOnClick={badgeOnClick}
color={color}
>
{description}
</ImageHeader>
Expand Down
1 change: 1 addition & 0 deletions components/organization/MainOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ const MainOptions: React.FC<any> = ({
<>
<div className="mb-20">
<OrgHeader
color="#188154"
org={activeOrg}
datasetsCount={activeOrg?.package_count}
badgeOnClick={() => {
Expand Down
7 changes: 5 additions & 2 deletions components/request/RequestData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions components/resource/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
)}
Expand All @@ -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>
Expand Down
Loading
Loading