Accessibility: Focus order incorrect on checkout page when zoomed in

[amberhinds]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

When zooming on the checkout page as a low-vision user would do, the order summary stacks above the checkout fields.

This is a logical reading order for zoomed and mobile users, however the order of the content does not match this reading order. The order summary block occurs after the checkout form in the DOM, so keyboard only users must tab through and past the entire form to be able to:

1. Expand the order summary and view the products in their cart.
2. Add a coupon.

Then, they would have to Shift+Tab backwards up through the page in order to check out.

This is a WCAG focus order failure.

Expected behavior

1. The focus order should match the visual order.
2. Users should be able to review the order summary and add a coupon without having to Tab through the entire checkout form.

Actual behavior

DOM order does not match focus order.

Steps to reproduce

Go to the checkout page and either zoom your browser in or make it more narrow to get the mobile version. Hit the Tab key to move through the page and notice it does not match the visual order.

WordPress Environment

N/A

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[amberhinds]

How I handled it on my site was:

1. Switch the order of the columns in the checkout block.
2. Add flex-direction: row-reverse; on .wc-block-components-sidebar-layout to restore the designed layout with the cart fields on the left.