From 1ce2841295cb29b05b6a0d1406dc07a9fa01fad4 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Wed, 9 Jun 2021 00:38:23 +1000 Subject: [PATCH] A11y and events --- .../src/components/Button/Button.tsx | 3 +-- .../src/components/Donate/Donate.tsx | 12 ++++++----- .../GoogleCalendar/GoogleCalendar.tsx | 2 +- .../OutlookCalendar/OutlookCalendar.tsx | 2 +- crabfit-frontend/src/pages/Create/Create.tsx | 2 +- crabfit-frontend/src/pages/Home/Home.tsx | 20 +++++++++---------- 6 files changed, 21 insertions(+), 20 deletions(-) diff --git a/crabfit-frontend/src/components/Button/Button.tsx b/crabfit-frontend/src/components/Button/Button.tsx index 19c40b7..a7d2efb 100644 --- a/crabfit-frontend/src/components/Button/Button.tsx +++ b/crabfit-frontend/src/components/Button/Button.tsx @@ -2,8 +2,7 @@ import { Pressable } from './buttonStyle'; const Button = ({ href, type = 'button', icon, children, ...props }) => ( { }} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" - rel="noreferrer" + rel="noreferrer noopener payment" id="donate_button" + role="button" + aria-expanded={isOpen ? 'true' : 'false'} style={{ whiteSpace: 'nowrap' }} >{t('donate.button')} @@ -137,10 +139,10 @@ const Donate = () => { }} > Donate with PayPal - {t('donate.options.$2')} - {t('donate.options.$5')} - {t('donate.options.$10')} - {t('donate.options.choose')} + {t('donate.options.$2')} + {t('donate.options.$5')} + {t('donate.options.$10')} + {t('donate.options.choose')} ); diff --git a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx index a210359..0c14f07 100644 --- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx +++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx @@ -101,7 +101,7 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { isLoading={signedIn === undefined} primaryColor="#4286F5" secondaryColor="#3367BD" - icon={} + icon={} > {t('event:you.google_cal.login')} diff --git a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx index c2eeae5..ebc590b 100644 --- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx +++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx @@ -168,7 +168,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { isLoading={client === undefined} primaryColor="#0364B9" secondaryColor="#02437D" - icon={} + icon={} > {t('event:you.outlook_cal')} diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index e7430ac..d84e2a9 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -159,7 +159,7 @@ const Create = ({ offline }) => { {createdEvent ? ( -

{t('common:created', { date: createdEvent?.name })}

+

{createdEvent?.name}

navigator.clipboard?.writeText(`https://crab.fit/${createdEvent.id}`) .then(() => { diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 267c990..cf3bc05 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -230,7 +230,7 @@ const Home = ({ offline }) => { {t('home:about.availabilities')} -

Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.
Learn more about how to Crab Fit.

+

Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.
Learn more about how to Crab Fit.

{['chrome', 'firefox', 'safari'].includes(browser) && ( -

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

-

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository. By using Crab Fit you agree to the privacy policy.

+

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

+

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository. By using Crab Fit you agree to the privacy policy.

Consider donating below if it helped you out so it can stay free for everyone. 🦀