@W-12627117@ - [Accessibility][Checkout Page][Toggle Cart Actions] Adding aria-label for action buttons #1906
Conversation
packages/template-retail-react-app/app/components/toggle-card/index.jsx
Outdated
Show resolved
Hide resolved
| @@ -152,6 +152,12 @@ const Payment = () => { | |||
| } | |||
| disabled={appliedPayment == null} | |||
| onEdit={() => goToStep(STEPS.PAYMENT)} | |||
| editLabel={ | |||
| <FormattedMessage | |||
There was a problem hiding this comment.
A React Component is passed, but it is used as a component, which is kinda odd. Why not use intl.formatMessage and have the ToggleCard consumes as is?
There was a problem hiding this comment.
Oh yeah. Makes sense. Replaced it with formatMessage({...}). Thanks!
| @@ -34,6 +34,15 @@ export const ToggleCard = ({ | |||
| children, | |||
| ...props | |||
| }) => { | |||
| let editButtonAriaLabel = 'Edit' | |||
There was a problem hiding this comment.
This string will need to have translation attached to it.
There was a problem hiding this comment.
Replaced it with formatMessage
| editLabel?.type?.displayName === 'MemoizedFormattedMessage' | ||
| ) { | ||
| editButtonAriaLabel = editLabel?.props.defaultMessage[0].value | ||
| } |
There was a problem hiding this comment.
It is not necessary to have this if logic here, any reason we can't consume editLabel prop directly into the component as
// ToggleCart.jsx
...
<Button
variant="link"
size="sm"
onClick={onEdit}
aria-label={editLabel}
/>
...
// Payment Component
<ToggleCart editLabel={intl.formattedMessage({id: 'Payment Edit', defaultMessage: "Payment Edit"})
There was a problem hiding this comment.
Replaced logic passing formatMessage() to editLabel
| variant="link" | ||
| size="sm" | ||
| onClick={onEdit} | ||
| aria-label={editButtonAriaLabel} |
There was a problem hiding this comment.
Can you add a test for this please?
| @@ -6,7 +6,7 @@ | |||
| */ | |||
| import React, {useState} from 'react' | |||
| import {nanoid} from 'nanoid' | |||
| import {defineMessage, useIntl} from 'react-intl' | |||
| import {FormattedMessage, defineMessage, useIntl} from 'react-intl' | |||
There was a problem hiding this comment.
FormattedMessage doesn't seemed to be used in this file
There was a problem hiding this comment.
Removed unused import
Description
[Issue] There are multiple buttons that have the same label of 'Edit' [User Impact] Screen reader users will have difficulty distinguishing between these buttons.
Types of Changes
Changes
How to Test-Drive This PR
npm startChecklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization