Skip to content

Commit

Permalink
WIP: fix(payments-next): Implement a11y improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@xlisachan
xlisachan committed Jun 3, 2024
1 parent 915fcd5 commit 1884120
Show file tree
Hide file tree
Showing 24 changed files with 487 additions and 328 deletions.
25 changes: 12 additions & 13 deletions apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { revalidatePath } from 'next/cache';
import { headers } from 'next/headers';
import { PaymentSection } from '@fxa/payments/ui';
import {
app,
getCartOrRedirectAction,
SupportedPages,
} from '@fxa/payments/ui/server';
import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
import { auth, signIn } from 'apps/payments/next/auth';
import { headers } from 'next/headers';
import { CheckoutParams } from '../layout';
import {
getFakeCartData,
getContentfulContent,
} from 'apps/payments/next/app/_lib/apiClient';
import { PaymentSection } from '@fxa/payments/ui';
import { auth, signIn } from 'apps/payments/next/auth';
import { PrimaryButton } from 'libs/payments/ui/src/lib/client/components/PrimaryButton';
import { revalidatePath } from 'next/cache';
import { CheckoutParams } from '../layout';

export const dynamic = 'force-dynamic';

Expand Down Expand Up @@ -62,21 +63,21 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {
await signIn('fxa');
}}
>
<p className="text-grey-400 text-sm mt-2 mb-4">
<p className="text-grey-400 text-sm mt-2 pb-4 row-divider-grey-200">
{l10n.getFragmentWithSource(
'next-new-user-sign-in-link-2',
{
elems: {
a: (
<button className="underline text-grey-400 hover:text-grey-400">
<button className="underline hover:text-grey-400">
Sign in
</button>
),
},
},
<>
Already have a Mozilla account?&nbsp;
<button className="underline text-grey-400 hover:text-grey-400">
<button className="underline hover:text-grey-400">
Sign in
</button>
</>
Expand Down Expand Up @@ -115,14 +116,12 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {
<PrimaryButton type="submit"> Set email</PrimaryButton>
</form>
</div>

<hr className="mx-auto w-full border-grey-200" />
</>
)}

{!session ? (
<h2
className="font-semibold text-grey-600 text-lg mt-14 mb-5"
className="font-semibold text-grey-600 text-lg mt-10 mb-5"
data-testid="header-prefix"
>
{l10n.getString(
Expand All @@ -132,7 +131,7 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {
</h2>
) : (
<h2
className="font-semibold text-grey-600 text-lg mt-14 mb-5"
className="font-semibold text-grey-600 text-lg mt-10 mb-5"
data-testid="header"
>
{l10n.getString(
Expand All @@ -141,7 +140,7 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {
)}
</h2>
)}
<h3 className="font-semibold my-3 text-grey-600 text-start">
<h3 className="font-semibold text-grey-600 text-start">
{l10n.getString(
'next-payment-method-first-approve',
`First you'll need to approve your subscription`
Expand Down
2 changes: 1 addition & 1 deletion apps/payments/next/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function RootLayout({
<html lang="en">
<body>
<header
className="bg-white fixed flex justify-between items-center shadow h-16 left-0 top-0 mx-auto my-0 px-4 py-0 w-full z-10 tablet:h-20"
className="bg-white fixed flex justify-between items-center shadow h-16 left-0 top-0 mx-auto my-0 px-4 py-0 w-full z-40 tablet:h-20"
role="banner"
data-testid="header"
>
Expand Down
2 changes: 1 addition & 1 deletion libs/payments/ui/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities

export * from './lib/utils/helpers';
export * from './lib/client/components/StripeWrapper';
export * from './lib/client/components/CheckoutForm';
export * from './lib/client/components/CheckoutCheckbox';
export * from './lib/client/components/PaymentSection';
export * from './lib/client/providers/Providers';
150 changes: 77 additions & 73 deletions libs/payments/ui/src/lib/client/components/CheckoutCheckbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
'use client';

import * as HoverCard from '@radix-ui/react-hover-card';
import { useEffect, useState } from 'react';
import { Localized } from '@fluent/react';
import * as Tooltip from '@radix-ui/react-tooltip';
import { useEffect, useState } from 'react';
import { LinkExternal } from '@fxa/shared/react/components/LinkExternal';

interface CheckoutCheckboxProps {
isRequired: boolean;
Expand Down Expand Up @@ -38,84 +39,87 @@ export function CheckoutCheckbox({
};

return (
<HoverCard.Root open={isRequired && !isChecked}>
<label className="flex gap-5 items-center mt-6">
<HoverCard.Trigger>
<input
type="checkbox"
name="confirm"
className="grow-0 shrink-0 basis-4 scale-150 cursor-pointer"
checked={isChecked}
onChange={changeHandler}
/>
</HoverCard.Trigger>
{isClient && (
<Localized
id="next-payment-confirm-with-legal-links-static-3"
elems={{
termsOfServiceLink: (
<a
<Tooltip.Provider>
<Tooltip.Root open={isRequired && !isChecked}>
<label className="flex gap-5 items-center my-6">
<Tooltip.Trigger asChild>
<input
type="checkbox"
name="confirm"
className="grow-0 shrink-0 basis-4 scale-150 cursor-pointer"
checked={isChecked}
onChange={changeHandler}
required
aria-describedby="checkboxError"
aria-required
/>
</Tooltip.Trigger>
{isClient && (
<Localized
id="next-payment-confirm-with-legal-links-static-3"
elems={{
termsOfServiceLink: (
<LinkExternal
href={termsOfService}
className="text-blue-500 underline"
>
Terms of Service
</LinkExternal>
),
privacyNoticeLink: (
<LinkExternal
href={privacyNotice}
className="text-blue-500 underline"
>
Privacy Notice
</LinkExternal>
),
}}
>
<span className="font-normal text-sm leading-5 block">
I authorize Mozilla to charge my payment method for the amount
shown, according to{' '}
<LinkExternal
href={termsOfService}
target="_blank"
rel="noreferrer"
className="text-blue-500 underline"
>
Terms of Service
</a>
),
privacyNoticeLink: (
<a
</LinkExternal>{' '}
and{' '}
<LinkExternal
href={privacyNotice}
target="_blank"
rel="noreferrer"
className="text-blue-500 underline"
>
Privacy Notice
</a>
),
}}
>
<span className="font-normal text-sm block">
I authorize Mozilla to charge my payment method for the amount
shown, according to{' '}
<a
href={termsOfService}
target="_blank"
rel="noreferrer"
className="text-blue-500 underline"
>
Terms of Service
</a>{' '}
and{' '}
<a
href={privacyNotice}
target="_blank"
rel="noreferrer"
className="text-blue-500 underline"
>
Privacy Notice
</a>
, until I cancel my subscription.
</span>
</Localized>
)}
</label>
<HoverCard.Portal>
<HoverCard.Content
className="animate-slide-up z-20"
sideOffset={20}
align="start"
alignOffset={50}
arrowPadding={20}
>
<Localized id="next-payment-confirm-checkbox-error">
<div className="text-white text-sm bg-alert-red py-1.5 px-4">
You need to complete this before moving forward
</div>
</Localized>
<HoverCard.Arrow className="fill-alert-red" height={11} width={22} />
</HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root>
</LinkExternal>
, until I cancel my subscription.
</span>
</Localized>
)}
<Tooltip.Portal>
<Tooltip.Content
id="checkboxError"
className="animate-slide-up z-20"
sideOffset={20}
align="start"
alignOffset={50}
arrowPadding={20}
role="alert"
>
<Localized id="next-payment-confirm-checkbox-error">
<div className="text-white text-sm bg-alert-red py-1.5 px-4">
You need to complete this before moving forward
</div>
</Localized>
<Tooltip.Arrow
className="fill-alert-red"
height={11}
width={22}
/>
</Tooltip.Content>
</Tooltip.Portal>
</label>
</Tooltip.Root>
</Tooltip.Provider>
);
}
2 changes: 1 addition & 1 deletion libs/payments/ui/src/lib/client/components/CheckoutForm.ftl
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
## Checkout Form

next-new-user-submit = Subscribe Now
next-payment-validate-name-error = Please enter your full name
# Label for the Full Name input
payment-name-label = Name as it appears on your card
payment-name-placeholder = Full Name
Loading

0 comments on commit 1884120

Please sign in to comment.