Skip to content

Commit 591d97d

Browse files
RafaelKayumovRafaelKayumov
authored
[Shipping Labels] Remaining accessibility layout issues (#15844)
2 parents ec3566f + 36c47d5 commit 591d97d

File tree

6 files changed

+123
-71
lines changed

6 files changed

+123
-71
lines changed

‎RELEASE-NOTES.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
-----
66
- [*] Shipping Labels: Improve UI of Split shipments screen. [https://github.com/woocommerce/woocommerce-ios/pull/15838]
77
- [*] POS: icon button with confirmation step used for clearing the cart [https://github.com/woocommerce/woocommerce-ios/pull/15829]
8+
- [*] Shipping Labels: Fixed a portion of layout issues caused by bigger accessibility content size categories. [https://github.com/woocommerce/woocommerce-ios/pull/15844]
89

910
22.7
1011
-----

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ struct WooCarrierPackagesSelectionView: View {
136136
Button(selectionButtonText) {
137137
addPackageButtonTapped()
138138
}
139+
.renderedIf(viewModel.carrierTabs.isNotEmpty)
139140
.disabled(selectionButtonDisabled)
140141
.if(viewModel.previousSelectedAndSelectedCarriersPackageAreSame) {
141142
$0.buttonStyle(SecondaryButtonStyle())
@@ -202,14 +203,17 @@ private extension WooCarrierPackagesSelectionView {
202203
Text(Localization.emptyStateMessage)
203204
.multilineTextAlignment(.center)
204205
.bold()
206+
.fixedSize(horizontal: false, vertical: true)
207+
.padding(.horizontal)
205208
Button(Localization.createCustomPackageCTA) {
206209
addingCustomPackageHandler()
207210
}
208211
.buttonStyle(PrimaryButtonStyle())
212+
.fixedSize(horizontal: false, vertical: true)
209213
.padding(.horizontal, Layout.ctaPadding)
210214
Spacer()
211215
}
212-
216+
.scrollVerticallyIfNeeded()
213217
}
214218

215219
func addPackageButtonTapped() {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ struct WooSavedPackagesSelectionView: View {
157157
addPackageButtonTapped()
158158
}
159159
.disabled(selectionButtonDisabled)
160+
.renderedIf(viewModel.hasSavedPackages)
160161
.if(viewModel.previousSelectedAndSelectedSavedPackageAreSame) {
161162
$0.buttonStyle(SecondaryButtonStyle())
162163
}
@@ -205,14 +206,16 @@ private extension WooSavedPackagesSelectionView {
205206
Text(Localization.emptyStateMessage)
206207
.multilineTextAlignment(.center)
207208
.bold()
209+
.fixedSize(horizontal: false, vertical: true)
208210
Button(Localization.createCustomPackageCTA) {
209211
addingCustomPackageHandler()
210212
}
211213
.buttonStyle(PrimaryButtonStyle())
214+
.fixedSize(horizontal: false, vertical: true)
212215
.padding(.horizontal, Layout.ctaPadding)
213216
Spacer()
214217
}
215-
218+
.scrollVerticallyIfNeeded()
216219
}
217220

218221
var selectionButtonDisabled: Bool {

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Yosemite
33

44
struct WooShippingSplitShipmentsView: View {
55
@Environment(\.dismiss) private var dismiss
6+
@Environment(\.sizeCategory) private var sizeCategory
67

78
@ObservedObject var viewModel: ViewModel
89

@@ -17,7 +18,7 @@ struct WooShippingSplitShipmentsView: View {
1718

1819
var body: some View {
1920
NavigationView {
20-
VStack {
21+
VStack(spacing: 0) {
2122
if viewModel.shipments.count > 1 {
2223
VStack(spacing: 0) {
2324
topTabView
@@ -44,14 +45,20 @@ struct WooShippingSplitShipmentsView: View {
4445
CollapsibleShipmentItemCard(viewModel: item)
4546
}
4647
}
48+
49+
if sizeCategory.isAccessibilityCategory {
50+
Spacer()
51+
noticeStack
52+
}
4753
}
4854
.padding(Layout.contentPadding)
4955
}
5056

51-
Spacer()
52-
53-
noticeStack
54-
.padding(Layout.contentPadding)
57+
if !sizeCategory.isAccessibilityCategory {
58+
Spacer()
59+
noticeStack
60+
.padding(Layout.contentPadding)
61+
}
5562
}
5663
.disabled(viewModel.isSavingShipmentInfo)
5764
.navigationBarTitleDisplayMode(.inline)
@@ -271,6 +278,7 @@ private extension WooShippingSplitShipmentsView {
271278
Text(otherShipment.itemsDetailLabel)
272279
}
273280
.font(.subheadline)
281+
.frame(maxWidth: .infinity, alignment: .leading)
274282
}
275283
}
276284
.padding(Layout.contentPadding)

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

Lines changed: 82 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ struct WooShippingEditAddressView: View {
2020
@State private var previousFocusedField: WooShippingAddressFieldType?
2121

2222
@Environment(\.dismiss) private var dismiss
23+
@Environment(\.sizeCategory) private var sizeCategory
2324

2425
@State private var isPresentingCountrySelector: Bool = false
2526
@State private var isPresentingStateSelector: Bool = false
@@ -77,6 +78,10 @@ struct WooShippingEditAddressView: View {
7778
.font(.subheadline)
7879
.tint(Color(.accent))
7980
}
81+
82+
if sizeCategory.isAccessibilityCategory {
83+
ctaFooter(isScrollViewEmbedded: true)
84+
}
8085
}
8186
.padding()
8287
.onChange(of: focusedField) { newField in
@@ -86,11 +91,6 @@ struct WooShippingEditAddressView: View {
8691
previousFocusedField = newField
8792
}
8893
.toolbar {
89-
ToolbarItem(placement: .cancellationAction) {
90-
Button(Localization.cancel) {
91-
dismiss()
92-
}
93-
}
9494
ToolbarItemGroup(placement: .keyboard) {
9595
Button(action: {
9696
focusPreviousField()
@@ -113,71 +113,54 @@ struct WooShippingEditAddressView: View {
113113
}
114114
}
115115
}
116-
.sheet(isPresented: $isPresentingCountrySelector) {
117-
NavigationStack {
118-
FilterListSelector(viewModel: viewModel.countrySelectorVM)
119-
.navigationBarTitleDisplayMode(.inline)
120-
.toolbar {
121-
ToolbarItem(placement: .confirmationAction) {
122-
Button {
123-
isPresentingCountrySelector = false
124-
} label: {
125-
Text(Localization.done)
126-
.bold()
127-
}
128-
}
129-
}
130-
}
131-
}
132-
.sheet(isPresented: $isPresentingStateSelector) {
133-
NavigationStack {
134-
FilterListSelector(viewModel: viewModel.stateSelectorVM)
135-
.navigationBarTitleDisplayMode(.inline)
136-
.toolbar {
137-
ToolbarItem(placement: .confirmationAction) {
138-
Button {
139-
isPresentingStateSelector = false
140-
} label: {
141-
Text(Localization.done)
142-
.bold()
143-
}
144-
}
145-
}
116+
}
117+
.toolbar {
118+
ToolbarItem(placement: .cancellationAction) {
119+
Button(Localization.cancel) {
120+
dismiss()
146121
}
147122
}
148123
}
149124
.safeAreaInset(edge: .bottom) {
150-
VStack(spacing: .zero) {
151-
Divider().ignoresSafeArea(edges: [.horizontal])
152-
VStack(spacing: Constants.verticalSpacing) {
153-
HStack {
154-
Image(systemName: viewModel.status == .verified ? "checkmark.circle" : "exclamationmark.circle")
155-
Text(viewModel.statusLabel)
156-
}
157-
.font(.subheadline)
158-
.foregroundStyle(viewModel.status == .verified ? Constants.green : Constants.red)
159-
Button(Localization.Button.label(for: viewModel.status)) {
160-
switch viewModel.status {
161-
case .verified:
162-
dismiss()
163-
case .unverified:
164-
Task { @MainActor in
165-
await viewModel.remotelyValidateAddress()
125+
if !sizeCategory.isAccessibilityCategory {
126+
ctaFooter(isScrollViewEmbedded: false)
127+
}
128+
}
129+
.sheet(item: $viewModel.normalizeAddressVM) { viewModel in
130+
NavigationStack {
131+
WooShippingNormalizeAddressView(viewModel: viewModel)
132+
}
133+
}
134+
.sheet(isPresented: $isPresentingCountrySelector) {
135+
NavigationStack {
136+
FilterListSelector(viewModel: viewModel.countrySelectorVM)
137+
.navigationBarTitleDisplayMode(.inline)
138+
.toolbar {
139+
ToolbarItem(placement: .confirmationAction) {
140+
Button {
141+
isPresentingCountrySelector = false
142+
} label: {
143+
Text(Localization.done)
144+
.bold()
166145
}
167-
case .missingInformation:
168-
break
169146
}
170147
}
171-
.buttonStyle(PrimaryLoadingButtonStyle(isLoading: viewModel.isLoading))
172-
.disabled(viewModel.status == .missingInformation)
173-
}
174-
.padding()
175148
}
176-
.background(Color(uiColor: .systemBackground))
177149
}
178-
.sheet(item: $viewModel.normalizeAddressVM) { viewModel in
150+
.sheet(isPresented: $isPresentingStateSelector) {
179151
NavigationStack {
180-
WooShippingNormalizeAddressView(viewModel: viewModel)
152+
FilterListSelector(viewModel: viewModel.stateSelectorVM)
153+
.navigationBarTitleDisplayMode(.inline)
154+
.toolbar {
155+
ToolbarItem(placement: .confirmationAction) {
156+
Button {
157+
isPresentingStateSelector = false
158+
} label: {
159+
Text(Localization.done)
160+
.bold()
161+
}
162+
}
163+
}
181164
}
182165
}
183166
.alert(
@@ -206,6 +189,44 @@ struct WooShippingEditAddressView: View {
206189
)
207190
}
208191

192+
private func ctaFooter(isScrollViewEmbedded: Bool) -> some View {
193+
VStack(spacing: .zero) {
194+
Divider()
195+
.ignoresSafeArea(edges: [.horizontal])
196+
.padding(
197+
/// When embedded in scroll view
198+
/// we use a negative value to neglect the parent padding for the divider
199+
isScrollViewEmbedded ? .horizontal : [],
200+
-Constants.defaultPadding
201+
)
202+
203+
VStack(spacing: Constants.verticalSpacing) {
204+
HStack {
205+
Image(systemName: viewModel.status == .verified ? "checkmark.circle" : "exclamationmark.circle")
206+
Text(viewModel.statusLabel)
207+
}
208+
.font(.subheadline)
209+
.foregroundStyle(viewModel.status == .verified ? Constants.green : Constants.red)
210+
Button(Localization.Button.label(for: viewModel.status)) {
211+
switch viewModel.status {
212+
case .verified:
213+
dismiss()
214+
case .unverified:
215+
Task { @MainActor in
216+
await viewModel.remotelyValidateAddress()
217+
}
218+
case .missingInformation:
219+
break
220+
}
221+
}
222+
.buttonStyle(PrimaryLoadingButtonStyle(isLoading: viewModel.isLoading))
223+
.disabled(viewModel.status == .missingInformation)
224+
}
225+
.padding(isScrollViewEmbedded ? .vertical : .all)
226+
}
227+
.background(Color(uiColor: .systemBackground))
228+
}
229+
209230
private struct AddressTextField: View {
210231
@ObservedObject var field: WooShippingAddressField
211232

@@ -345,6 +366,7 @@ extension WooShippingEditAddressView {
345366
private extension WooShippingEditAddressView {
346367
enum Constants {
347368
static let verticalSpacing: CGFloat = 16
369+
static let defaultPadding: CGFloat = 16
348370
static let innerSpacing: CGFloat = 8
349371
static let extraPadding: CGFloat = 24
350372
static let cornerRadius: CGFloat = 8

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,11 @@ private extension WooShippingCreateLabelsView {
370370

371371
/// View showing the origin ("Ship From") address.
372372
var shipFromAddress: some View {
373-
HStack(alignment: .firstTextBaseline, spacing: Layout.bottomSheetSpacing) {
373+
AdaptiveStack(
374+
horizontalAlignment: .leading,
375+
verticalAlignment: .firstTextBaseline,
376+
spacing: Layout.bottomSheetSpacing
377+
) {
374378
Text(Localization.BottomSheet.shipFrom)
375379
.trackSize(size: $shipmentDetailsShipFromSize)
376380

@@ -379,7 +383,10 @@ private extension WooShippingCreateLabelsView {
379383
AddressLinesView(addressLines: addressLines)
380384
.frame(maxWidth: .infinity, alignment: .leading)
381385
} else {
382-
VStack(alignment: .leading) {
386+
VStack(
387+
alignment: .leading,
388+
spacing: Layout.verticalSpacing
389+
) {
383390
Button {
384391
isOriginAddressListPresented = true
385392
} label: {
@@ -412,10 +419,17 @@ private extension WooShippingCreateLabelsView {
412419

413420
/// View showing the destination ("Ship To") address.
414421
var shipToAddress: some View {
415-
HStack(alignment: .firstTextBaseline, spacing: Layout.bottomSheetSpacing) {
422+
AdaptiveStack(
423+
horizontalAlignment: .leading,
424+
verticalAlignment: .firstTextBaseline,
425+
spacing: Layout.bottomSheetSpacing
426+
) {
416427
Text(Localization.BottomSheet.shipTo)
417428
.frame(width: shipmentDetailsShipFromSize.width, alignment: .leading)
418-
VStack(alignment: .leading) {
429+
VStack(
430+
alignment: .leading,
431+
spacing: Layout.verticalSpacing
432+
) {
419433
if let addressLines = viewModel.destinationAddressLines {
420434
AddressLinesView(addressLines: addressLines)
421435
}

0 commit comments

Comments
 (0)