[WIP][Accessibility] Focus coupon input if it has an error

[Manussakis]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR closes part of the #37602 issue.

In order to create small PRs, the issue above will be fixed along two PRs.

1. This PR is dedicated to making the coupon input accessible when there is an error after sending it on:
   • Classic Cart page.
   • Block-based Cart page.
   • Classic Checkout page.
   • Block-based Checkout page.
2. Another PR (to be created) dedicated to handling the "Billing Details" form errors and feedback on:
   • Classic Checkout page.

The issue associated with this PR reports more accessibility problems, but most of them have already been fixed by other PRs. Such as:

• Add aria-invalid="true" to invalid form fields and update to aria-invalid="false" or remove for valid fields.
• Add error messages nested inside the form field.
• On the checkout page, focus the first field with an error.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. I noticed that when the Storefront theme is installed, these CSS files aren't loaded on the classic Cart and Checkout pages:

• plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
• plugins/woocommerce/client/legacy/css/woocommerce.scss
  therefore, it's necessary to install a theme that doesn't have styles for the WooCommerce Cart and Checkout pages to test this PR. I have used the Blogus theme.

2. On both the Cart and Checkout pages, add a coupon code that doesn't exist.
3. Verify the error message is added below the input. "Coupon "..." does not exist!"
4. Verify the focus is moved to the coupon input.
5. Verify the error message disappears after moving the focus away from the input or as soon as you type any new value to the input.
6. Repeat this process on both the classic and the block-based pages.

Changelog entry

• Automatically create a changelog entry from the details below.

• This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

[github-actions]

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[Manussakis]

@dkotter This PR is ready for code review.

[dkotter]

@qasumitbagthariya @ankitguptaindia This is ready for QA

[mikejolley]

This tested well and the code looks good. #37602 however reports the issue with the classic cart experience. This PR only fixes the issue in the block based checkout experience.

If we are fixing classic in a different PR, we should leave #37602 open. Unless it is tackled in this PR instead.

[Manussakis]

This tested well and the code looks good. #37602 however reports the issue with the classic cart experience. This PR only fixes the issue in the block based checkout experience.

If we are fixing classic in a different PR, we should leave #37602 open. Unless it is tackled in this PR instead.

Good catch @mikejolley !
I will move the issue to the "In Progress" column and tackle the classic cart experience.
Thanks!

[Manussakis]

@dkotter This task is ready for code review.
Note that this is the first out of two PRs needed to close the #37602 issue. Please, check the PR description for more context

[dkotter]

@qasumitbagthariya @ankitguptaindia This is ready for QA

[Manussakis]

@dkotter FYI – I have made a small change to improve the HTML semantics of the error message.
Improve coupon error message semantics