Skip to content

Commit 64baf4f

Browse files
RafaelKayumovRafaelKayumov
authored
[Shipping Labels] M4 accessibility layout issues (#15783)
2 parents b255334 + 4ce7a08 commit 64baf4f

File tree

6 files changed

+136
-53
lines changed

6 files changed

+136
-53
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<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">
2+
<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">
33
<device id="retina4_7" orientation="portrait" appearance="light"/>
44
<dependencies>
55
<deployment identifier="iOS"/>
6-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22130"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23721"/>
77
<capability name="Named colors" minToolsVersion="9.0"/>
88
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
99
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -70,7 +70,7 @@
7070
<rect key="frame" x="0.0" y="92" width="288" height="0.0"/>
7171
<color key="backgroundColor" name="Red50"/>
7272
<constraints>
73-
<constraint firstAttribute="height" priority="999" constant="34" id="1vO-Pa-Rrp"/>
73+
<constraint firstAttribute="height" relation="greaterThanOrEqual" priority="999" constant="34" id="1vO-Pa-Rrp"/>
7474
</constraints>
7575
<state key="normal" title="Add Customer Note"/>
7676
</button>

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<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">
2+
<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">
33
<device id="retina6_1" orientation="portrait" appearance="light"/>
44
<dependencies>
55
<deployment identifier="iOS"/>
6-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22130"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23721"/>
77
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
88
<capability name="System colors in document resources" minToolsVersion="11.0"/>
99
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -49,17 +49,11 @@
4949
<button hidden="YES" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="8sO-TX-YXZ">
5050
<rect key="frame" x="0.0" y="68" width="288" height="0.0"/>
5151
<constraints>
52-
<constraint firstAttribute="height" priority="999" constant="38" id="JD7-UH-chp"/>
52+
<constraint firstAttribute="height" relation="greaterThanOrEqual" priority="999" constant="38" id="JD7-UH-chp"/>
5353
</constraints>
5454
<state key="normal" title="Add Customer Note"/>
5555
</button>
5656
</subviews>
57-
<constraints>
58-
<constraint firstItem="KMy-GB-2vj" firstAttribute="leading" secondItem="3Ns-D0-Lmm" secondAttribute="leading" id="1sf-8Q-Erz"/>
59-
<constraint firstItem="8sO-TX-YXZ" firstAttribute="leading" secondItem="3Ns-D0-Lmm" secondAttribute="leading" id="CXr-SC-scr"/>
60-
<constraint firstAttribute="trailing" secondItem="8sO-TX-YXZ" secondAttribute="trailing" id="db6-Qe-0lI"/>
61-
<constraint firstAttribute="trailing" secondItem="KMy-GB-2vj" secondAttribute="trailing" id="uSW-Ze-AEM"/>
62-
</constraints>
6357
</stackView>
6458
</subviews>
6559
<constraints>

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

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,29 @@ struct WooShippingCustomsRow: View {
1010
@State private var showCustomsForm: Bool = false
1111

1212
var body: some View {
13-
AdaptiveStack {
14-
Text(Localization.customsTitle)
15-
.headlineStyle()
16-
.foregroundColor(.primary)
17-
18-
Spacer()
19-
20-
Text(informationIsCompleted ? Localization.completedStatus : Localization.missingInfoStatus)
21-
.foregroundColor(.black)
22-
.captionStyle()
23-
.padding(.horizontal, Layout.statusBadgeHorizontalPadding)
24-
.padding(.vertical, Layout.statusBadgeVerticalPadding)
25-
.frame(height: Layout.statusBadgeHeight * scale)
26-
.background(
27-
RoundedRectangle(cornerRadius: Layout.statusBadgeCornerRadius)
28-
.fill(informationIsCompleted ?
29-
Color.withColorStudio(name: .green, shade: .shade5) :
30-
Color.withColorStudio(name: .red, shade: .shade10))
31-
)
13+
ViewThatFits(in: .horizontal) {
14+
/// Layout option #1
15+
/// View fits in a given width
16+
HStack {
17+
customsRowTitleView
18+
Spacer()
19+
customsRowStatusBadgeView
20+
customsRowEditButtonView
21+
}
3222

33-
PencilEditButton {
34-
showCustomsForm.toggle()
23+
/// Layout option #2 that fits in given width
24+
/// View doesn't fit in a given width
25+
HStack {
26+
VStack(
27+
alignment: .center,
28+
spacing: Layout.customsRowVerticalLayoutSpacing
29+
) {
30+
customsRowTitleView
31+
customsRowStatusBadgeView
32+
}
33+
Spacer()
34+
customsRowEditButtonView
3535
}
36-
.accessibilityLabel(Text(Localization.editButtonAccessibilityLabel))
3736
}
3837
.padding(Layout.borderPadding)
3938
.roundedBorder(cornerRadius: Layout.borderCornerRadius, lineColor: Color(.separator), lineWidth: Layout.borderWidth)
@@ -43,6 +42,36 @@ struct WooShippingCustomsRow: View {
4342
}
4443
}
4544

45+
private extension WooShippingCustomsRow {
46+
var customsRowTitleView: some View {
47+
Text(Localization.customsTitle)
48+
.headlineStyle()
49+
.foregroundColor(.primary)
50+
}
51+
52+
var customsRowStatusBadgeView: some View {
53+
Text(informationIsCompleted ? Localization.completedStatus : Localization.missingInfoStatus)
54+
.foregroundColor(.black)
55+
.captionStyle()
56+
.padding(.horizontal, Layout.statusBadgeHorizontalPadding)
57+
.padding(.vertical, Layout.statusBadgeVerticalPadding)
58+
.frame(minHeight: Layout.statusBadgeHeight * scale)
59+
.background(
60+
RoundedRectangle(cornerRadius: Layout.statusBadgeCornerRadius)
61+
.fill(informationIsCompleted ?
62+
Color.withColorStudio(name: .green, shade: .shade5) :
63+
Color.withColorStudio(name: .red, shade: .shade10))
64+
)
65+
}
66+
67+
var customsRowEditButtonView: some View {
68+
PencilEditButton {
69+
showCustomsForm.toggle()
70+
}
71+
.accessibilityLabel(Text(Localization.editButtonAccessibilityLabel))
72+
}
73+
}
74+
4675
private extension WooShippingCustomsRow {
4776
enum Layout {
4877
static let borderCornerRadius: CGFloat = 8
@@ -52,6 +81,7 @@ private extension WooShippingCustomsRow {
5281
static let statusBadgeCornerRadius: CGFloat = 6
5382
static let statusBadgeHorizontalPadding: CGFloat = 12
5483
static let statusBadgeVerticalPadding: CGFloat = 4
84+
static let customsRowVerticalLayoutSpacing: CGFloat = 6
5585
static let statusBadgeHeight: CGFloat = 24
5686
static let borderPadding: CGFloat = 16
5787
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ struct WooShippingHazmatRow: View {
1919
Button(action: {
2020
isShowingDetailView = true
2121
}) {
22-
AdaptiveStack {
22+
HStack {
2323
Text(Localization.hazmatLabel)
2424
.bodyStyle()
2525
Spacer()

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

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ struct WooShippingAddPackageView: View {
2626

2727
@Environment(\.shippingWeightUnit) private var weightUnit
2828
@Environment(\.shippingDimensionsUnit) private var dimensionsUnit
29+
@Environment(\.dynamicTypeSize) private var dynamicTypeSize
2930

3031
init(selectedPackage: WooShippingPackageDataRepresentable? = nil,
3132
addPackageAction: @escaping (WooShippingPackageDataRepresentable) -> Void) {
@@ -44,13 +45,7 @@ struct WooShippingAddPackageView: View {
4445
var body: some View {
4546
NavigationView {
4647
VStack {
47-
Picker("", selection: $packagesViewModel.selectedPackageType) {
48-
ForEach(PackageProviderType.allCases, id: \.self) {
49-
Text($0.name)
50-
}
51-
}
52-
.pickerStyle(.segmented)
53-
.padding()
48+
packageTypeSelectorView
5449
selectedPackageTypeView
5550
}
5651
.toolbar {
@@ -72,6 +67,27 @@ struct WooShippingAddPackageView: View {
7267
.notice($packagesViewModel.notice)
7368
}
7469

70+
// MARK: - Computed Properties
71+
72+
private var selectedPackageTypeIndex: Binding<Int> {
73+
Binding(
74+
get: {
75+
PackageProviderType.allCases.firstIndex(of: packagesViewModel.selectedPackageType) ?? 0
76+
},
77+
set: { newIndex in
78+
if let newType = PackageProviderType.allCases[safe: newIndex] {
79+
packagesViewModel.selectedPackageType = newType
80+
}
81+
}
82+
)
83+
}
84+
85+
private var packageTypeTabs: [TopTabItem<EmptyView>] {
86+
PackageProviderType.allCases.map { packageType in
87+
TopTabItem(name: packageType.name, content: { EmptyView() })
88+
}
89+
}
90+
7591
// MARK: UI components
7692

7793
@ViewBuilder
@@ -94,6 +110,35 @@ struct WooShippingAddPackageView: View {
94110
})
95111
}
96112
}
113+
114+
private var packageTypeSelectorView: some View {
115+
Group {
116+
if dynamicTypeSize.isAccessibilitySize {
117+
TopTabView(
118+
tabs: packageTypeTabs,
119+
showContent: false,
120+
selectedTabIndex: selectedPackageTypeIndex,
121+
tabsContainerHorizontalPadding: nil,
122+
selectedStateColor: .accentColor,
123+
unselectedStateColor: .secondary,
124+
selectedTabIndicatorHeight: 3.0,
125+
tabPadding: 0,
126+
tabsNameFont: .subheadline.bold(),
127+
tabItemContentHorizontalPadding: 16.0,
128+
tabItemContentVerticalPadding: 9.0
129+
)
130+
.padding(.vertical)
131+
} else {
132+
Picker("", selection: $packagesViewModel.selectedPackageType) {
133+
ForEach(PackageProviderType.allCases, id: \.self) {
134+
Text($0.name)
135+
}
136+
}
137+
.pickerStyle(.segmented)
138+
.padding()
139+
}
140+
}
141+
}
97142
}
98143

99144
struct WooShippingAddPackageUnitInputView: View {

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

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ struct WooShippingCreateLabelsView: View {
2323
@Environment(\.dismiss) private var dismiss
2424
@Environment(\.verticalSizeClass) private var verticalSizeClass
2525
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
26+
@Environment(\.sizeCategory) private var sizeCategory
2627

2728
private var isiPhonePortrait: Bool {
2829
verticalSizeClass == .regular && horizontalSizeClass == .compact
@@ -45,6 +46,13 @@ struct WooShippingCreateLabelsView: View {
4546
viewModel.destinationAddressStatus == .verified
4647
}
4748

49+
/// Whether the "Purchase" button should be rendered
50+
private var shouldShowPurchaseButton: Bool {
51+
return isShipmentDetailsExpanded ||
52+
!sizeCategory.isAccessibilityCategory ||
53+
viewModel.isPurchaseButtonEnabled
54+
}
55+
4856
var body: some View {
4957
NavigationStack {
5058
Group {
@@ -272,10 +280,13 @@ private extension WooShippingCreateLabelsView {
272280
Text(Localization.BottomSheet.shipmentDetails)
273281
.foregroundStyle(Color(.primary))
274282
.bold()
283+
.lineLimit(1)
284+
.scaledToFill()
285+
.minimumScaleFactor(0.5)
275286

276287
if viewModel.shouldShowNotices {
277-
// Unverified notice for origin address
278288
if let originAddressUnverifiedNoticeLabel = viewModel.originAddressUnverifiedNoticeLabel {
289+
// Unverified notice for origin address
279290
verificationNotice(with: originAddressUnverifiedNoticeLabel,
280291
isVerified: false,
281292
onDismiss: {
@@ -286,10 +297,8 @@ private extension WooShippingCreateLabelsView {
286297
onTap: {
287298
viewModel.editSelectedOriginAddress()
288299
})
289-
}
290-
291-
// Verification notice for destination address
292-
if let destinationAddressStatusNoticeLabel = viewModel.destinationAddressStatusNoticeLabel {
300+
} else if let destinationAddressStatusNoticeLabel = viewModel.destinationAddressStatusNoticeLabel {
301+
// Verification notice for destination address
293302
verificationNotice(with: destinationAddressStatusNoticeLabel,
294303
isVerified: isDestinationAddressVerified,
295304
onDismiss: {
@@ -302,10 +311,8 @@ private extension WooShippingCreateLabelsView {
302311
viewModel.editDestinationAddress()
303312
}
304313
})
305-
}
306-
307-
// Verification notice for missing ITN in customs form
308-
if let itnMissingNoticeLabel = viewModel.currentShipmentDetailsViewModel.itnMissingNoticeLabel {
314+
} else if let itnMissingNoticeLabel = viewModel.currentShipmentDetailsViewModel.itnMissingNoticeLabel {
315+
// Verification notice for missing ITN in customs form
309316
verificationNotice(with: itnMissingNoticeLabel,
310317
isVerified: false,
311318
onDismiss: {
@@ -335,7 +342,7 @@ private extension WooShippingCreateLabelsView {
335342
}
336343
.tint(Color(.primary))
337344
}
338-
if isShipmentDetailsExpanded || viewModel.currentShipmentDetailsViewModel.selectedPackage != nil {
345+
if shouldShowPurchaseButton || viewModel.currentShipmentDetailsViewModel.selectedPackage != nil {
339346
purchaseButton
340347
}
341348
}
@@ -351,7 +358,10 @@ private extension WooShippingCreateLabelsView {
351358
}
352359
.tint(Color(.primary))
353360
.fixedSize(horizontal: false, vertical: true)
354-
purchaseButton
361+
362+
if shouldShowPurchaseButton {
363+
purchaseButton
364+
}
355365
}
356366
}
357367
}
@@ -541,6 +551,9 @@ private extension WooShippingCreateLabelsView {
541551
}
542552
} label: {
543553
Text(Localization.BottomSheet.purchaseLabel(with: viewModel.totalCost))
554+
.lineLimit(1)
555+
.scaledToFill()
556+
.minimumScaleFactor(0.5)
544557
}
545558
.buttonStyle(PrimaryLoadingButtonStyle(isLoading: viewModel.isPurchasingLabel))
546559
.disabled(!viewModel.isPurchaseButtonEnabled)
@@ -569,6 +582,7 @@ private extension WooShippingCreateLabelsView {
569582
Image(systemName: isVerified ? "checkmark.circle" : "exclamationmark.circle")
570583
Text(label)
571584
.frame(maxWidth: .infinity, alignment: .leading)
585+
.fixedSize(horizontal: false, vertical: true)
572586
Button(action: onDismiss) {
573587
Image(systemName: "xmark")
574588
.renderedIf(!isVerified)

0 commit comments

Comments
 (0)