Skip to content

Commit 7986122

Browse files
EcarrionEcarrion
authored
Merge pull request #7752 from woocommerce/issue/widget-accessibility
Widgets: Improve Widget Accessibility
2 parents 6e50f5e + 76d4c15 commit 7986122

File tree

2 files changed

+107
-43
lines changed

2 files changed

+107
-43
lines changed

‎RELEASE-NOTES.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- [**] Products: Now you can duplicate products from the More menu of the product detail screen. [https://github.com/woocommerce/woocommerce-ios/pull/7727]
66
- [*] Orders: We are bringing back the ability to add/edit customer notes and addresses from the main order screen [https://github.com/woocommerce/woocommerce-ios/pull/7750]
77
- [*] Help center: Added help center web page with FAQs for "Wrong WordPress.com account error" screen. [https://github.com/woocommerce/woocommerce-ios/pull/7747]
8+
- [*] Widgets: The Today's Stat Widget adds support for bigger fonts. [https://github.com/woocommerce/woocommerce-ios/pull/7752]
89

910
10.4
1011
-----

‎WooCommerce/StoreWidgets/StoreInfoWidget.swift‎

Lines changed: 106 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -33,72 +33,118 @@ private struct StoreInfoView: View {
3333
// Entry to render
3434
let entry: StoreInfoData
3535

36+
// Current size category
37+
@Environment(\.sizeCategory) var category
38+
3639
var body: some View {
3740
ZStack {
3841
// Background
3942
Color(.brand)
4043

41-
VStack(spacing: Layout.sectionSpacing) {
44+
VStack(alignment: .leading, spacing: Layout.sectionSpacing) {
45+
46+
VStack(alignment: .leading, spacing: Layout.cardSpacing) {
47+
// Store Name
48+
HStack {
49+
Text(entry.name)
50+
.storeNameStyle()
4251

43-
// Store Name
44-
HStack {
45-
Text(entry.name)
46-
.storeNameStyle()
52+
Spacer()
4753

48-
Spacer()
54+
Text(entry.range)
55+
.statRangeStyle()
56+
}
4957

50-
Text(entry.range)
58+
// Updated at
59+
Text(Localization.updatedAt(entry.updatedTime))
5160
.statRangeStyle()
5261
}
5362

54-
// Revenue & Visitors
55-
HStack() {
56-
VStack(alignment: .leading, spacing: Layout.cardSpacing) {
57-
Text(Localization.revenue)
58-
.statTitleStyle()
63+
if category > .extraLarge {
64+
AccessibilityStatsCard(entry: entry)
65+
} else {
66+
StatsCard(entry: entry)
67+
}
68+
}
69+
.padding(.horizontal)
70+
}
71+
}
72+
}
5973

60-
Text(entry.revenue)
61-
.statValueStyle()
74+
/// Stats card sub view.
75+
/// To be used inside `StoreInfoView`.
76+
///
77+
private struct StatsCard: View {
78+
// Entry to render
79+
let entry: StoreInfoData
6280

63-
}
64-
.frame(maxWidth: .infinity, alignment: .leading)
81+
var body: some View {
82+
Group {
83+
// Revenue & Visitors
84+
HStack() {
85+
VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
86+
Text(StoreInfoView.Localization.revenue)
87+
.statTitleStyle()
6588

66-
VStack(alignment: .leading, spacing: Layout.cardSpacing) {
67-
Text(Localization.visitors)
68-
.statTitleStyle()
89+
Text(entry.revenue)
90+
.statValueStyle()
6991

70-
Text(entry.visitors)
71-
.statValueStyle()
72-
}
73-
.frame(maxWidth: .infinity, alignment: .leading)
7492
}
93+
.frame(maxWidth: .infinity, alignment: .leading)
7594

76-
// Orders & Conversion
77-
HStack {
78-
VStack(alignment: .leading, spacing: Layout.cardSpacing) {
79-
Text(Localization.orders)
80-
.statTitleStyle()
95+
VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
96+
Text(StoreInfoView.Localization.visitors)
97+
.statTitleStyle()
8198

82-
Text(entry.orders)
83-
.statValueStyle()
84-
}
85-
.frame(maxWidth: .infinity, alignment: .leading)
99+
Text(entry.visitors)
100+
.statValueStyle()
101+
}
102+
.frame(maxWidth: .infinity, alignment: .leading)
103+
}
86104

87-
VStack(alignment: .leading, spacing: Layout.cardSpacing) {
88-
Text(Localization.conversion)
89-
.statTitleStyle()
105+
// Orders & Conversion
106+
HStack {
107+
VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
108+
Text(StoreInfoView.Localization.orders)
109+
.statTitleStyle()
90110

91-
Text(entry.conversion)
92-
.statValueStyle()
93-
}
94-
.frame(maxWidth: .infinity, alignment: .leading)
111+
Text(entry.orders)
112+
.statValueStyle()
95113
}
114+
.frame(maxWidth: .infinity, alignment: .leading)
115+
116+
VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
117+
Text(StoreInfoView.Localization.conversion)
118+
.statTitleStyle()
96119

97-
Text(Localization.updatedAt(entry.updatedTime))
98-
.statRangeStyle()
99-
.frame(maxWidth: .infinity, alignment: .leading)
120+
Text(entry.conversion)
121+
.statValueStyle()
122+
}
123+
.frame(maxWidth: .infinity, alignment: .leading)
100124
}
101-
.padding(.horizontal)
125+
}
126+
}
127+
}
128+
129+
/// Accessibility card sub view. Shows only revenue and a `View More` button.
130+
/// To be used inside `StoreInfoView`.
131+
///
132+
private struct AccessibilityStatsCard: View {
133+
// Entry to render
134+
let entry: StoreInfoData
135+
136+
var body: some View {
137+
Group {
138+
VStack(alignment: .leading, spacing: StoreInfoView.Layout.cardSpacing) {
139+
Text(StoreInfoView.Localization.revenue)
140+
.statTitleStyle()
141+
142+
Text(entry.revenue)
143+
.statValueStyle()
144+
}
145+
146+
Text(StoreInfoView.Localization.viewMore)
147+
.statButtonStyle()
102148
}
103149
}
104150
}
@@ -195,6 +241,11 @@ private extension StoreInfoView {
195241
value: "Conversion",
196242
comment: "Conversion title label for the store info widget"
197243
)
244+
static let viewMore = AppLocalizedString(
245+
"storeWidgets.infoView.viewMore",
246+
value: "View More",
247+
comment: "Title for the button indicator to display more stats in the Today's Stat widget when using accessibility fonts."
248+
)
198249
static func updatedAt(_ updatedTime: String) -> LocalizedString {
199250
let format = AppLocalizedString("storeWidgets.infoView.updatedAt",
200251
value: "As of %1$@",
@@ -263,6 +314,18 @@ struct StoreWidgets_Previews: PreviewProvider {
263314
)
264315
.previewContext(WidgetPreviewContext(family: .systemMedium))
265316

317+
StoreInfoView(
318+
entry: StoreInfoData(range: "Today",
319+
name: "Ernest Shop",
320+
revenue: "$132.234",
321+
visitors: "67",
322+
orders: "23",
323+
conversion: "37%",
324+
updatedTime: "10:24 PM")
325+
)
326+
.previewContext(WidgetPreviewContext(family: .systemMedium))
327+
.environment(\.sizeCategory, .extraExtraLarge)
328+
266329
NotLoggedInView()
267330
.previewContext(WidgetPreviewContext(family: .systemMedium))
268331

0 commit comments

Comments
 (0)