search

magento / pwa-studio

🛠Development tools to build, optimize and deploy Progressive Web Applications for Magento 2.
https://developer.adobe.com/commerce/pwa-studio/
Open Software License 3.0
1.07k stars 683 forks source link

[Issue] AC-2497::Credit card entry format is not descriptive. (Checkout - Pay… #3833

Closed m2-assistant[bot] closed 2 years ago

m2-assistant[bot] commented 2 years ago

This issue is automatically created based on existing pull request: magento/pwa-studio#3790: AC-2497::Credit card entry format is not descriptive. (Checkout - Pay…

Description

Credit card entry format is not descriptive. (Checkout - Payment)

Reproduction Steps select "Blouses & Shirts" > select "Susanna Draped Tank" > add product to cart > select bag > select "Edit Shopping Bag" > select "Proceed to Checkout" > complete shipping information and continue to "Shipping Method" > complete shipping method and continue to "Payment Information" (TEST - Payment information][NODE][body>div:nth-of-type(1)>:nth-child(1)>:nth-child(3)>:nth-child(1)>:nth-child(1)>:nth-child(5)>:nth-child(1)>:nth-child(1)>:nth-child(1)>*:nth-child(1)]

  1. With JAWS operating, press Tab to move focus to the Card Number input.

Actual Behavior The Card Number input has a placeholder value of 16 bullet characters. For users whose screen readers announce the placeholder attribute, this text is verbose and confusing.

Expected Behavior Ensure that label and description text is appropriately descriptive. If a format hint is necessary, provide it in text that is persistently visible and programmatically associated with the input. Text such as "16-digit number" would be more appropriate than bullet characters.

Related Issue

Closes https://jira.corp.magento.com/browse/AC-2497.

Verification Steps

Pre-Conditions:

  1. Have Magento instance with sample data installed
  2. Make sure to have pwa studio installed
  3. Make sure to have a customer login for front end login

Manual Steps executed:

Login to venia > Navigate to global header accessories or other Add product to cart > select bag > select "Edit Shopping Bag" > select "Proceed to Checkout" > complete shipping information and continue to "Shipping Method" > complete shipping method and continue to "Payment Information" (TEST - Payment information] Enable your screen reader and press Tab to move focus to the Card Number input.

✖️ Behaviour Before The Fix : The Card Number input has a placeholder value of 16 bullet characters. For users whose screen readers announce the placeholder attribute, this text is verbose and confusing. image ✔️Behaviour After The Fix: The Card Number input has a Text such as "16-digit number" image

Checklist

supernova-at commented 2 years ago

@magento export issue to JIRA project PWA as Story

github-jira-sync-bot commented 2 years ago

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2815 is successfully created for this GitHub issue.