Fix a11y issues in Cart/Checkout

[senadir]

I choose to go with a single PR instead of spamming multiple small PRs that take more time and effort to get setup than to actually fix the code.

This PR fixes the color contrast for the add to cart notice button, the cart/checkout labels, returns focus for the cart shipping calculator, button, and returns focus on whatever element opened the mini cart drawer.

The last one was tricky because we have the logic to return, it just never triggers because we don't unmount our drawer, we just hide it. Switching to removing the element from the page was too much a lift, so I customized the useFocusReturn hook to our usage.

I reused that one for the shipping calculator as well, because Gutenberg one didn't work as well.

Closes #43619
Closes #43615
Closes #43561
Closes #43621

How to test the changes in this Pull Request:

Notice color

1. On a product page, add the product to cart.
2. The page will refresh, and a notice will show a button that says 'View cart'.
3. Make sure the button contract is above 4.5, using inspect tools. Note that because opacity is a separate prop, the color will show as contrasting regardless in some browsers, so you might need to change the color to also include the opacity.

Cart/Checkout labels

1. On Checkout, select the label of an input and ensure its contrast is above 4.5.
2. Switch Checkout to dark mode and ensure its contrast is still above 4.5.

Return focus on Shipping Calculator

0. If you don't have Shipping Calcualtor enabled, you need to enable the option "Enable the shipping calculator on the cart page" in /wp-admin/admin.php?page=wc-settings&tab=shipping&section=options.
1. In Cart, click "Change Address"
2. Fill out the form and place it.
3. Ensure the Change address button still has focus, this means either an outline around the button, or tabbing forward should take you to the next object in the sidebar, not the top of the page.

Return focus on Mini Cart

1. Open the mini cart via mini cart button.
2. Click X
3. Ensure the mini cart button is still focused, this means either an outline around the cart button, or tabbing forward should take you to the next object in the navbar/main body, not the top of the page.

Changelog entry

• Automatically create a changelog entry from the details below.

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

Update color contrast for Checkout fields.
Update color contrast for notice buttons.
Return focus when closing mini cart drawer.
Return focus when closing shipping calculator.

Comment

[github-actions]

Hi @nielslange,

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[nielslange]

Thanks for working on this, @senadir. I left a question regarding overwriting the Gutenberg custom hook.

Regarding the testing instructions (see note in this comment), I wonder if we should slightly improve them:

1. Notice Color:

   • Currently, it states that "a notice will show a button to go to cart.". However, we are using the CSS classes button wc-forward wp-element-button on a link element (<a href="...">), not a button (<button>). We could adjust the instructions to either "a notice will show a link to go to cart" or "a notice will show a button that says 'View cart'" to avoid ambiguity.

2. Return Focus on the Shipping Calculator:

   • The instructions mention clicking "Change address", but this requires enabling the option "Enable the shipping calculator on the cart page" in /wp-admin/admin.php?page=wc-settings&tab=shipping&section=options. The high-quality testing instructions guide suggests mentioning preconditions, actions, and validation steps. Including this setup step will help prevent confusion about making the "Change address" link visible.

3. Return Focus on the Shipping Calculator and Return focus on Mini Cart:

   • The instructions for return focus on the shipping calculator and the mini cart do not mention using a keyboard. However, the related issues Accessibility: Mini Cart does not return keyboard focus to the button that triggers it when closed. #43561 and Accessibility: Keyboard focus not appropriately managed on the cart page after updating address for shipping rates #43621 explicitly mention keyboard inputs. Should we include keyboard usage in the testing steps?

[senadir]

I updated the steps thank you @nielslange

[nielslange]

Thanks for updating the testing instructions and clarifying my concern around overwriting Gutenberg's custom hook. Let's ⛴️ this improvement, @senadir. 🙌