Global Styles: Fix radio control overlap when font-size is small

[tarunvijwani]

Fixes #9193

Radio buttons under the shipping options overlapped with the label if the font size was small.

With this PR, we are fixing the styles for input radio control.

Changes in the PR

• Added the margin and modified the transform property for radio-type input.

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. Install and activate a block theme, e.g. Twenty Twenty-Three.
2. Create a test page with the Checkout block.
3. Go to WP Admin » Apperance » Editor.
4. Open the Styles sidebar.
5. Adjust the font-size from the typography settings. Reduce the font size to 0.8.
6. Go to the Cart and Checkout block page.
7. Confirm Radio buttons are not overlapping with the labels.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Global Styles: Fix radio control overlap when font-size is small.

[github-actions]

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added	Removed
reviews-frontend.js	wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill		⚠️
active-filters-frontend.js	wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-products-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
cart-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
checkout-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
filter-wrapper-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning		⚠️
mini-cart-frontend.js	wp-polyfill		⚠️
rating-filter-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
mini-cart-component-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️

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

TypeScript Errors Report

• Files with errors: 472
• Total errors: 2269

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +19 B (0%)

Total Size: 1.08 MB

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

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.56 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.1 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.29 kB
build/attribute-filter.js	13.2 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.04 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	719 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.37 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	433 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.38 kB
build/cart-frontend.js	29.7 kB
build/cart.js	44.9 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.73 kB
build/checkout-blocks/billing-address-frontend.js	1.19 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.14 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	275 B
build/checkout-blocks/order-summary-frontend.js	1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js	17.1 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	274 B
build/checkout-blocks/order-summary-taxes-frontend.js	433 B
build/checkout-blocks/payment-frontend.js	8.27 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.34 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.33 kB
build/mini-cart-component-frontend.js	28.9 kB
build/mini-cart-contents-block/cart-button-frontend.js	1.97 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.97 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.3 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	592 B
build/mini-cart-contents-block/shopping-button-frontend.js	757 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	17.9 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.51 kB
build/product-add-to-cart.js	8.86 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	2.99 kB
build/product-image-frontend.js	2.63 kB
build/product-image.js	4.18 kB
build/product-new.js	8.35 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.6 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	730 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.28 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.4 kB
build/rating-filter-wrapper-frontend.js	6.21 kB
build/rating-filter.js	6.89 kB
build/reviews-by-category.js	12.1 kB
build/reviews-by-product.js	13.2 kB
build/reviews-frontend.js	7.1 kB
build/single-product.js	11.1 kB
build/stock-filter-wrapper-frontend.js	2.98 kB
build/stock-filter.js	7.61 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.95 kB
build/wc-blocks-editor-style.css	5.94 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 kB
build/wc-blocks.js	2.63 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}

[nielslange]

Thanks for working on this, @tarunvijwani. The change works as expected. Let's ⛴️ it.

Just one minor comment: When reviewing it, it wasn't clear to me that I manually had to set the font size to something tiny, e.g. 0,7 rem. I wonder if we should update the testing instructions accordingly and potentially add the following screenshot: