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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: add accessibility labels for form fields and icons @W-14337430@ #1526

Merged
merged 23 commits into from
Nov 15, 2023

Conversation

joeluong-sfcc
Copy link
Collaborator

@joeluong-sfcc joeluong-sfcc commented Nov 7, 2023

Description

This PR adds accessibility labels for certain form fields and icons as part of an internal accessibility audit. This PR tackles multiple accessibility issues that are tracked using the table below.

Accessibility Bug Tracking Table

Work Item Description Files Editted
W-12627140 Cart icon in nav header doesn't provide number of items in aria label packages/template-retail-react-app/app/components/header/index.jsx
W-12627099 Quantity Input requires aria label packages/template-retail-react-app/app/components/quantity-picker/index.jsx
W-12627098 Info tooltip for 'Shipping (Promotion Applied)' requires aria label packages/template-retail-react-app/app/components/promo-popover/index.jsx
W-12627094 Color swatch filters on PLP do not have accessible name - text is separated from the color swatch element itself packages/template-retail-react-app/app/pages/product-list/partials/color-refinements.jsx
W-12627093 PLP sort by drop down select does not have valid label packages/template-retail-react-app/app/pages/product-list/index.jsx
W-12627109 Certain images (icons) don't have meaningful text associated with it - paypal/credit card/lock icons - duplicate of W-12627100 packages/template-retail-react-app/app/components/icons/index.jsx
W-12627172 Lock icon on 'Proceed to checkout' button on add to cart modal does not have meaningful text associated with it packages/template-retail-react-app/app/components/icons/index.jsx
W-12627100 Certain svgs (icons) don't have meaningful text associated with it - paypal/credit card/lock icons - duplicate of W-12627109 packages/template-retail-react-app/app/components/icons/index.jsx

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

  • (step1)

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)

@joeluong-sfcc joeluong-sfcc marked this pull request as ready for review November 9, 2023 21:03
@joeluong-sfcc joeluong-sfcc requested a review from a team as a code owner November 9, 2023 21:03
Copy link
Contributor

@wjhsf wjhsf left a comment

Choose a reason for hiding this comment

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

Just the one missed message, otherwise 👍

@joeluong-sfcc joeluong-sfcc changed the title Fix: add accessibility labels for form fields and icons Fix: add accessibility labels for form fields and icons @W-14337430@ Nov 13, 2023
shethj
shethj previously approved these changes Nov 14, 2023
@joeluong-sfcc joeluong-sfcc dismissed stale reviews from wjhsf and shethj via 35b47e7 November 15, 2023 17:15
@joeluong-sfcc joeluong-sfcc merged commit 264b37b into develop Nov 15, 2023
20 checks passed
@joeluong-sfcc joeluong-sfcc deleted the ju/accessibility-form-fields branch November 15, 2023 18:27
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