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

@W-12627117@ - [Accessibility][Checkout Page][Toggle Cart Actions] Adding aria-label for action buttons #1906

Merged
merged 10 commits into from
Jul 18, 2024
Merged

@W-12627117@ - [Accessibility][Checkout Page][Toggle Cart Actions] Adding aria-label for action buttons #1906

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9304957
Added descriptive labels for edit actions on checkout
shethj Jul 16, 2024
c9fdbbc
Merge branch 'develop' into fix-checkout-a11y-editbuttons
shethj Jul 16, 2024
c5152df
Run prettier
shethj Jul 16, 2024
594323f
Format file
shethj Jul 16, 2024
a6c05b7
Replace FormattedMessage component to format message string
shethj Jul 17, 2024
fee6907
Remove unused imports
shethj Jul 17, 2024
2d214b2
Add test for toggle card
shethj Jul 17, 2024
3b7e288
Merge branch 'develop' into fix-checkout-a11y-editbuttons
shethj Jul 17, 2024
86780f0
format file
shethj Jul 18, 2024
d1861ef
Fix linting errors
shethj Jul 18, 2024
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
7 changes: 6 additions & 1 deletion packages/template-retail-react-app/app/components/toggle-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,12 @@ export const ToggleCard = ({
{title}
</Heading>
{!editing && !disabled && onEdit && (
<Button variant="link" size="sm" onClick={onEdit}>
<Button
variant="link"
size="sm"
onClick={onEdit}
aria-label={editLabel}
>
{editLabel || (
<FormattedMessage
defaultMessage="Edit"
Expand Down
31 changes: 31 additions & 0 deletions packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react'
import {screen, fireEvent} from '@testing-library/react'
import {renderWithProviders} from '../../utils/test-utils'
import { ToggleCard } from './index'

test('ToggleCard renders edit button with correct aria-label and calls onEdit on click', () => {
const mockOnEdit = jest.fn()
const editLabel = 'Edit Card'

renderWithProviders(
<ToggleCard
title="Card Title"
editLabel={editLabel}
editing={false}
disabled={false}
onEdit={mockOnEdit}
/>
)

// Find the edit button
const editButton = screen.getByRole('button', {name: editLabel})

// Assert aria-label
expect(editButton).toHaveAttribute('aria-label', editLabel)

// Click the edit button
fireEvent.click(editButton)

// Assert onEdit function is called
expect(mockOnEdit).toHaveBeenCalledTimes(1)
})
12 changes: 9 additions & 3 deletions packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,15 @@ const ContactInfo = () => {
}
}}
editLabel={
customer.isRegistered ? (
<FormattedMessage defaultMessage="Sign Out" id="contact_info.action.sign_out" />
) : undefined
customer.isRegistered
? formatMessage({
defaultMessage: 'Sign Out',
id: 'contact_info.action.sign_out'
})
: formatMessage({
defaultMessage: 'Edit Contact Info',
id: 'toggle_card.action.editContactInfo'
})
}
>
<ToggleCardEdit>
Expand Down
4 changes: 4 additions & 0 deletions packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@ const Payment = () => {
}
disabled={appliedPayment == null}
onEdit={() => goToStep(STEPS.PAYMENT)}
editLabel={formatMessage({
defaultMessage: 'Edit Payment Info',
id: 'toggle_card.action.editPaymentInfo'
})}
>
<ToggleCardEdit>
<Box mt={-2} mb={4}>
Expand Down
4 changes: 4 additions & 0 deletions packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,10 @@ export default function ShippingAddress() {
isLoading={isLoading}
disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
editLabel={formatMessage({
defaultMessage: 'Edit Shipping Address',
id: 'toggle_card.action.editShippingAddress'
})}
>
<ToggleCardEdit>
<ShippingAddressSelection
Expand Down
4 changes: 4 additions & 0 deletions packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,10 @@ export default function ShippingOptions() {
isLoading={form.formState.isSubmitting}
disabled={selectedShippingMethod == null || !selectedShippingAddress}
onEdit={() => goToStep(STEPS.SHIPPING_OPTIONS)}
editLabel={formatMessage({
defaultMessage: 'Edit Shipping Options',
id: 'toggle_card.action.editShippingOptions'
})}
>
<ToggleCardEdit>
<form
Expand Down
24 changes: 24 additions & 0 deletions packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3017,6 +3017,30 @@
"value": "Edit"
}
],
"toggle_card.action.editContactInfo": [
{
"type": 0,
"value": "Edit Contact Info"
}
],
"toggle_card.action.editPaymentInfo": [
{
"type": 0,
"value": "Edit Payment Info"
}
],
"toggle_card.action.editShippingAddress": [
{
"type": 0,
"value": "Edit Shipping Address"
}
],
"toggle_card.action.editShippingOptions": [
{
"type": 0,
"value": "Edit Shipping Options"
}
],
"update_password_fields.button.forgot_password": [
{
"type": 0,
Expand Down
24 changes: 24 additions & 0 deletions packages/template-retail-react-app/app/static/translations/compiled/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3017,6 +3017,30 @@
"value": "Edit"
}
],
"toggle_card.action.editContactInfo": [
{
"type": 0,
"value": "Edit Contact Info"
}
],
"toggle_card.action.editPaymentInfo": [
{
"type": 0,
"value": "Edit Payment Info"
}
],
"toggle_card.action.editShippingAddress": [
{
"type": 0,
"value": "Edit Shipping Address"
}
],
"toggle_card.action.editShippingOptions": [
{
"type": 0,
"value": "Edit Shipping Options"
}
],
"update_password_fields.button.forgot_password": [
{
"type": 0,
Expand Down
56 changes: 56 additions & 0 deletions packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6417,6 +6417,62 @@
"value": "]"
}
],
"toggle_card.action.editContactInfo": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ḗḓīŧ Ƈǿǿƞŧȧȧƈŧ Īƞƒǿǿ"
},
{
"type": 0,
"value": "]"
}
],
"toggle_card.action.editPaymentInfo": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ḗḓīŧ Ƥȧȧẏḿḗḗƞŧ Īƞƒǿǿ"
},
{
"type": 0,
"value": "]"
}
],
"toggle_card.action.editShippingAddress": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ḗḓīŧ Şħīƥƥīƞɠ Ȧḓḓřḗḗşş"
},
{
"type": 0,
"value": "]"
}
],
"toggle_card.action.editShippingOptions": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ḗḓīŧ Şħīƥƥīƞɠ Ǿƥŧīǿǿƞş"
},
{
"type": 0,
"value": "]"
}
],
"update_password_fields.button.forgot_password": [
{
"type": 0,
Expand Down
12 changes: 12 additions & 0 deletions packages/template-retail-react-app/translations/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1289,6 +1289,18 @@
"toggle_card.action.edit": {
"defaultMessage": "Edit"
},
"toggle_card.action.editContactInfo": {
"defaultMessage": "Edit Contact Info"
},
"toggle_card.action.editPaymentInfo": {
"defaultMessage": "Edit Payment Info"
},
"toggle_card.action.editShippingAddress": {
"defaultMessage": "Edit Shipping Address"
},
"toggle_card.action.editShippingOptions": {
"defaultMessage": "Edit Shipping Options"
},
"update_password_fields.button.forgot_password": {
"defaultMessage": "Forgot Password?"
},
Expand Down
12 changes: 12 additions & 0 deletions packages/template-retail-react-app/translations/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1289,6 +1289,18 @@
"toggle_card.action.edit": {
"defaultMessage": "Edit"
},
"toggle_card.action.editContactInfo": {
"defaultMessage": "Edit Contact Info"
},
"toggle_card.action.editPaymentInfo": {
"defaultMessage": "Edit Payment Info"
},
"toggle_card.action.editShippingAddress": {
"defaultMessage": "Edit Shipping Address"
},
"toggle_card.action.editShippingOptions": {
"defaultMessage": "Edit Shipping Options"
},
"update_password_fields.button.forgot_password": {
"defaultMessage": "Forgot Password?"
},
Expand Down
Loading