admin/Reflect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive WCAG 2.1 AA accessibility support

Browse Source 
- Add VoiceOver labels and hints to all voting layouts, settings, widgets,
  onboarding screens, and entry cells
- Add Reduce Motion support to button animations throughout the app
- Ensure 44x44pt minimum touch targets on widget mood buttons
- Enhance AccessibilityHelpers with Dynamic Type support, ScaledValue wrapper,
  and VoiceOver detection utilities
- Gate premium features (Insights, Month/Year views) behind subscription
- Update widgets to show subscription prompts for non-subscribers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
2025-12-23 23:26:21 -06:00
parent a6a6912183
commit 086f8b8807
24 changed files with 741 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Shared/Onboarding/views/OnboardingDay.swift
View File

@@ -127,6 +127,7 @@ struct DayOptionCard: View {
.font(.system(size: 20))
.foregroundColor(isSelected ? Color(hex: "4facfe") : .white)
}
.accessibilityHidden(true)
// Text
VStack(alignment: .leading, spacing: 3) {
@@ -152,6 +153,7 @@ struct DayOptionCard: View {
Image(systemName: "checkmark.circle.fill")
.font(.system(size: 22))
.foregroundColor(Color(hex: "4facfe"))
.accessibilityHidden(true)
}
}
.padding(.horizontal, 16)
@@ -163,6 +165,9 @@ struct DayOptionCard: View {
)
}
.buttonStyle(.plain)
.accessibilityLabel("\(title), \(subtitle)")
.accessibilityHint(example)
.accessibilityAddTraits(isSelected ? [.isSelected] : [])
}
}

107
Shared/Onboarding/views/OnboardingStyle.swift
View File

@@ -22,48 +22,46 @@ struct OnboardingStyle: View {
)
.ignoresSafeArea()
VStack(spacing: 0) {
Spacer()
ScrollView(showsIndicators: false) {
VStack(spacing: 0) {
// Icon
ZStack {
Circle()
.fill(.white.opacity(0.15))
.frame(width: 100, height: 100)
// Icon
ZStack {
Circle()
.fill(.white.opacity(0.15))
.frame(width: 120, height: 120)
Image(systemName: "paintpalette.fill")
.font(.system(size: 40))
.foregroundColor(.white)
}
.padding(.top, 40)
.padding(.bottom, 20)
Image(systemName: "paintpalette.fill")
.font(.system(size: 44))
// Title
Text("Make it yours")
.font(.system(size: 28, weight: .bold, design: .rounded))
.foregroundColor(.white)
}
.padding(.bottom, 32)
.padding(.bottom, 8)
// Title
Text("Make it yours")
.font(.system(size: 28, weight: .bold, design: .rounded))
.foregroundColor(.white)
.padding(.bottom, 12)
// Subtitle
Text("Choose your favorite style")
.font(.system(size: 16, weight: .medium))
.foregroundColor(.white.opacity(0.85))
.padding(.bottom, 20)
// Subtitle
Text("Choose your favorite style")
.font(.system(size: 16, weight: .medium))
.foregroundColor(.white.opacity(0.85))
Spacer()
// Preview card
OnboardingStylePreview(moodTint: moodTint, imagePack: imagePack)
.padding(.horizontal, 24)
.padding(.bottom, 24)
// Icon Style Section
VStack(alignment: .leading, spacing: 12) {
Text("Icon Style")
.font(.system(size: 14, weight: .semibold))
.foregroundColor(.white.opacity(0.9))
// Preview card
OnboardingStylePreview(moodTint: moodTint, imagePack: imagePack)
.padding(.horizontal, 24)
.padding(.bottom, 20)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 12) {
// Icon Style Section
VStack(alignment: .leading, spacing: 10) {
Text("Icon Style")
.font(.system(size: 14, weight: .semibold))
.foregroundColor(.white.opacity(0.9))
.padding(.horizontal, 24)
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
ForEach(MoodImages.allCases, id: \.rawValue) { pack in
OnboardingIconPackOption(
pack: pack,
@@ -79,18 +77,16 @@ struct OnboardingStyle: View {
}
.padding(.horizontal, 24)
}
}
.padding(.bottom, 20)
.padding(.bottom, 16)
// Color Theme Section
VStack(alignment: .leading, spacing: 12) {
Text("Mood Colors")
.font(.system(size: 14, weight: .semibold))
.foregroundColor(.white.opacity(0.9))
.padding(.horizontal, 24)
// Color Theme Section
VStack(alignment: .leading, spacing: 10) {
Text("Mood Colors")
.font(.system(size: 14, weight: .semibold))
.foregroundColor(.white.opacity(0.9))
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 12) {
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
ForEach(MoodTints.defaultOptions, id: \.rawValue) { tint in
OnboardingTintOption(
tint: tint,
@@ -105,19 +101,18 @@ struct OnboardingStyle: View {
}
.padding(.horizontal, 24)
}
}
Spacer()
// Hint
HStack(spacing: 8) {
Image(systemName: "arrow.left.arrow.right")
.font(.system(size: 14))
Text("You can change these anytime in Customize")
.font(.system(size: 13, weight: .medium))
// Hint
HStack(spacing: 8) {
Image(systemName: "arrow.left.arrow.right")
.font(.system(size: 14))
Text("You can change these anytime in Customize")
.font(.system(size: 13, weight: .medium))
}
.foregroundColor(.white.opacity(0.7))
.padding(.top, 20)
.padding(.bottom, 80)
}
.foregroundColor(.white.opacity(0.7))
.padding(.bottom, 80)
}
}
}

38
Shared/Onboarding/views/OnboardingSubscription.swift
View File

@@ -46,12 +46,6 @@ struct OnboardingSubscription: View {
.multilineTextAlignment(.center)
.padding(.bottom, 8)
// Trial info
Text("Start your free 7-day trial")
.font(.system(size: 16, weight: .semibold))
.foregroundColor(.white.opacity(0.9))
.padding(.bottom, 24)
Spacer()
// Benefits list
@@ -67,7 +61,7 @@ struct OnboardingSubscription: View {
BenefitRow(
icon: "lightbulb.fill",
title: "Smart Insights",
title: "AI-Powered Insights",
description: "Discover trends and patterns in your moods"
)
@@ -75,27 +69,18 @@ struct OnboardingSubscription: View {
.background(.white.opacity(0.2))
BenefitRow(
icon: "clock.arrow.circlepath",
title: "Unlimited History",
description: "Access all your past mood data forever"
icon: "heart.text.square.fill",
title: "Health Data Correlation",
description: "Connect your mood with sleep, steps, and more"
)
Divider()
.background(.white.opacity(0.2))
BenefitRow(
icon: "icloud.fill",
title: "Cloud Sync",
description: "Your data synced across all your devices"
)
Divider()
.background(.white.opacity(0.2))
BenefitRow(
icon: "heart.fill",
title: "Support Development",
description: "Help us keep improving Feels for everyone"
icon: "square.grid.2x2.fill",
title: "Interactive Widgets",
description: "Log your mood directly from your home screen"
)
}
.padding(.vertical, 8)
@@ -118,7 +103,7 @@ struct OnboardingSubscription: View {
Image(systemName: "sparkles")
.font(.system(size: 18, weight: .semibold))
Text("Start Free Trial")
Text("Get Personal Insights")
.font(.system(size: 18, weight: .bold))
}
.foregroundColor(Color(hex: "11998e"))
@@ -130,6 +115,8 @@ struct OnboardingSubscription: View {
.shadow(color: .black.opacity(0.15), radius: 10, y: 5)
)
}
.accessibilityLabel(String(localized: "Get Personal Insights"))
.accessibilityHint(String(localized: "Opens subscription options"))
// Skip button
Button(action: {
@@ -141,6 +128,8 @@ struct OnboardingSubscription: View {
.font(.system(size: 16, weight: .medium))
.foregroundColor(.white.opacity(0.8))
}
.accessibilityLabel(String(localized: "Maybe Later"))
.accessibilityHint(String(localized: "Skip subscription and complete setup"))
.padding(.top, 4)
}
.padding(.horizontal, 24)
@@ -168,6 +157,7 @@ struct BenefitRow: View {
.font(.system(size: 22))
.foregroundColor(.white)
.frame(width: 40)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 2) {
Text(title)
@@ -183,6 +173,8 @@ struct BenefitRow: View {
}
.padding(.horizontal, 20)
.padding(.vertical, 14)
.accessibilityElement(children: .combine)
.accessibilityLabel("\(title): \(description)")
}
}

4
Shared/Onboarding/views/OnboardingTime.swift
View File

@@ -63,6 +63,8 @@ struct OnboardingTime: View {
.datePickerStyle(.wheel)
.labelsHidden()
.colorScheme(.light)
.accessibilityLabel(String(localized: "Reminder time"))
.accessibilityHint(String(localized: "Select when you want to be reminded"))
}
.padding(.vertical, 20)
.padding(.horizontal, 24)
@@ -80,6 +82,7 @@ struct OnboardingTime: View {
Image(systemName: "info.circle.fill")
.font(.system(size: 20))
.foregroundColor(.white.opacity(0.8))
.accessibilityHidden(true)
Text("You'll get a gentle reminder at \(formatter.string(from: onboardingData.date)) every day")
.font(.system(size: 14, weight: .medium))
@@ -87,6 +90,7 @@ struct OnboardingTime: View {
}
.padding(.horizontal, 30)
.padding(.bottom, 80)
.accessibilityElement(children: .combine)
}
}
}

5
Shared/Onboarding/views/OnboardingWelcome.swift
View File

@@ -71,6 +71,8 @@ struct OnboardingWelcome: View {
.foregroundColor(.white.opacity(0.7))
}
.padding(.bottom, 60)
.accessibilityLabel(String(localized: "Swipe right to continue"))
.accessibilityHint(String(localized: "Swipe to the next onboarding step"))
}
}
}
@@ -92,6 +94,7 @@ struct FeatureRow: View {
.font(.system(size: 22))
.foregroundColor(.white)
}
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 2) {
Text(title)
@@ -105,6 +108,8 @@ struct FeatureRow: View {
Spacer()
}
.accessibilityElement(children: .combine)
.accessibilityLabel("\(title): \(description)")
}
}