Files
Reflect/Shared/Onboarding/views/OnboardingWelcome.swift
Trey T a71104db05 Add onboarding Next buttons and fix accessibility for paged TabView
App-side changes:
- Added "Get Started" / "Continue" next buttons to all onboarding pages
  (Welcome, Day, Time, Style) with onboarding_next_button accessibility ID
- Added onNext callback plumbing from OnboardingMain to each page
- OnboardingMain now uses TabView(selection:) for programmatic page navigation
- Added .accessibilityElement(children: .contain) to all onboarding pages
  to fix iOS 26 paged TabView not exposing child elements
- Added settings_segmented_picker accessibility ID to Settings Picker
- Reduced padding on onboarding pages to keep buttons in visible area

Test-side changes:
- OnboardingScreen: replaced unreliable swipeToNext() with tapNext()
  that taps the accessibility-identified next button
- OnboardingScreen: multi-strategy skip button detection for subscription page
- SettingsScreen: scoped segment tap to picker element to avoid tab bar collision
- CustomizeScreen: simplified horizontal scroll to plain app.swipeLeft()
- OnboardingVotingTests: uses tapNext() to advance to Day page

Passing: OnboardingTests.CompleteFlow, OnboardingVotingTests
Remaining: OnboardingTests.DoesNotRepeat (session state issue),
  Settings scroll (deep elements), Customize horizontal pickers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 18:37:17 -05:00

129 lines
4.1 KiB
Swift

//
// OnboardingWelcome.swift
// Reflect
//
// Created by Claude Code on 12/10/24.
//
import SwiftUI
struct OnboardingWelcome: View {
var onNext: (() -> Void)? = nil
var body: some View {
ZStack {
// Gradient background
LinearGradient(
colors: [Color(hex: "667eea"), Color(hex: "764ba2")],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
.ignoresSafeArea()
VStack(spacing: 0) {
Spacer()
// App icon/logo area
ZStack {
Circle()
.fill(.white.opacity(0.15))
.frame(width: 160, height: 160)
Circle()
.fill(.white.opacity(0.2))
.frame(width: 120, height: 120)
Image(systemName: "heart.fill")
.font(.largeTitle)
.foregroundColor(.white)
}
.padding(.bottom, 40)
// Title
Text("Welcome to Reflect")
.font(.largeTitle.weight(.bold))
.foregroundColor(.white)
.padding(.bottom, 12)
// Subtitle
Text("Track your mood, discover patterns,\nand understand yourself better.")
.font(.headline.weight(.medium))
.foregroundColor(.white.opacity(0.9))
.multilineTextAlignment(.center)
.fixedSize(horizontal: false, vertical: true)
.padding(.horizontal, 40)
Spacer()
// Feature highlights
VStack(spacing: 16) {
FeatureRow(icon: "bell.badge.fill", title: "Daily Reminders", description: "Never forget to log your mood")
FeatureRow(icon: "chart.bar.fill", title: "Beautiful Insights", description: "See your mood patterns over time")
FeatureRow(icon: "paintpalette.fill", title: "Fully Customizable", description: "Make it yours with themes & colors")
}
.padding(.horizontal, 30)
.padding(.bottom, 24)
// Continue button
Button(action: { onNext?() }) {
Text("Get Started")
.font(.headline.weight(.semibold))
.foregroundColor(Color(hex: "667eea"))
.frame(maxWidth: .infinity)
.padding(.vertical, 14)
.background(
RoundedRectangle(cornerRadius: 16)
.fill(.white)
)
}
.padding(.horizontal, 30)
.padding(.bottom, 40)
.accessibilityIdentifier(AccessibilityID.Onboarding.nextButton)
}
}
.accessibilityElement(children: .contain)
.accessibilityIdentifier(AccessibilityID.Onboarding.welcomeScreen)
}
}
struct FeatureRow: View {
let icon: String
let title: String
let description: String
var body: some View {
HStack(spacing: 16) {
ZStack {
Circle()
.fill(.white.opacity(0.2))
.frame(width: 50, height: 50)
Image(systemName: icon)
.font(.title3)
.foregroundColor(.white)
}
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 2) {
Text(title)
.font(.body.weight(.semibold))
.foregroundColor(.white)
Text(description)
.font(.subheadline)
.foregroundColor(.white.opacity(0.8))
}
Spacer()
}
.accessibilityElement(children: .combine)
.accessibilityLabel("\(title): \(description)")
}
}
struct OnboardingWelcome_Previews: PreviewProvider {
static var previews: some View {
OnboardingWelcome()
}
}