Add comprehensive WCAG 2.1 AA accessibility support

- 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

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)
}
}
}