[Shipping Labels] M4 accessibility layout issues

[RafaelKayumov]

WOOMOB-617

Description

Addresses accessibility Shipping Labels layout issues listed in 1nxDAV51DK_l8opZ2ZznqaA3FpfiYPoWZPd38HA4TTys-gdoc

Known / Remaining issues

• For the "Add package" screen the scrollable area is barely reachable with the max accessibility font size and phone landscape mode (height is compact).
• "Create Shipping Label" button in Order details screen sometimes clipped by the 1st line. Happens rarely and during manual font scaling during debugging runtime.
• Rasterized grid icons aren't scalable, for example, the "pencil" icon in order details screen.

Steps to reproduce

• Fixes the layout constraints inside CustomerNoteTableViewCell.xib. Removes redundant constraints and removes height restriction to unlock multiline content for accessibility scales.
• Same for CustomerInfoTableViewCell.
• Maintains horizontal components distribution for "Hazmat" even for compact width environment to keep content readable.
• Maintains horizontal components distribution for "Customs" row even for compact width environment to keep content readable.
• Makes sure the address verification notice toast content always fits. Makes it multiline.
• Addresses the issue where native Picker is not scalable according to dynamic font sizes. Replaces the Picker conditionally with TopTabView when the dynamicSize becomes isAccessibility

Testing information

The testing requires Shipping plugin and the accessibility font size adjustment.

---

• Go to an order details screen.
• Find the "CUSTOMER" section and the "+ Add Customer Note".
• Toggle bigger font sizes up to maximum size.
• Make sure the "+ Add Customer Note" resizes and scales content normally. The label should wrap to next line when needed.

Before	After

---

• Go to an order with an unfulfilled shipment
• Open "Create Shipping Labels" flow and select that shipment
• Locate the "Are you shipping dangerous goods or hazardous materials?" row
• Increase the font size up to max.
• Make sure the row content scaled properly. Make sure the label wraps lines properly.
• Make sure the label and No > positioned horizontally.

Before	After

---

• Stay on same screen of the "Create Shipping Labels" flow.
• Enter the foreign destination address to have customs row visible
• Increase the font size up to max
• Make sure the customs row elements distributed horizontally.
• Make sure the row elements (including status badge) scaled and wraps lines properly.

Before	After

---

• Go to an order that contains a shipment with a missing/unverified destination address
• Open "Create Shipping Labels" flow and select that shipment
• Locate the bottom notice toast saying "Destination address missing"
• Increase the font size up to max
• Make sure the toast notice content is not truncated. Make sure it's scaled and wraps lines properly.

Before	After

---

• Go to an order with an unfulfilled shipment without a package selected
• Open "Create Shipping Labels" flow and select that shipment
• Tap on "Select a Package"
• Increase the font size up to max
• Make sure the native segmented picker turns into a tab view when font size increases reaching the accessibility mode
• Make sure the tab view is scaling normally according to the font dynamic size
• Make sure the tab view is functional and actually switches tabs
• Decrease the font size back
• Make sure the picker turns back into a native segmented control
• Make sure the picker maintains the state through transformation

Before:

After:

Simulator.Screen.Recording.-.iPhone.16.-.2025-06-19.at.13.30.37.mov

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS Prototype
	Build Number	30637
	Version	PR #15783
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	a9cece2
	Installation URL	14l5m3unqd87o

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

[itsmeichigo]

Tested and confirmed that most of the fixes look good on my iPhone 16 Pro device with large accessibility fonts. I found an issue with the customs row:

Here the labels are clipped off to multiple lines, which is not very readable. How about using SwiftUI's ViewThatFits with 2 layout options:
a. HStack with all items
b. HStack with the Edit button and a VStack containing the title and the badge.

Regarding the change to the notice of missing destination address, when a really large font size is used, the bottom sheet covers most of the screen making it hard to scroll through the content underneath. I'd suggest hiding the Purchase button when it's not enabled:

Even with the purchase button hidden, the view beneath can still be inacessible if there are more notices (i.e. unverified origin address or missing ITN field in the customs form). Should we have a logic to prioritize and show only one notice at a time?

I found some more layout issues that were not listed - I added them in the accessibility audit doc so they can be addressed in a separate PR.

[RafaelKayumov]

How about using SwiftUI's ViewThatFits with 2 layout options:
a. HStack with all items
b. HStack with the Edit button and a VStack containing the title and the badge.

Done in 2f43ef4

I'd suggest hiding the Purchase button when it's not enabled:

Done in 0953bdd

Should we have a logic to prioritize and show only one notice at a time?

Done in a9cece2

Also made sure the "Order details" title fits just in 1 line: a9cece2