[Shipping Labels] M4 accessibility layout issues

WooCommerce/Classes/ViewRelated/Orders/Order Details/Customer Section/CustomerInfoTableViewCell.xib

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="22154" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="23727" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22130"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23721"/>
         <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -70,7 +70,7 @@
                                 <rect key="frame" x="0.0" y="92" width="288" height="0.0"/>
                                 <color key="backgroundColor" name="Red50"/>
                                 <constraints>
-                                    <constraint firstAttribute="height" priority="999" constant="34" id="1vO-Pa-Rrp"/>
+                                    <constraint firstAttribute="height" relation="greaterThanOrEqual" priority="999" constant="34" id="1vO-Pa-Rrp"/>
                                 </constraints>
                                 <state key="normal" title="Add Customer Note"/>
                             </button>

WooCommerce/Classes/ViewRelated/Orders/Order Details/Customer Section/CustomerNoteTableViewCell.xib

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="22154" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="23727" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22130"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23721"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -49,17 +49,11 @@
                             <button hidden="YES" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="8sO-TX-YXZ">
                                 <rect key="frame" x="0.0" y="68" width="288" height="0.0"/>
                                 <constraints>
-                                    <constraint firstAttribute="height" priority="999" constant="38" id="JD7-UH-chp"/>
+                                    <constraint firstAttribute="height" relation="greaterThanOrEqual" priority="999" constant="38" id="JD7-UH-chp"/>
                                 </constraints>
                                 <state key="normal" title="Add Customer Note"/>
                             </button>
                         </subviews>
-                        <constraints>
-                            <constraint firstItem="KMy-GB-2vj" firstAttribute="leading" secondItem="3Ns-D0-Lmm" secondAttribute="leading" id="1sf-8Q-Erz"/>
-                            <constraint firstItem="8sO-TX-YXZ" firstAttribute="leading" secondItem="3Ns-D0-Lmm" secondAttribute="leading" id="CXr-SC-scr"/>
-                            <constraint firstAttribute="trailing" secondItem="8sO-TX-YXZ" secondAttribute="trailing" id="db6-Qe-0lI"/>
-                            <constraint firstAttribute="trailing" secondItem="KMy-GB-2vj" secondAttribute="trailing" id="uSW-Ze-AEM"/>
-                        </constraints>
                     </stackView>
                 </subviews>
                 <constraints>

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Customs/WooShippingCustomsRow.swift

@@ -10,30 +10,29 @@ struct WooShippingCustomsRow: View {
     @State private var showCustomsForm: Bool = false
 
     var body: some View {
-        AdaptiveStack {
-            Text(Localization.customsTitle)
-                .headlineStyle()
-                .foregroundColor(.primary)
-
-            Spacer()
-
-            Text(informationIsCompleted ? Localization.completedStatus : Localization.missingInfoStatus)
-                .foregroundColor(.black)
-                .captionStyle()
-                .padding(.horizontal, Layout.statusBadgeHorizontalPadding)
-                .padding(.vertical, Layout.statusBadgeVerticalPadding)
-                .frame(height: Layout.statusBadgeHeight * scale)
-                .background(
-                    RoundedRectangle(cornerRadius: Layout.statusBadgeCornerRadius)
-                        .fill(informationIsCompleted ?
-                              Color.withColorStudio(name: .green, shade: .shade5) :
-                                Color.withColorStudio(name: .red, shade: .shade10))
-                )
+        ViewThatFits(in: .horizontal) {
+            /// Layout option #1
+            /// View fits in a given width
+            HStack {
+                customsRowTitleView
+                Spacer()
+                customsRowStatusBadgeView
+                customsRowEditButtonView
+            }
 
-            PencilEditButton {
-                showCustomsForm.toggle()
+            /// Layout option #2 that fits in given width
+            /// View doesn't fit in a given width
+            HStack {
+                VStack(
+                    alignment: .center,
+                    spacing: Layout.customsRowVerticalLayoutSpacing
+                ) {
+                    customsRowTitleView
+                    customsRowStatusBadgeView
+                }
+                Spacer()
+                customsRowEditButtonView
             }
-            .accessibilityLabel(Text(Localization.editButtonAccessibilityLabel))
         }
         .padding(Layout.borderPadding)
         .roundedBorder(cornerRadius: Layout.borderCornerRadius, lineColor: Color(.separator), lineWidth: Layout.borderWidth)
@@ -43,6 +42,36 @@ struct WooShippingCustomsRow: View {
     }
 }
 
+private extension WooShippingCustomsRow {
+    var customsRowTitleView: some View {
+        Text(Localization.customsTitle)
+            .headlineStyle()
+            .foregroundColor(.primary)
+    }
+
+    var customsRowStatusBadgeView: some View {
+        Text(informationIsCompleted ? Localization.completedStatus : Localization.missingInfoStatus)
+            .foregroundColor(.black)
+            .captionStyle()
+            .padding(.horizontal, Layout.statusBadgeHorizontalPadding)
+            .padding(.vertical, Layout.statusBadgeVerticalPadding)
+            .frame(minHeight: Layout.statusBadgeHeight * scale)
+            .background(
+                RoundedRectangle(cornerRadius: Layout.statusBadgeCornerRadius)
+                    .fill(informationIsCompleted ?
+                          Color.withColorStudio(name: .green, shade: .shade5) :
+                            Color.withColorStudio(name: .red, shade: .shade10))
+            )
+    }
+
+    var customsRowEditButtonView: some View {
+        PencilEditButton {
+            showCustomsForm.toggle()
+        }
+        .accessibilityLabel(Text(Localization.editButtonAccessibilityLabel))
+    }
+}
+
 private extension WooShippingCustomsRow {
     enum Layout {
         static let borderCornerRadius: CGFloat = 8
@@ -52,6 +81,7 @@ private extension WooShippingCustomsRow {
         static let statusBadgeCornerRadius: CGFloat = 6
         static let statusBadgeHorizontalPadding: CGFloat = 12
         static let statusBadgeVerticalPadding: CGFloat = 4
+        static let customsRowVerticalLayoutSpacing: CGFloat = 6
         static let statusBadgeHeight: CGFloat = 24
         static let borderPadding: CGFloat = 16
     }

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatRow.swift

@@ -19,7 +19,7 @@ struct WooShippingHazmatRow: View {
             Button(action: {
                 isShowingDetailView = true
             }) {
-                AdaptiveStack {
+                HStack {
                     Text(Localization.hazmatLabel)
                         .bodyStyle()
                     Spacer()

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Package and Rate Selection/WooShippingAddPackageView.swift

@@ -26,6 +26,7 @@ struct WooShippingAddPackageView: View {
 
     @Environment(\.shippingWeightUnit) private var weightUnit
     @Environment(\.shippingDimensionsUnit) private var dimensionsUnit
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     init(selectedPackage: WooShippingPackageDataRepresentable? = nil,
          addPackageAction: @escaping (WooShippingPackageDataRepresentable) -> Void) {
@@ -44,13 +45,7 @@ struct WooShippingAddPackageView: View {
     var body: some View {
         NavigationView {
             VStack {
-                Picker("", selection: $packagesViewModel.selectedPackageType) {
-                    ForEach(PackageProviderType.allCases, id: \.self) {
-                        Text($0.name)
-                    }
-                }
-                .pickerStyle(.segmented)
-                .padding()
+                packageTypeSelectorView
                 selectedPackageTypeView
             }
             .toolbar {
@@ -72,6 +67,27 @@ struct WooShippingAddPackageView: View {
         .notice($packagesViewModel.notice)
     }
 
+    // MARK: - Computed Properties
+
+    private var selectedPackageTypeIndex: Binding<Int> {
+        Binding(
+            get: {
+                PackageProviderType.allCases.firstIndex(of: packagesViewModel.selectedPackageType) ?? 0
+            },
+            set: { newIndex in
+                if let newType = PackageProviderType.allCases[safe: newIndex] {
+                    packagesViewModel.selectedPackageType = newType
+                }
+            }
+        )
+    }
+
+    private var packageTypeTabs: [TopTabItem<EmptyView>] {
+        PackageProviderType.allCases.map { packageType in
+            TopTabItem(name: packageType.name, content: { EmptyView() })
+        }
+    }
+
     // MARK: UI components
 
     @ViewBuilder
@@ -94,6 +110,35 @@ struct WooShippingAddPackageView: View {
             })
         }
     }
+
+    private var packageTypeSelectorView: some View {
+        Group {
+            if dynamicTypeSize.isAccessibilitySize {
+                TopTabView(
+                    tabs: packageTypeTabs,
+                    showContent: false,
+                    selectedTabIndex: selectedPackageTypeIndex,
+                    tabsContainerHorizontalPadding: nil,
+                    selectedStateColor: .accentColor,
+                    unselectedStateColor: .secondary,
+                    selectedTabIndicatorHeight: 3.0,
+                    tabPadding: 0,
+                    tabsNameFont: .subheadline.bold(),
+                    tabItemContentHorizontalPadding: 16.0,
+                    tabItemContentVerticalPadding: 9.0
+                )
+                .padding(.vertical)
+            } else {
+                Picker("", selection: $packagesViewModel.selectedPackageType) {
+                    ForEach(PackageProviderType.allCases, id: \.self) {
+                        Text($0.name)
+                    }
+                }
+                .pickerStyle(.segmented)
+                .padding()
+            }
+        }
+    }
 }
 
 struct WooShippingAddPackageUnitInputView: View {

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsView.swift

@@ -23,6 +23,7 @@ struct WooShippingCreateLabelsView: View {
     @Environment(\.dismiss) private var dismiss
     @Environment(\.verticalSizeClass) private var verticalSizeClass
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+    @Environment(\.sizeCategory) private var sizeCategory
 
     private var isiPhonePortrait: Bool {
         verticalSizeClass == .regular && horizontalSizeClass == .compact
@@ -272,10 +273,13 @@ private extension WooShippingCreateLabelsView {
             Text(Localization.BottomSheet.shipmentDetails)
                 .foregroundStyle(Color(.primary))
                 .bold()
+                .lineLimit(1)
+                .scaledToFill()
+                .minimumScaleFactor(0.5)
 
             if viewModel.shouldShowNotices {
-                // Unverified notice for origin address
                 if let originAddressUnverifiedNoticeLabel = viewModel.originAddressUnverifiedNoticeLabel {
+                    // Unverified notice for origin address
                     verificationNotice(with: originAddressUnverifiedNoticeLabel,
                                        isVerified: false,
                                        onDismiss: {
@@ -286,10 +290,8 @@ private extension WooShippingCreateLabelsView {
                                        onTap: {
                         viewModel.editSelectedOriginAddress()
                     })
-                }
-
-                // Verification notice for destination address
-                if let destinationAddressStatusNoticeLabel = viewModel.destinationAddressStatusNoticeLabel {
+                } else if let destinationAddressStatusNoticeLabel = viewModel.destinationAddressStatusNoticeLabel {
+                    // Verification notice for destination address
                     verificationNotice(with: destinationAddressStatusNoticeLabel,
                                        isVerified: isDestinationAddressVerified,
                                        onDismiss: {
@@ -302,10 +304,8 @@ private extension WooShippingCreateLabelsView {
                             viewModel.editDestinationAddress()
                         }
                     })
-                }
-
-                // Verification notice for missing ITN in customs form
-                if let itnMissingNoticeLabel = viewModel.currentShipmentDetailsViewModel.itnMissingNoticeLabel {
+                } else if let itnMissingNoticeLabel = viewModel.currentShipmentDetailsViewModel.itnMissingNoticeLabel {
+                    // Verification notice for missing ITN in customs form
                     verificationNotice(with: itnMissingNoticeLabel,
                                        isVerified: false,
                                        onDismiss: {
@@ -544,6 +544,9 @@ private extension WooShippingCreateLabelsView {
         }
         .buttonStyle(PrimaryLoadingButtonStyle(isLoading: viewModel.isPurchasingLabel))
         .disabled(!viewModel.isPurchaseButtonEnabled)
+        .renderedIf(
+            !sizeCategory.isAccessibilityCategory || viewModel.isPurchaseButtonEnabled
+        )
     }
 
     /// View showing the address verification status for a destination address.
@@ -569,6 +572,7 @@ private extension WooShippingCreateLabelsView {
             Image(systemName: isVerified ? "checkmark.circle" : "exclamationmark.circle")
             Text(label)
                 .frame(maxWidth: .infinity, alignment: .leading)
+                .fixedSize(horizontal: false, vertical: true)
             Button(action: onDismiss) {
                 Image(systemName: "xmark")
                     .renderedIf(!isVerified)