chore(order2): improve accessibility by rquartararo · Pull Request #16893 · artsy/force

rquartararo · 2026-03-05T14:48:39Z

The type of this PR is: chore

This PR solves EMI-3025

@artsy/emerald-devs

Description

New address and edit address buttons can now be toggled with the enter key
Ability to tab / enter through payment options and billing address form
Fixes radio button key down events
Adds missing aria labels

src/Apps/Order2/Routes/Checkout/Components/DeliveryOptionsStep/Order2DeliveryOptionsForm.tsx

rquartararo · 2026-03-05T14:52:17Z

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/StripePaymentCheckboxes.tsx

-        open={selectedPaymentMethod === "stripe-card"}
-        data-testid="stripe-card-collapse"
-      >
+      <Box hidden={!isStripeCardSelected} data-testid="stripe-card-collapse">


Replaced Collaspe with <Box hidden as we are still able to tab items inside a closed Collaspe

Is there an animation we are losing here or is collapse literally just a disappearing but not properly hidden box?

I'm not seeing any differences in the animation.

erikdstock

Looks pretty comprehensive. A few minor questions!

erikdstock · 2026-03-05T15:06:13Z

src/Apps/Order2/Routes/Checkout/Components/DeliveryOptionsStep/Order2DeliveryOptionsForm.tsx

+    <RadioGroup
+      flexDirection="column"
+      defaultValue={defaultOption}
+      onSelect={option => {
+        setSelectedOption(option)
+        setFieldValue("deliveryOption", option)
+        checkoutTracking.clickedSelectShippingOption(option.type)
+      }}
+    >


👍 when i was doing the radio change i wondered about some components using this and some not. Are radios always supposed to be wrapped instead of just using onClicks in the radios themselves?

Yes, we should always be wrapping multiple radios in RadioGroup.

src/Apps/Order2/Routes/Checkout/Components/OfferStep/Components/Order2OfferOptions.tsx

erikdstock · 2026-03-05T15:10:21Z

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/__tests__/Order2PaymentForm.jest.tsx

-      expect(screen.getByTestId("stripe-card-collapse")).toHaveStyle({
-        height: "0px",
-      })
+      expect(screen.getByTestId("stripe-card-collapse")).not.toBeVisible()


erikdstock · 2026-03-05T15:11:42Z

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/StripePaymentCheckboxes.tsx

-        open={selectedPaymentMethod === "stripe-card"}
-        data-testid="stripe-card-collapse"
-      >
+      <Box hidden={!isStripeCardSelected} data-testid="stripe-card-collapse">


Is there an animation we are losing here or is collapse literally just a disappearing but not properly hidden box?

erikdstock · 2026-03-05T15:13:20Z

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/StripePaymentCheckboxes.tsx

                      you authorize Artsy to save the bank account specified above.`}
          >
-            <Clickable ml={0.5} style={{ lineHeight: 0 }}>
+            <Clickable aria-label="Direct debit authorization information" ml={0.5} style={{ lineHeight: 0 }}>


In other areas with this icon on my recent radio groups PR I was able to remove the lineHeight style with no bad effect that I could see. Different context inside the payment step perhaps, or maybe i was missing something.

erikdstock · 2026-03-05T15:14:58Z

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/WireTransferOption.tsx

+        as="button"
+        type="button"


if this is marked as a button, does it need a clear label or aria-label or aria-labeledby?

erikdstock · 2026-03-05T15:17:28Z

src/Apps/Order2/Routes/Checkout/Components/RadioOptionRow.tsx

+  const [radioChild, ...otherChildren] = React.Children.toArray(children)
+  const clonedRadio = React.cloneElement(radioChild as React.ReactElement, {
+    onSelect,
+    selected,
+  })
+


Interesting. What is going on here? What happened to our radioChild that we had to replace it with a clone 🦎 👶 ? And why are we throwing _value away? If it's not needed, can we remove the prop?

RadioGroup in Palette manages selection state, but it's expecting Radio as a child, not RadioOptionRow. As for value, this is needed for RadioGroup selection tracking. Basically, by adding RadioOptionRow we are breaking how RadioGroup is intended to be used.

Another option would be to add the RadioOptionRow styles as an option to the component in Palette.

Or we directly add the styles to Radio and we lose the reusability factor but it seems like a cleaner solution.

@erikdstock so I ended up removing RadioOptionRow entirely as it was interfering with the tabing selection. If the grey background on select for radio groups becomes a standard thing across the app we can add it in Palette. Open to other ideas though.

relativeci · 2026-03-06T01:30:31Z

#7061 Bundle Size — 8.65MiB (-0.02%).

cd6eeef(current) vs 3b3202e main#7052(baseline)

Warning

Bundle contains 31 duplicate packages – View duplicate packages

Bundle metrics

5 changes

1 regression

1 improvement

	Current #7061	Baseline #7052
Initial JS	`2.84MiB`(`+0.15%`)	`2.84MiB`
Initial CSS	`0B`	`0B`
Cache Invalidation	`36.86%`	`19.17%`
Chunks	`110`	`110`
Assets	`113`	`113`
Modules	`5516`(`-0.09%`)	`5521`
Duplicate Modules	`616`(`-0.32%`)	`618`
Duplicate Code	`4.92%`(`-0.2%`)	`4.93%`
Packages	`250`	`250`
Duplicate Packages	`30`	`30`

Bundle size by type

1 change

1 improvement

	Current #7061	Baseline #7052
JS	`8.51MiB` (`-0.02%`)	`8.51MiB`
Other	`152.75KiB`	`152.75KiB`

Bundle analysis report Branch rquartararo/order2-accessability Project dashboard

^{Generated by RelativeCI Documentation Report issue}

rquartararo added 5 commits March 3, 2026 14:08

fix: payment method tabbing

307df97

chore: add missing aria labels

31eeeac

chore: make edit button accessible with enter

7c6de9b

fix: radio button accessibility

0e173cf

test: fix tests

a10b29a

rquartararo requested review from erikdstock and starsirius March 5, 2026 14:48

rquartararo self-assigned this Mar 5, 2026

rquartararo commented Mar 5, 2026

View reviewed changes

src/Apps/Order2/Routes/Checkout/Components/DeliveryOptionsStep/Order2DeliveryOptionsForm.tsx Outdated Show resolved Hide resolved

rquartararo commented Mar 5, 2026

View reviewed changes

erikdstock reviewed Mar 5, 2026

View reviewed changes

rquartararo added 2 commits March 5, 2026 18:23

chore: add aria-expanded to payment methods

5f37494

refactor: remove radio option row

cd6eeef

chore: remove unneeded hover styles

d53073b

Conversation

rquartararo commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

erikdstock left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

relativeci bot commented Mar 6, 2026

#7061 Bundle Size — 8.65MiB (-0.02%).

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rquartararo commented Mar 5, 2026 •

edited

Loading