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-14337462@ - Fix: Improper nesting of elements #1541

Merged
merged 41 commits into from
Nov 17, 2023
Merged

@W-14337462@ - Fix: Improper nesting of elements #1541

Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
ecb7302
add aria label for icons
joeluong-sfcc Nov 7, 2023
d17d2b3
add number of cart items to aria label on cart icon
joeluong-sfcc Nov 7, 2023
c74d1d8
add aria label for info tooltip
joeluong-sfcc Nov 7, 2023
58b1f6f
add aria label for PLP color swatch filters
joeluong-sfcc Nov 7, 2023
a07e655
add aria label for sort
joeluong-sfcc Nov 7, 2023
af01e46
add aria-label for quantity picker
joeluong-sfcc Nov 7, 2023
26aaab2
Merge branch 'develop' into ju/accessibility-form-fields
joeluong-sfcc Nov 7, 2023
768850a
fix unit tests and lint code
joeluong-sfcc Nov 8, 2023
d8b7889
Merge branch 'ju/accessibility-form-fields' of github.com:SalesforceC…
joeluong-sfcc Nov 8, 2023
8e50115
make secure lock icon accessible
joeluong-sfcc Nov 8, 2023
6e5a0a1
pull out assistive text for localization
joeluong-sfcc Nov 9, 2023
e2b3af3
lint code
joeluong-sfcc Nov 9, 2023
b181674
attempt to fix CI
joeluong-sfcc Nov 9, 2023
aed3465
update en-XA.json
joeluong-sfcc Nov 9, 2023
f1160ac
update build-translation script
joeluong-sfcc Nov 9, 2023
3b78f06
update changelog
joeluong-sfcc Nov 10, 2023
2e996e0
use localization in non component file
joeluong-sfcc Nov 10, 2023
6119074
remove WI comments
joeluong-sfcc Nov 10, 2023
05d2971
implement localization for icons
joeluong-sfcc Nov 13, 2023
f6dc051
Merge branch 'develop' into ju/accessibility-form-fields
joeluong-sfcc Nov 13, 2023
1815cdd
lint comment
joeluong-sfcc Nov 13, 2023
66d8aee
pull out color refinement label for localization
joeluong-sfcc Nov 14, 2023
793adfb
add aria label for variant radio group
joeluong-sfcc Nov 15, 2023
9d8892d
restructure product tile elements for accessibility
joeluong-sfcc Nov 15, 2023
51a7d87
update changelog
joeluong-sfcc Nov 15, 2023
b74ae4c
add parentheses back for color label
joeluong-sfcc Nov 15, 2023
eae0a17
Merge branch 'develop' into fix/accessibility-nesting
joeluong-sfcc Nov 15, 2023
a6c93ec
Merge branch 'develop' into fix/accessibility-nesting
joeluong-sfcc Nov 16, 2023
6e4927e
add translations to en-GB for my cart
joeluong-sfcc Nov 16, 2023
fedf973
Merge branch 'fix/accessibility-nesting' of github.com:SalesforceComm…
joeluong-sfcc Nov 16, 2023
282868d
resolve lighthouse issues
joeluong-sfcc Nov 16, 2023
262f783
Merge branch 'develop' into fix/accessibility-nesting
joeluong-sfcc Nov 16, 2023
d02535d
fix translation
alexvuong Nov 17, 2023
39f1e0d
Merge branch 'develop' into fix/accessibility-nesting
joeluong-sfcc Nov 17, 2023
9e26096
update logic for price translations in product tiles for sets
joeluong-sfcc Nov 17, 2023
2a35c7b
add translation string for variant type label on product view
joeluong-sfcc Nov 17, 2023
8134cdd
fix focus on product tile
joeluong-sfcc Nov 17, 2023
09137d6
Merge branch 'develop' into fix/accessibility-nesting
joeluong-sfcc Nov 17, 2023
5a38285
Merge branch 'develop' into fix/accessibility-nesting
joeluong-sfcc Nov 17, 2023
1e56c17
remove change in package.json for translations script due to failing CI
joeluong-sfcc Nov 17, 2023
6d75766
Merge branch 'fix/accessibility-nesting' of github.com:SalesforceComm…
joeluong-sfcc Nov 17, 2023
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
1 change: 1 addition & 0 deletions packages/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## v2.2.0-dev (Nov 3, 2023)
- (A11y) Ensure active user interface components have sufficient contrast [#1534](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1534)
- (A11y) Ensure form fields and icons have accessible labels [#1526](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1526)
- (A11y) Fix improper nesting of elements in product tile [#1541](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1541)

## v2.1.0 (Nov 3, 2023)

Expand Down
133 changes: 71 additions & 62 deletions packages/template-retail-react-app/app/components/product-tile/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,69 +79,78 @@ const ProductTile = (props) => {
const styles = useMultiStyleConfig('ProductTile')

return (
<Link
data-testid="product-tile"
{...styles.container}
to={productUrlBuilder({id: productId}, intl.local)}
{...rest}
>
<Box {...styles.imageWrapper}>
{image && (
<AspectRatio {...styles.image}>
<DynamicImage
src={`${image.disBaseLink || image.link}[?sw={width}&q=60]`}
widths={dynamicImageProps?.widths}
imageProps={{
alt: image.alt,
...dynamicImageProps?.imageProps
}}
/>
</AspectRatio>
)}

{enableFavourite && (
<Box
onClick={(e) => {
// stop click event from bubbling
// to avoid user from clicking the underlying
// product while the favourite icon is disabled
e.preventDefault()
<Box {...styles.container}>
<Link
data-testid="product-tile"
to={productUrlBuilder({id: productId}, intl.local)}
{...styles.link}
{...rest}
>
<Box {...styles.imageWrapper}>
{image && (
<AspectRatio {...styles.image}>
<DynamicImage
src={`${image.disBaseLink || image.link}[?sw={width}&q=60]`}
widths={dynamicImageProps?.widths}
imageProps={{
alt: image.alt,
...dynamicImageProps?.imageProps
}}
/>
</AspectRatio>
)}
</Box>

{/* Title */}
<Text {...styles.title}>{localizedProductName}</Text>

{/* Price */}
<Text {...styles.price} data-testid="product-tile-price">
{hitType === 'set'
? intl.formatMessage(
{
id: 'product_tile.label.starting_at_price',
defaultMessage: 'Starting at {price}'
},
{
price: intl.formatNumber(price, {
style: 'currency',
currency: currency || activeCurrency
})
}
)
: intl.formatNumber(price, {
style: 'currency',
currency: currency || activeCurrency
})}
</Text>
</Link>
{enableFavourite && (
<Box
onClick={(e) => {
// stop click event from bubbling
// to avoid user from clicking the underlying
// product while the favourite icon is disabled
e.preventDefault()
}}
>
<IconButtonWithRegistration
aria-label={intl.formatMessage({
id: 'product_tile.assistive_msg.wishlist',
defaultMessage: 'Wishlist'
})}
icon={isFavourite ? <HeartSolidIcon /> : <HeartIcon />}
{...styles.favIcon}
disabled={isFavouriteLoading}
onClick={async () => {
setFavouriteLoading(true)
await onFavouriteToggle(!isFavourite)
setFavouriteLoading(false)
}}
>
<IconButtonWithRegistration
aria-label={intl.formatMessage({
id: 'product_tile.assistive_msg.wishlist',
defaultMessage: 'Wishlist'
})}
icon={isFavourite ? <HeartSolidIcon /> : <HeartIcon />}
{...styles.favIcon}
disabled={isFavouriteLoading}
onClick={async () => {
setFavouriteLoading(true)
await onFavouriteToggle(!isFavourite)
setFavouriteLoading(false)
}}
/>
</Box>
)}
</Box>

{/* Title */}
<Text {...styles.title}>{localizedProductName}</Text>

{/* Price */}
<Text {...styles.price} data-testid="product-tile-price">
{hitType === 'set' &&
intl.formatMessage({
id: 'product_tile.label.starting_at_price',
defaultMessage: 'Starting at'
})}{' '}
{intl.formatNumber(price, {
style: 'currency',
currency: currency || activeCurrency
})}
</Text>
</Link>
/>
</Box>
)}
</Box>
)
}

Expand Down
8 changes: 7 additions & 1 deletion packages/template-retail-react-app/app/components/product-view/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,13 @@ const ProductView = forwardRef(
variant={id === 'color' ? 'circle' : 'square'}
value={selectedValue?.value}
displayName={selectedValue?.name || ''}
label={name}
label={intl.formatMessage(
{
defaultMessage: '{variantType}',
id: 'product_view.label.variant_type'
},
{variantType: name}
)}
>
{values.map(
({href, name, image, value, orderable}) => (
Expand Down
2 changes: 1 addition & 1 deletion packages/template-retail-react-app/app/components/swatch-group/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const SwatchGroup = (props) => {
} = props
const styles = useStyleConfig('SwatchGroup')
return (
<Flex {...styles.swatchGroup} role="radiogroup">
<Flex {...styles.swatchGroup} role="radiogroup" aria-label={label}>
<HStack {...styles.swatchLabel}>
<Box fontWeight="semibold">{`${label}:`}</Box>
joeluong-sfcc marked this conversation as resolved.
Show resolved Hide resolved
<Box>{displayName}</Box>
Expand Down
4 changes: 2 additions & 2 deletions packages/template-retail-react-app/app/pages/product-list/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,8 +371,8 @@ const ProductList = (props) => {
{...rest}
>
<Helmet>
<title>{category?.pageTitle}</title>
<meta name="description" content={category?.pageDescription} />
<title>{category?.pageTitle ?? searchQuery}</title>
<meta name="description" content={category?.pageDescription ?? searchQuery} />
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

SEO lighthouse check was failing since PLP pages with search queries (non category) had no title/description in header

<meta name="keywords" content={category?.pageKeywords} />
</Helmet>
{showNoResults ? (
Expand Down
50 changes: 47 additions & 3 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 @@ -809,6 +809,24 @@
"value": "Payment"
}
],
"colorRefinements.label.hitCount": [
{
"type": 1,
"value": "colorLabel"
},
{
"type": 0,
"value": " ("
},
{
"type": 1,
"value": "colorHitCount"
},
{
"type": 0,
"value": ")"
}
],
"confirmation_modal.default.action.no": [
{
"type": 0,
Expand Down Expand Up @@ -1341,10 +1359,14 @@
"value": "My account"
}
],
"header.button.assistive_msg.my_cart": [
"header.button.assistive_msg.my_cart_with_num_items": [
{
"type": 0,
"value": "My cart"
"value": "My cart, number of items: "
},
{
"type": 1,
"value": "numItems"
}
],
"header.button.assistive_msg.wishlist": [
Expand Down Expand Up @@ -1535,6 +1557,12 @@
"value": "The React PWA Starter Store for Retail"
}
],
"icons.assistive_msg.lock": [
{
"type": 0,
"value": "Secure"
}
],
"item_attributes.label.promotions": [
{
"type": 0,
Expand Down Expand Up @@ -2272,7 +2300,11 @@
"product_tile.label.starting_at_price": [
{
"type": 0,
"value": "Starting at"
"value": "Starting at "
},
{
"type": 1,
"value": "price"
}
],
"product_view.button.add_set_to_cart": [
Expand Down Expand Up @@ -2317,6 +2349,12 @@
"value": "Starting at"
}
],
"product_view.label.variant_type": [
{
"type": 1,
"value": "variantType"
}
],
"product_view.link.full_details": [
{
"type": 0,
Expand Down Expand Up @@ -2365,6 +2403,12 @@
"value": "Apply"
}
],
"promo_popover.assistive_msg.info": [
{
"type": 0,
"value": "Info"
}
],
"promo_popover.heading.promo_applied": [
{
"type": 0,
Expand Down
12 changes: 11 additions & 1 deletion 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 @@ -2300,7 +2300,11 @@
"product_tile.label.starting_at_price": [
{
"type": 0,
"value": "Starting at"
"value": "Starting at "
},
{
"type": 1,
"value": "price"
}
],
"product_view.button.add_set_to_cart": [
Expand Down Expand Up @@ -2345,6 +2349,12 @@
"value": "Starting at"
}
],
"product_view.label.variant_type": [
{
"type": 1,
"value": "variantType"
}
],
"product_view.link.full_details": [
{
"type": 0,
Expand Down
20 changes: 19 additions & 1 deletion 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 @@ -4928,7 +4928,11 @@
},
{
"type": 0,
"value": "Şŧȧȧřŧīƞɠ ȧȧŧ"
"value": "Şŧȧȧřŧīƞɠ ȧȧŧ "
},
{
"type": 1,
"value": "price"
},
{
"type": 0,
Expand Down Expand Up @@ -5033,6 +5037,20 @@
"value": "]"
}
],
"product_view.label.variant_type": [
{
"type": 0,
"value": "["
},
{
"type": 1,
"value": "variantType"
},
{
"type": 0,
"value": "]"
}
],
"product_view.link.full_details": [
{
"type": 0,
Expand Down
7 changes: 6 additions & 1 deletion packages/template-retail-react-app/app/theme/components/project/product-tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
*/
export default {
baseStyle: () => ({
container: {},
container: {
position: 'relative'
},
favIcon: {
position: 'absolute',
variant: 'unstyled',
Expand All @@ -21,6 +23,9 @@ export default {
ratio: 1,
paddingBottom: 2
},
link: {
display: 'block'
},
price: {},
title: {
fontWeight: 600
Expand Down
2 changes: 1 addition & 1 deletion packages/template-retail-react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"build-translations": "npm run extract-default-translations && npm run compile-translations && npm run compile-translations:pseudo",
"compile-translations": "node ./scripts/translations/compile-folder.js translations",
"compile-translations:pseudo": "node ./scripts/translations/compile-pseudo.js translations/en-US.json",
"extract-default-translations": "node ./scripts/translations/extract-default-messages.js en-US",
"extract-default-translations": "node ./scripts/translations/extract-default-messages.js en-US && node ./scripts/translations/extract-default-messages.js en-GB",
Copy link
Collaborator

Choose a reason for hiding this comment

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

Since we use both en-US and en-GB for English, adding one more extraction command for en-GB can avoid the issue of missing translation for en-GB

"format": "pwa-kit-dev format \"**/*.{js,jsx}\"",
"lint": "pwa-kit-dev lint \"**/*.{js,jsx}\"",
"lint:fix": "npm run lint -- --fix",
Expand Down
Loading
Loading