Skip to content

chore: align UI with iOS Human Interface Guidelines#11

Merged
brendan-ch merged 1 commit into
mainfrom
chore/ui-hig-compliance
Jun 15, 2026
Merged

chore: align UI with iOS Human Interface Guidelines#11
brendan-ch merged 1 commit into
mainfrom
chore/ui-hig-compliance

Conversation

@brendan-ch

Copy link
Copy Markdown
Owner

Overview

A comprehensive UI sweep aligning the app's SwiftUI surfaces with Apple's iOS 26 Human Interface Guidelines and accessibility expectations. Every screen was inspected on an iPhone 17 Pro (iOS 26.4) simulator in light/dark, populated/empty/hard-mode states, and the relevant guidance was pulled in to ground each change. Behavior is unchanged — these are presentation, affordance, and accessibility refinements.

Changes

Accessibility

  • Hard Mode and Block Adult Content are now full-width labeled Toggles instead of a manual HStack + labelsHidden() switch. The whole row is the tap target (≥44 pt) and VoiceOver reads a single named switch.
  • The time-limit / open-limit steppers expose an accessibility label and a spoken value (e.g. "Daily time limit, 45 minutes"), so VoiceOver announces the value as it changes.
  • The day-of-week picker letters shrink to fit (lineLimit(1) + minimumScaleFactor) so they never clip at large Dynamic Type sizes, while the seven circles still fit one row.

Consistency & affordances

  • Empty Rules and empty App Lists now use ContentUnavailableView (centered icon + title + description + action) instead of top-aligned cards.
  • New Rule preset rows use a disclosure chevron matching the rule-type rows, replacing the misleading plus.circle.fill — both simply push the editor to confirm.
  • App-list management rows are full-width tap-to-edit with a disclosure chevron; the redundant trailing Edit button is removed. Picker mode keeps its Edit button (there a row tap selects rather than edits).
  • Sheet close buttons use the semantic .cancellationAction placement (matching AppListPickerSheet).

Onboarding

  • The welcome screen now leads with the real app icon — a new appearance-aware AppLogo image set (light/dark variants) shown as a rounded tile — instead of a generic scissors symbol.
  • Both onboarding steps share one title font, icon size, and vertical spacing.

Intentionally unchanged (verified, not assumed)

  • Checkmark / xmark toolbar buttons — correct for the iOS 26 Liquid Glass convention (symbols are prioritized over text in .confirmationAction / .cancellationAction).
  • Day-picker selected color stays white-on-accent: the accent is the default system blue, where white is the platform-correct fill treatment (Increase Contrast only darkens the accent).
  • Dark mode, and the deliberate sentence-case section headers, were verified and left as-is.

Test plan

  • All 218 tests pass (RunAllTests) — unit + UI.
  • UITests updated for the new interactions: coordinate taps on the labeled toggles (dx:0.92), the suffixed stepper increment button (dailyLimitStepper-Increment), ContentUnavailableView identifiers moved to the description element, and management-row tap-to-edit (plus a "locked rows don't open" assertion).
  • New assertions cover the new accessibility behavior (toggle label, stepper spoken value).
  • Manual verification on iPhone 17 Pro (iOS 26.4): onboarding icon in light and dark, empty Rules/App Lists, New Rule chevrons, full-width labeled toggles, management row tap-to-edit + chevron, and the day picker at AX5 Dynamic Type (rendered via Xcode preview).

🤖 Generated with Claude Code

A sweep of the app's SwiftUI surfaces for HIG and accessibility
compliance:

- Hard Mode and Block Adult Content use full-width labeled Toggles, so
  the whole row is the tap target and VoiceOver reads a named switch.
- Budget steppers expose an accessibility label and spoken value, so
  VoiceOver announces the value as it changes.
- Empty Rules and App Lists states use ContentUnavailableView.
- New Rule preset rows use a disclosure chevron (matching the rule-type
  rows) instead of a misleading plus.circle.fill — both push the editor.
- App-list management rows are full-width tap-to-edit with a chevron;
  the redundant Edit button is dropped (picker mode keeps it, since a
  row tap there selects rather than edits).
- Sheet close buttons use the .cancellationAction placement.
- Onboarding leads with the real app icon (new appearance-aware AppLogo
  imageset) instead of a generic scissors symbol, and both steps share
  one title font, icon size, and spacing.
- Day-of-week letters shrink to fit at large Dynamic Type sizes instead
  of clipping, while staying seven-across.

UITests updated for the new interactions (coordinate taps on labeled
toggles, the suffixed stepper increment button, ContentUnavailableView
identifiers, and management row tap-to-edit). All 218 tests pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brendan-ch brendan-ch merged commit 61a4fe6 into main Jun 15, 2026
1 check passed
@brendan-ch brendan-ch deleted the chore/ui-hig-compliance branch June 15, 2026 20:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant