[Shipping Labels] Remaining accessibility layout issues

RELEASE-NOTES.txt

@@ -4,6 +4,7 @@
 22.8
 -----
 - [*] POS: icon button with confirmation step used for clearing the cart [https://github.com/woocommerce/woocommerce-ios/pull/15829]
+- [*] Shipping Labels: Fixed a portion of layout issues caused by bigger accessibility content size categories. [https://github.com/woocommerce/woocommerce-ios/pull/15844]
 
 22.7
 -----

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

@@ -202,10 +202,13 @@ private extension WooCarrierPackagesSelectionView {
             Text(Localization.emptyStateMessage)
                 .multilineTextAlignment(.center)
                 .bold()
+                .fixedSize(horizontal: false, vertical: true)
+                .padding(.horizontal)
             Button(Localization.createCustomPackageCTA) {
                 addingCustomPackageHandler()
             }
             .buttonStyle(PrimaryButtonStyle())
+            .fixedSize(horizontal: false, vertical: true)
             .padding(.horizontal, Layout.ctaPadding)
             Spacer()
         }

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

@@ -205,10 +205,12 @@ private extension WooSavedPackagesSelectionView {
             Text(Localization.emptyStateMessage)
                 .multilineTextAlignment(.center)
                 .bold()
+                .fixedSize(horizontal: false, vertical: true)
             Button(Localization.createCustomPackageCTA) {
                 addingCustomPackageHandler()
             }
             .buttonStyle(PrimaryButtonStyle())
+            .fixedSize(horizontal: false, vertical: true)
             .padding(.horizontal, Layout.ctaPadding)
             Spacer()
         }

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsView.swift

@@ -3,6 +3,7 @@ import Yosemite
 
 struct WooShippingSplitShipmentsView: View {
     @Environment(\.dismiss) private var dismiss
+    @Environment(\.sizeCategory) private var sizeCategory
 
     @ObservedObject var viewModel: ViewModel
 
@@ -17,7 +18,7 @@ struct WooShippingSplitShipmentsView: View {
 
     var body: some View {
         NavigationView {
-            VStack {
+            VStack(spacing: 0) {
                 if viewModel.shipments.count > 1 {
                     VStack(spacing: 0) {
                         topTabView
@@ -44,14 +45,20 @@ struct WooShippingSplitShipmentsView: View {
                                 CollapsibleShipmentItemCard(viewModel: item)
                             }
                         }
+
+                        if sizeCategory.isAccessibilityCategory {
+                            Spacer()
+                            noticeStack
+                        }
                     }
                     .padding(Layout.contentPadding)
                 }
 
-                Spacer()
-
-                noticeStack
-                    .padding(Layout.contentPadding)
+                if !sizeCategory.isAccessibilityCategory {
+                    Spacer()
+                    noticeStack
+                        .padding(Layout.contentPadding)
+                }
             }
             .disabled(viewModel.isSavingShipmentInfo)
             .navigationBarTitleDisplayMode(.inline)
@@ -268,6 +275,7 @@ private extension WooShippingSplitShipmentsView {
                                     Text(otherShipment.itemsDetailLabel)
                                 }
                                 .font(.subheadline)
+                                .frame(maxWidth: .infinity, alignment: .leading)
                             }
                         }
                         .padding(Layout.contentPadding)

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

@@ -20,6 +20,7 @@ struct WooShippingEditAddressView: View {
     @State private var previousFocusedField: WooShippingAddressFieldType?
 
     @Environment(\.dismiss) private var dismiss
+    @Environment(\.sizeCategory) private var sizeCategory
 
     @State private var isPresentingCountrySelector: Bool = false
     @State private var isPresentingStateSelector: Bool = false
@@ -77,6 +78,10 @@ struct WooShippingEditAddressView: View {
                         .font(.subheadline)
                         .tint(Color(.accent))
                 }
+
+                if sizeCategory.isAccessibilityCategory {
+                    ctaFooter(isScrollViewEmbedded: true)
+                }
             }
             .padding()
             .onChange(of: focusedField) { newField in
@@ -86,11 +91,6 @@ struct WooShippingEditAddressView: View {
                 previousFocusedField = newField
             }
             .toolbar {
-                ToolbarItem(placement: .cancellationAction) {
-                    Button(Localization.cancel) {
-                        dismiss()
-                    }
-                }
                 ToolbarItemGroup(placement: .keyboard) {
                     Button(action: {
                         focusPreviousField()
@@ -113,71 +113,54 @@ struct WooShippingEditAddressView: View {
                     }
                 }
             }
-            .sheet(isPresented: $isPresentingCountrySelector) {
-                NavigationStack {
-                    FilterListSelector(viewModel: viewModel.countrySelectorVM)
-                        .navigationBarTitleDisplayMode(.inline)
-                        .toolbar {
-                            ToolbarItem(placement: .confirmationAction) {
-                                Button {
-                                    isPresentingCountrySelector = false
-                                } label: {
-                                    Text(Localization.done)
-                                        .bold()
-                                }
-                            }
-                        }
-                }
-            }
-            .sheet(isPresented: $isPresentingStateSelector) {
-                NavigationStack {
-                    FilterListSelector(viewModel: viewModel.stateSelectorVM)
-                        .navigationBarTitleDisplayMode(.inline)
-                        .toolbar {
-                            ToolbarItem(placement: .confirmationAction) {
-                                Button {
-                                    isPresentingStateSelector = false
-                                } label: {
-                                    Text(Localization.done)
-                                        .bold()
-                                }
-                            }
-                        }
+        }
+        .toolbar {
+            ToolbarItem(placement: .cancellationAction) {
+                Button(Localization.cancel) {
+                    dismiss()
                 }
             }
         }
         .safeAreaInset(edge: .bottom) {
-            VStack(spacing: .zero) {
-                Divider().ignoresSafeArea(edges: [.horizontal])
-                VStack(spacing: Constants.verticalSpacing) {
-                    HStack {
-                        Image(systemName: viewModel.status == .verified ? "checkmark.circle" : "exclamationmark.circle")
-                        Text(viewModel.statusLabel)
-                    }
-                    .font(.subheadline)
-                    .foregroundStyle(viewModel.status == .verified ? Constants.green : Constants.red)
-                    Button(Localization.Button.label(for: viewModel.status)) {
-                        switch viewModel.status {
-                        case .verified:
-                            dismiss()
-                        case .unverified:
-                            Task { @MainActor in
-                                await viewModel.remotelyValidateAddress()
+            if !sizeCategory.isAccessibilityCategory {
+                ctaFooter(isScrollViewEmbedded: false)
+            }
+        }
+        .sheet(item: $viewModel.normalizeAddressVM) { viewModel in
+            NavigationStack {
+                WooShippingNormalizeAddressView(viewModel: viewModel)
+            }
+        }
+        .sheet(isPresented: $isPresentingCountrySelector) {
+            NavigationStack {
+                FilterListSelector(viewModel: viewModel.countrySelectorVM)
+                    .navigationBarTitleDisplayMode(.inline)
+                    .toolbar {
+                        ToolbarItem(placement: .confirmationAction) {
+                            Button {
+                                isPresentingCountrySelector = false
+                            } label: {
+                                Text(Localization.done)
+                                    .bold()
                             }
-                        case .missingInformation:
-                            break
                         }
                     }
-                    .buttonStyle(PrimaryLoadingButtonStyle(isLoading: viewModel.isLoading))
-                    .disabled(viewModel.status == .missingInformation)
-                }
-                .padding()
             }
-            .background(Color(uiColor: .systemBackground))
         }
-        .sheet(item: $viewModel.normalizeAddressVM) { viewModel in
+        .sheet(isPresented: $isPresentingStateSelector) {
             NavigationStack {
-                WooShippingNormalizeAddressView(viewModel: viewModel)
+                FilterListSelector(viewModel: viewModel.stateSelectorVM)
+                    .navigationBarTitleDisplayMode(.inline)
+                    .toolbar {
+                        ToolbarItem(placement: .confirmationAction) {
+                            Button {
+                                isPresentingStateSelector = false
+                            } label: {
+                                Text(Localization.done)
+                                    .bold()
+                            }
+                        }
+                    }
             }
         }
         .alert(
@@ -206,6 +189,44 @@ struct WooShippingEditAddressView: View {
         )
     }
 
+    private func ctaFooter(isScrollViewEmbedded: Bool) -> some View {
+        VStack(spacing: .zero) {
+            Divider()
+                .ignoresSafeArea(edges: [.horizontal])
+                .padding(
+                    /// When embedded in scroll view
+                    /// we use a negative value to neglect the parent padding for the divider
+                    isScrollViewEmbedded ? .horizontal : [],
+                    -Constants.defaultPadding
+                )
+
+            VStack(spacing: Constants.verticalSpacing) {
+                HStack {
+                    Image(systemName: viewModel.status == .verified ? "checkmark.circle" : "exclamationmark.circle")
+                    Text(viewModel.statusLabel)
+                }
+                .font(.subheadline)
+                .foregroundStyle(viewModel.status == .verified ? Constants.green : Constants.red)
+                Button(Localization.Button.label(for: viewModel.status)) {
+                    switch viewModel.status {
+                    case .verified:
+                        dismiss()
+                    case .unverified:
+                        Task { @MainActor in
+                            await viewModel.remotelyValidateAddress()
+                        }
+                    case .missingInformation:
+                        break
+                    }
+                }
+                .buttonStyle(PrimaryLoadingButtonStyle(isLoading: viewModel.isLoading))
+                .disabled(viewModel.status == .missingInformation)
+            }
+            .padding(isScrollViewEmbedded ? .vertical : .all)
+        }
+        .background(Color(uiColor: .systemBackground))
+    }
+
     private struct AddressTextField: View {
         @ObservedObject var field: WooShippingAddressField
 
@@ -345,6 +366,7 @@ extension WooShippingEditAddressView {
 private extension WooShippingEditAddressView {
     enum Constants {
         static let verticalSpacing: CGFloat = 16
+        static let defaultPadding: CGFloat = 16
         static let innerSpacing: CGFloat = 8
         static let extraPadding: CGFloat = 24
         static let cornerRadius: CGFloat = 8

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

@@ -412,10 +412,17 @@ private extension WooShippingCreateLabelsView {
 
     /// View showing the destination ("Ship To") address.
     var shipToAddress: some View {
-        HStack(alignment: .firstTextBaseline, spacing: Layout.bottomSheetSpacing) {
+        AdaptiveStack(
+            horizontalAlignment: .leading,
+            verticalAlignment: .firstTextBaseline,
+            spacing: Layout.bottomSheetSpacing
+        ) {
             Text(Localization.BottomSheet.shipTo)
                 .frame(width: shipmentDetailsShipFromSize.width, alignment: .leading)
-            VStack(alignment: .leading) {
+            VStack(
+                alignment: .leading,
+                spacing: Layout.verticalSpacing
+            ) {
                 if let addressLines = viewModel.destinationAddressLines {
                     AddressLinesView(addressLines: addressLines)
                 }