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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

@W-12627180@ Improve keyboard accessibility of product scroller #1559

Merged
merged 14 commits into from
Nov 22, 2023

Conversation

wjhsf
Copy link
Contributor

@wjhsf wjhsf commented Nov 21, 2023

Description

  1. (<) (>) scroll left/right buttons are no longer rendered with the skeleton, since the skeleton is not interactive
  2. Wishlist 馃挓 button now says "Add {product} to wishlist" / "Remove {product} from wishlist" instead of just "Wishlist"
  3. Tab focus indicator is now fully displayed.

Before:
product in scroller with poorly implemented focus indicator

(very subtle in top left / bottom left corners)

After:
product in scroller with focus indicator fully visible

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

  • (change1)

How to Test-Drive This PR

  • Deploy changes
  • Open home page
  • Tab through product scroller. Focus should be indicated by full square.
  • Turn on VoiceOver. Wishlist button should read out more than just "wishlist".

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...

Localization

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

@wjhsf wjhsf requested a review from a team as a code owner November 21, 2023 20:24
@wjhsf wjhsf enabled auto-merge (squash) November 21, 2023 20:24
wjhsf and others added 2 commits November 21, 2023 16:41
Co-authored-by: Alex Vuong <alex.vuong@salesforce.com>
Signed-off-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Signed-off-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
alexvuong
alexvuong previously approved these changes Nov 21, 2023
Comment on lines 138 to 154
aria-label={
isFavourite
? intl.formatMessage(
{
id: 'product_tile.assistive_msg.add_to_wishlist',
defaultMessage: 'Add {product} to wishlist'
},
{product: localizedProductName}
)
: intl.formatMessage(
{
id: 'product_tile.assistive_msg.remove_from wishlist',
defaultMessage: 'Remove {product} from wishlist'
},
{product: localizedProductName}
)
}
Copy link
Contributor

Choose a reason for hiding this comment

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

The order of the messages should be reversed: if it's favourite, then clicking the icon means removing the product from wishlist.

Signed-off-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
alexvuong
alexvuong previously approved these changes Nov 22, 2023
@wjhsf wjhsf merged commit 3343047 into develop Nov 22, 2023
20 checks passed
@wjhsf wjhsf deleted the wjh/W-12627180/keyboard-a11y-product-links branch November 30, 2023 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants