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

joeluong-sfcc · 2023-11-15T16:44:26Z

Description

This PR fixes improper nesting structure in the product tile where screen readers were unable to properly read the content of a product tile due to the nesting of the wishlist button.

Before (Wishlist in readout)

After (Wishlist no longer in readout)

This PR also:

adds an aria label to the variant swatch groups on the product view component
adds translations to en-GB locale to dismiss missing translation warnings in console
adds meta title/description to PLP page for SEO for search results

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

restructure PLP tile to pull out wishlist button out of link element
add an aria label to the variant swatch groups on the product view component
add translations to en-GB locale to dismiss missing translation warnings in console
add meta title/description to PLP page for SEO for search results

How to Test-Drive This PR

With a screen reader, navigate to the PLP page and focus onto a product tile

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

…ommerceCloud/pwa-kit into ju/accessibility-form-fields

…erceCloud/pwa-kit into fix/accessibility-nesting

joeluong-sfcc · 2023-11-16T17:56:58Z

packages/template-retail-react-app/app/pages/product-list/index.jsx

-                <title>{category?.pageTitle}</title>
-                <meta name="description" content={category?.pageDescription} />
+                <title>{category?.pageTitle ?? searchQuery}</title>
+                <meta name="description" content={category?.pageDescription ?? searchQuery} />


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

joeluong-sfcc · 2023-11-16T17:57:55Z

packages/template-retail-react-app/translations/en-GB.json

-  "header.button.assistive_msg.my_cart": {
-    "defaultMessage": "My cart"
+  "header.button.assistive_msg.my_cart_with_num_items": {
+    "defaultMessage": "My cart, number of items: {numItems}"


Added translations for en-GB to clear Missing Translation warnings in console when developing

alexvuong · 2023-11-17T00:27:31Z

The highlight for product item is not visible.

alexvuong · 2023-11-17T00:49:44Z

packages/template-retail-react-app/package.json

@@ -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",


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

joeluong-sfcc · 2023-11-17T15:27:51Z

The highlight for product item is not visible.

@alexvuong Do you mean allowing focus for the name/price? If so, I believe the current behavior should be fine. The product tile itself is highlighted when you focus over it, and the name/price get's read out with the screen reader. I think if we allow focus over the price/name we introduce redundancy in the readout

packages/template-retail-react-app/app/components/swatch-group/index.jsx

packages/template-retail-react-app/app/components/product-tile/index.jsx

alexvuong · 2023-11-17T20:32:26Z

The highlight for product item is not visible.

@alexvuong Do you mean allowing focus for the name/price? If so, I believe the current behavior should be fine. The product tile itself is highlighted when you focus over it, and the name/price get's read out with the screen reader. I think if we allow focus over the price/name we introduce redundancy in the readout

@joeluong-sfcc I think the blue highlight should be visible and wrap around the element that is currently read from the voice over. In the screenshot, there was only a small dot which does not look right. Look familiar to this issue: #1536

…erceCloud/pwa-kit into fix/accessibility-nesting

alexvuong

LGTM

joeluong-sfcc and others added 26 commits November 7, 2023 10:19

add aria label for icons

ecb7302

add number of cart items to aria label on cart icon

d17d2b3

add aria label for info tooltip

c74d1d8

add aria label for PLP color swatch filters

58b1f6f

add aria label for sort

a07e655

add aria-label for quantity picker

af01e46

Merge branch 'develop' into ju/accessibility-form-fields

26aaab2

fix unit tests and lint code

768850a

Merge branch 'ju/accessibility-form-fields' of github.com:SalesforceC…

d8b7889

…ommerceCloud/pwa-kit into ju/accessibility-form-fields

make secure lock icon accessible

8e50115

pull out assistive text for localization

6e5a0a1

lint code

e2b3af3

attempt to fix CI

b181674

update en-XA.json

aed3465

update build-translation script

f1160ac

update changelog

3b78f06

use localization in non component file

2e996e0

remove WI comments

6119074

implement localization for icons

05d2971

Merge branch 'develop' into ju/accessibility-form-fields

f6dc051

lint comment

1815cdd

pull out color refinement label for localization

66d8aee

add aria label for variant radio group

793adfb

restructure product tile elements for accessibility

9d8892d

update changelog

51a7d87

add parentheses back for color label

b74ae4c

Base automatically changed from ju/accessibility-form-fields to develop November 15, 2023 18:27

joeluong-sfcc and others added 3 commits November 15, 2023 13:28

Merge branch 'develop' into fix/accessibility-nesting

eae0a17

Merge branch 'develop' into fix/accessibility-nesting

a6c93ec

add translations to en-GB for my cart

6e4927e

joeluong-sfcc and others added 3 commits November 16, 2023 11:49

Merge branch 'fix/accessibility-nesting' of github.com:SalesforceComm…

fedf973

…erceCloud/pwa-kit into fix/accessibility-nesting

resolve lighthouse issues

282868d

Merge branch 'develop' into fix/accessibility-nesting

262f783

joeluong-sfcc marked this pull request as ready for review November 16, 2023 17:55

joeluong-sfcc requested a review from a team as a code owner November 16, 2023 17:55

joeluong-sfcc commented Nov 16, 2023

View reviewed changes

fix translation

d02535d

alexvuong reviewed Nov 17, 2023

View reviewed changes

Merge branch 'develop' into fix/accessibility-nesting

39f1e0d

wjhsf reviewed Nov 17, 2023

View reviewed changes

packages/template-retail-react-app/app/components/swatch-group/index.jsx Show resolved Hide resolved

packages/template-retail-react-app/app/components/product-tile/index.jsx Outdated Show resolved Hide resolved

joeluong-sfcc added 2 commits November 17, 2023 12:26

update logic for price translations in product tiles for sets

9e26096

add translation string for variant type label on product view

2a35c7b

wjhsf previously approved these changes Nov 17, 2023

View reviewed changes

fix focus on product tile

8134cdd

joeluong-sfcc dismissed wjhsf’s stale review via 8134cdd November 17, 2023 21:16

wjhsf previously approved these changes Nov 17, 2023

View reviewed changes

joeluong-sfcc and others added 4 commits November 17, 2023 16:42

Merge branch 'develop' into fix/accessibility-nesting

09137d6

Merge branch 'develop' into fix/accessibility-nesting

5a38285

remove change in package.json for translations script due to failing CI

1e56c17

Merge branch 'fix/accessibility-nesting' of github.com:SalesforceComm…

6d75766

…erceCloud/pwa-kit into fix/accessibility-nesting

joeluong-sfcc dismissed wjhsf’s stale review via 6d75766 November 17, 2023 22:04

wjhsf approved these changes Nov 17, 2023

View reviewed changes

alexvuong approved these changes Nov 17, 2023

View reviewed changes

joeluong-sfcc merged commit faa38dc into develop Nov 17, 2023
17 checks passed

joeluong-sfcc deleted the fix/accessibility-nesting branch November 17, 2023 22:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

joeluong-sfcc commented Nov 15, 2023 •

edited

Loading

joeluong-sfcc Nov 16, 2023

joeluong-sfcc Nov 16, 2023

alexvuong commented Nov 17, 2023

alexvuong Nov 17, 2023

joeluong-sfcc commented Nov 17, 2023

alexvuong commented Nov 17, 2023 •

edited

Loading

alexvuong left a comment

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

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

Conversation

joeluong-sfcc commented Nov 15, 2023 • edited Loading

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

joeluong-sfcc Nov 16, 2023

Choose a reason for hiding this comment

joeluong-sfcc Nov 16, 2023

Choose a reason for hiding this comment

alexvuong commented Nov 17, 2023

alexvuong Nov 17, 2023

Choose a reason for hiding this comment

joeluong-sfcc commented Nov 17, 2023

alexvuong commented Nov 17, 2023 • edited Loading

alexvuong left a comment

Choose a reason for hiding this comment

joeluong-sfcc commented Nov 15, 2023 •

edited

Loading

alexvuong commented Nov 17, 2023 •

edited

Loading