Fix Checkout block stepped sections numbers overlapping

[tarunvijwani]

Fixes #9281

Checkout block: In the page editor, stepped sections numbers were getting overlapped with the inner block selections.

With this PR, we're fixing the stepped sections numbers overlapping.

Changes in the PR

• Fix the styling for the Checkout step component.

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces and I've updated this doc.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

1. Go to the Checkout block in the page editor.
2. Click on an inner block.
3. Make sure stepped checkout is enabled
4. Confirm the block selection frame is not overlapping with the section number.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Fix Checkout block stepped sections numbers overlapping

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9497.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 472
• Total errors: 2268

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: -2 B (0%)

Total Size: 1.08 MB

Filename	Size	Change
build/wc-blocks-style-rtl.css	27.8 kB	-1 B (0%)
build/wc-blocks-style.css	27.8 kB	-1 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.57 kB
build/active-filters-wrapper-frontend.js	7.62 kB
build/active-filters.js	7.48 kB
build/all-products-frontend.js	11.9 kB
build/all-products.js	39.2 kB
build/all-reviews.js	7.77 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	4.05 kB
build/attribute-filter-wrapper-frontend.js	4.28 kB
build/attribute-filter.js	13.1 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.94 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.73 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.17 kB
build/cart-blocks/cart-express-payment-frontend.js	717 B
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.51 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-order-summary-frontend.js	1.28 kB
build/cart-blocks/cart-totals-frontend.js	308 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	656 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	333 B
build/cart-blocks/order-summary-shipping-frontend.js	17 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	435 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.38 kB
build/cart-frontend.js	29.7 kB
build/cart.js	45 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.7 kB
build/checkout-blocks/billing-address-frontend.js	1.18 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	330 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	276 B
build/checkout-blocks/order-summary-frontend.js	1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js	17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/payment-frontend.js	8.29 kB
build/checkout-blocks/pickup-options-frontend.js	4.8 kB
build/checkout-blocks/shipping-address-frontend.js	1.17 kB
build/checkout-blocks/shipping-method-frontend.js	2.59 kB
build/checkout-blocks/shipping-methods-frontend.js	6.36 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	312 B
build/checkout-frontend.js	31.3 kB
build/checkout.js	46.3 kB
build/customer-account.js	3.18 kB
build/featured-category.js	15 kB
build/featured-product.js	15.2 kB
build/filter-wrapper-frontend.js	14.2 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	8 kB
build/legacy-template.js	6.45 kB
build/mini-cart-component-frontend.js	28.4 kB
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.74 kB
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	266 B
build/mini-cart-contents-block/footer-frontend.js	4.1 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	591 B
build/mini-cart-contents-block/shopping-button-frontend.js	528 B
build/mini-cart-contents-block/title-frontend.js	1.91 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.61 kB
build/mini-cart-contents-block/title-label-frontend.js	1.54 kB
build/mini-cart-contents.js	18 kB
build/mini-cart-frontend.js	2.15 kB
build/mini-cart.js	4.2 kB
build/price-filter-wrapper-frontend.js	6.75 kB
build/price-filter.js	8.47 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	251 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.52 kB
build/product-add-to-cart.js	8.87 kB
build/product-best-sellers.js	8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	963 B
build/product-button-frontend.js	2.65 kB
build/product-button.js	4.01 kB
build/product-categories.js	2.37 kB
build/product-category.js	9.35 kB
build/product-collection.js	3.16 kB
build/product-image-frontend.js	2.63 kB
build/product-image.js	4.18 kB
build/product-new.js	8.34 kB
build/product-on-sale.js	8.68 kB
build/product-price-frontend.js	203 B
build/product-price.js	1.68 kB
build/product-query.js	11.7 kB
build/product-rating-frontend.js	2.31 kB
build/product-rating.js	999 B
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	1.8 kB
build/product-sale-badge.js	666 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1.84 kB
build/product-sku.js	535 B
build/product-stock-indicator-frontend.js	2.02 kB
build/product-stock-indicator.js	731 B
build/product-summary-frontend.js	2.19 kB
build/product-summary.js	904 B
build/product-tag.js	8.97 kB
build/product-template.js	3.26 kB
build/product-title-frontend.js	2.22 kB
build/product-title.js	3.69 kB
build/product-top-rated.js	8.58 kB
build/products-by-attribute.js	9.7 kB
build/rating-filter-frontend.js	21.3 kB
build/rating-filter-wrapper-frontend.js	6.21 kB
build/rating-filter.js	6.88 kB
build/reviews-by-category.js	12.1 kB
build/reviews-by-product.js	13.2 kB
build/reviews-frontend.js	7.11 kB
build/single-product.js	11.1 kB
build/stock-filter-wrapper-frontend.js	2.98 kB
build/stock-filter.js	7.6 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js	5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.5 kB
build/vendors--price-filter-wrapper-frontend.js	2.2 kB
build/vendors--product-add-to-cart-frontend.js	7.26 kB
build/vendors--rating-filter-wrapper-frontend.js	5.11 kB
build/wc-blocks-data.js	22.5 kB
build/wc-blocks-editor-style-rtl.css	5.96 kB
build/wc-blocks-editor-style.css	5.96 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	65.1 kB
build/wc-blocks.js	3.7 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/wc-shipping-method-pickup-location.js	30.3 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}