AC-2792::Common inputs lack autocomplete attributes (pattern)

[glo71317]

Description

Common inputs lack autocomplete attributes (pattern)

Locations (representative sample):

Checkout - Shipping Information
Checkout - Payment

1. Manually inspect markup for inputs in Guest Checkout form for autocomplete attributes.

Actual Behavior
The following common input fields lack a way to communicate purpose:

Guest Checkout - Shipping Information form:

Email
First Name
Country
Street Address
Street Address 2
City
State
Zip / Postal Code
Phone Number

Checkout - Payment form:

Cardholder Name
Card Number
Expiration Date
CVV
When an input field's purpose is not communicated (such as by use of the autocomplete attribute), users of assistive technology or users with cognitive disabilities can have trouble understanding a field's purpose. Users with limited mobility may have difficulty entering data that they commonly enter, such as address fields and phone numbers.

Expected Behavior
Ensure that common input fields communicate purpose – this is generally provided by the autocomplete values (HTML 5.3). Common fields are those included in this list: https://www.w3.org/TR/WCAG21/#input-purposes.

Related Issue

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

Acceptance

Verification Stakeholders

Specification

Verification Steps

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

Resolved issues:

1. resolves [Issue] AC-2792::Common inputs lack autocomplete attributes (pattern) #3838: AC-2792::Common inputs lack autocomplete attributes (pattern)

[pwa-studio-bot]

	Fails
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Associated JIRA tickets: AC-2792.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against e72407d

[supernova-at]

@magento create issue from PR

[jasonrpoteet]

run all tests

[pwa-test-bot]

Successfully started codebuild job for the following test suites:

lighthouse-desktop
lighthouse-mobile
pr-test
scaffold-pwa
cypress

[pwa-studio-bot]

	Fails
🚫	node failed.
🚫	Cypress tests in the following files did not pass 😔. All tests must pass before this PR can be merged user should be able search with different inputs: Invariant Violation: The following error originated from your application code, not from Cypress. Invariant Violation: 2 (see https://github.com/apollographql/invariant-packages) When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event. https://on.cypress.io/uncaught-exception-from-application user can fill and submit payment form and place order with default badge position: Invariant Violation: The following error originated from your application code, not from Cypress. Invariant Violation: 2 (see https://github.com/apollographql/invariant-packages) When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event. https://on.cypress.io/uncaught-exception-from-application should display Default Store View and USD currency by default: Invariant Violation: The following error originated from your application code, not from Cypress. Invariant Violation: 2 (see https://github.com/apollographql/invariant-packages) When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event. https://on.cypress.io/uncaught-exception-from-application should display French text and EUR currency accross app if French Store View is selected: Invariant Violation: The following error originated from your application code, not from Cypress. Invariant Violation: 2 (see https://github.com/apollographql/invariant-packages) When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event. https://on.cypress.io/uncaught-exception-from-application should show USD currency across app if it is selected inside French Store View: Invariant Violation: The following error originated from your application code, not from Cypress. Invariant Violation: 2 (see https://github.com/apollographql/invariant-packages) When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event. https://on.cypress.io/uncaught-exception-from-application user should be able to filter results in Category and Search pages: CypressError: The application redirected to https://pr-3785.pwa-venia.com/search.html?query=Tops&page=1&price%5Bfilter%5D=100-200%2C100_200&category_uid%5Bfilter%5D=Tops%2C8 more than 20 times. Please check if it's an intended behavior. If so, increase redirectionLimit value in configuration. should be able to edit a configurable product and place an order: Invariant Violation: The following error originated from your application code, not from Cypress. Invariant Violation: 2 (see https://github.com/apollographql/invariant-packages) When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event. https://on.cypress.io/uncaught-exception-from-application

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against e72407d

[jasonrpoteet]

Need to update unit tests to pass

[OneCricketeer]

The instance crashed which is why the tests time out.

[haal9000]

run pr-deploy

[pwa-test-bot]

Successfully started codebuild job for pr-deploy

[haal9000]

The instance health went to severe as it was not able to find the PR image in ECR. Did a pr-deploy to build and deploy the PR image

[dpatil-magento]

run pr-deploy

[pwa-test-bot]

Successfully started codebuild job for pr-deploy

[dpatil-magento]

run pr-deploy

[pwa-test-bot]

Successfully started codebuild job for pr-deploy

The base branch was changed.

[dpatil-magento]

run cypress

[pwa-test-bot]

Successfully started codebuild job for cypress

[dpatil-magento]

run cypress

[pwa-test-bot]

Successfully started codebuild job for cypress

[dpatil-magento]

Cypress Failures are on develop not related to this pr.

[aprimard]

Description

Common inputs lack autocomplete attributes (pattern)

Locations (representative sample):

Checkout - Shipping Information Checkout - Payment

1. Manually inspect markup for inputs in Guest Checkout form for autocomplete attributes.

Actual Behavior The following common input fields lack a way to communicate purpose:

Guest Checkout - Shipping Information form:

Email First Name Country Street Address Street Address 2 City State Zip / Postal Code Phone Number

Checkout - Payment form:

Cardholder Name Card Number Expiration Date CVV When an input field's purpose is not communicated (such as by use of the autocomplete attribute), users of assistive technology or users with cognitive disabilities can have trouble understanding a field's purpose. Users with limited mobility may have difficulty entering data that they commonly enter, such as address fields and phone numbers.

Expected Behavior Ensure that common input fields communicate purpose – this is generally provided by the autocomplete values (HTML 5.3). Common fields are those included in this list: https://www.w3.org/TR/WCAG21/#input-purposes.

Related Issue

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

Acceptance

Verification Stakeholders

Specification

Verification Steps

Checklist

* I have added tests to cover my changes, if necessary.

* I have added translations for new strings, if necessary.

* I have updated the documentation accordingly, if necessary.

Resolved issues:

1. [x]  resolves [[Issue] AC-2792::Common inputs lack autocomplete attributes (pattern) #3838](https://github.com/magento/pwa-studio/issues/3838): AC-2792::Common inputs lack autocomplete attributes (pattern)

Hello,
From what I see, the values of autocomplete attribute are not all valid. For example, the autocomplete="First Name" does not exist. The value should probably be "given-name" in this case. It's also a best practice to write these values in lower cases.

It could be worth checking them to see if they are all valid. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill