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

Jump to bottom

add style.label to aria-label #2169

Merged
merged 13 commits into from Jun 7, 2023
Merged

add style.label to aria-label #2169

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
244e58f
read aria-label from xo-content
jshawl May 15, 2023
630c299
fix lint issue
jshawl May 15, 2023
a81fdfc
Check presence of content
jshawl May 15, 2023
83d57b9
use paypal funding config
jshawl May 15, 2023
4a18ce7
revert
jshawl May 15, 2023
8d70a0d
use constant
jshawl May 15, 2023
c2b2c21
handle interpolation
jshawl May 15, 2023
f57e057
fix screenshot test failure
jshawl Jun 5, 2023
8d4061f
fix typecheck error
jshawl Jun 5, 2023
c086631
fix percy screenshot test failure
jshawl Jun 5, 2023
b372dca
fix content structure
jshawl Jun 6, 2023
a798134
remove unused type
jshawl Jun 6, 2023
44c86aa
add test coverage for aria-label changes
jshawl Jun 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/funding/common.jsx
View file
Open in desktop
Expand Up @@ -150,6 +150,8 @@ export type FundingSourceConfig = {|
| (({|
content: ?ContentType,
fundingEligibility: ?FundingEligibilityType,
label?: string,
period?: number,
|}) => string),
showWalletMenu: ({|
instrument: WalletInstrument,
Expand Down
25 changes: 22 additions & 3 deletions src/funding/paypal/config.jsx
View file
Open in desktop
Expand Up @@ -4,7 +4,12 @@
import { LOGO_COLOR } from "@paypal/sdk-logos/src";
import { FUNDING_BRAND_LABEL } from "@paypal/sdk-constants/src";

import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from "../../constants";
import {
BUTTON_COLOR,
BUTTON_LAYOUT,
BUTTON_FLOW,
BUTTON_LABEL,
} from "../../constants";
import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";

import { Logo, Label, WalletLabel, Tag } from "./template";
Expand Down Expand Up @@ -38,8 +43,22 @@ export function getPayPalConfig(): FundingSourceConfig {
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
},

labelText: `${FUNDING_BRAND_LABEL.PAYPAL}`,

labelText: ({ content, label, period }) => {
let text = `${FUNDING_BRAND_LABEL.PAYPAL}`;
if (content && label === BUTTON_LABEL.INSTALLMENT) {
if (period) {
text = content["label.installment.withPeriod"].replace(
"{period}",
String(period)
);
} else {
text = content["label.installment.withoutPeriod"];
}
} else if (content && label) {
text = content[`label.${label}`];
}
return text;
},
Comment on lines +46 to +61
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should consider unit testing this

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call - let me see if that could be a quick win!

Logo,
Label,
WalletLabel,
Expand Down
6 changes: 6 additions & 0 deletions src/types.js
View file
Open in desktop
Expand Up @@ -48,6 +48,12 @@ export type ContentType = {|
flex: string,
payPalBalance: string,
moreOptions: string,
"label.paypal": string,
"label.checkout": string,
"label.buynow": string,
"label.pay": string,
"label.installment.withPeriod": string,
"label.installment.withoutPeriod": string,
|};

export type Experiment = {|
Expand Down
7 changes: 6 additions & 1 deletion src/ui/buttons/button.jsx
View file
Open in desktop
Expand Up @@ -144,7 +144,12 @@ export function Button({
function getAriaLabel(): string {
let labelText =
typeof fundingConfig.labelText === "function"
? fundingConfig.labelText({ content, fundingEligibility })
? fundingConfig.labelText({
content,
fundingEligibility,
label,
period,
})
: fundingConfig.labelText || fundingSource;

if (!showPayLabel && instrument?.vendor && instrument.label) {
Expand Down
6 changes: 6 additions & 0 deletions test/content.js
View file
Open in desktop
Expand Up @@ -17,4 +17,10 @@ export const testContent = {
balance: "Balance",
payPalBalance: "PayPal balance",
moreOptions: "More options",
"label.checkout": "Checkout",
"label.paypal": "PayPal",
"label.buynow": "Buy Now",
"label.pay": "Pay with PayPal",
"label.installment.withPeriod": "Pay up to {period}x without interest",
"label.installment.withoutPeriod": "Interest free payments",
};
6 changes: 6 additions & 0 deletions test/percy/content.js
View file
Open in desktop
Expand Up @@ -14,4 +14,10 @@ export const testContent = {
credit: "Credit",
balance: "Balance",
payPalBalance: "PayPal balance",
"label.checkout": "Checkout",
"label.paypal": "PayPal",
"label.buynow": "Buy Now",
"label.pay": "Pay with PayPal",
"label.installment.withPeriod": "Pay up to {period}x without interest",
"label.installment.withoutPeriod": "Interest free payments",
};