Commit `e2da09fec3`

e2da09fec3d3d52ac6108b9256b2419405f76dd3

parent: 1c2830fbfc

Unsigned

cmc <hello@cleberg.net> · 2026-07-21 02:49 UTC

feat(a11y): Dynamic Type reflow and tap targets (#21 phase 3)

Takes the audit from 18 findings to 11 in dark mode. Everything that
remains is system-rendered or placeholder noise, characterised below.

The largest win was not where the plan expected. Every empty-state
heading reported as clipped text, and the cause was `Label`: it
constrains its own title, and `.fixedSize` applied to the Label does not
reach the `Text` inside. Splitting into `HStack { Image; Text }` and
putting the modifier on the Text cleared all four empty states at both
default and accessibility sizes.

That fix then caused a regression the audit caught immediately. `Label`
folds its image into the title's accessibility element; an HStack does
not, so the icon began announcing its raw SF Symbol name
("checklist.unchecked") to VoiceOver. Decorative icons split out of a
Label now carry .accessibilityHidden(true).

Tap targets:

- AppCopyButton was a literal 30x30 on nearly every data row. Now
  @ScaledMetric from 44, floored at AppLayout.minimumTapTarget —
  @ScaledMetric scales down below the default text size as well as up,
  so the floor is load-bearing.
- controlMinHeight was 42 in compact density, putting every collapsible
  section header and both Run buttons under the minimum.

Reflow:

- CardView's allowsHorizontalScroll defaulted to true, so nine call sites
  hid content behind a horizontal gesture instead of wrapping — a WCAG
  1.4.10 failure and the mechanism behind clipped rows at large text
  sizes. The default is now false, and the remaining opt-in is suppressed
  at accessibility sizes.
- Fixed .system(size:) point sizes replaced with text styles in the app
  and the widget.
- The widget is clamped at accessibility1, the one place clamping is
  correct: a widget canvas is a fixed size and WidgetKit truncates
  overflow with no scroll affordance.

Two hypotheses were tested and discarded rather than left in. Monospaced
fonts looked like the clipping culprit — the app is 82% monospaced and
hyphenates mid-word at accessibility sizes — but switching the empty
state to proportional changed nothing, and prose typography is a design
decision rather than an accessibility fix. Shortening search prompts and
the domain placeholder also changed nothing: placeholder text is reported
clipped regardless of length, so "Search" is flagged exactly as "Search
portfolio" was.

Not done: ViewThatFits reflow for BatchResultRowView and
WatchlistRowView. Those rows never render in the audit because the test
simulator has no tracked domains or batch results, so any change there
would be unverifiable. Absence of findings is absence of data.

Layout: unified · split

Docs/ACCESSIBILITY.md +21

	@@ -187,6 +187,27 @@ Pre-push rather than pre-commit deliberately: the suite takes ~85s, and at
187	pre-commit that blocks every commit. A hook routinely bypassed with	187	pre-commit that blocks every commit. A hook routinely bypassed with
188	`--no-verify` is worse than no hook, because it trains you to ignore it.	188	`--no-verify` is worse than no hook, because it trains you to ignore it.
189		189
		190	## Layout gotchas found the hard way
		191
		192	- `Label` clips its own title. Every empty-state heading reported as clipped
		193	text. `.fixedSize` applied to the `Label` does not reach the `Text` inside it,
		194	so the fix is to split it into an `HStack { Image; Text }` and put the modifier
		195	on the `Text`. Changing the font design did not help — that hypothesis was
		196	tested and discarded.
		197	- Splitting a `Label` exposes its icon to VoiceOver. `Label` folds the image
		198	into the title's accessibility element; an `HStack` does not, so the icon
		199	starts announcing its raw SF Symbol name ("checklist.unchecked"). Decorative
		200	icons split out of a `Label` need `.accessibilityHidden(true)`.
		201	- Placeholder text is always reported as clipped. Search prompts and
		202	`TextField` placeholders are flagged regardless of length — shortening
		203	"Search portfolio" to "Search" changed nothing. Treat `textClipped` findings on
		204	a `searchField` or `textField` element as noise rather than shortening useful
		205	prompts to chase them.
		206	- `AppLayout.minimumTapTarget` is the floor for every control. `@ScaledMetric`
		207	scales down below the default text size as well as up, so a scaled dimension
		208	needs `max(scaled, AppLayout.minimumTapTarget)` or it drops under 44pt for
		209	users who prefer smaller text.
		210
190	## Notes	211	## Notes
191		212
192	- Disabled controls are a false positive, and are suppressed. WCAG 1.4.3	213	- Disabled controls are a false positive, and are suppressed. WCAG 1.4.3

DomainDig/ContentView.swift +14 −2

     }
 }
+/// A card that wraps its content by default.
+///
+/// `allowsHorizontalScroll` used to default to `true`, so nine call sites put
+/// their content behind a horizontal gesture instead of letting it wrap — a
+/// WCAG 1.4.10 (Reflow) failure, and the mechanism behind clipped rows at large
+/// text sizes. It also forced VoiceOver and Switch Control users onto a nested
+/// scroll axis to reach data.
+///
+/// The default is now `false`. Where horizontal scrolling genuinely suits wide
+/// tabular content, it is still opt-in — but it is suppressed at accessibility
+/// text sizes, where wrapping always beats a hidden axis.
 struct CardView<Content: View>: View {
     @Environment(\.appDensity) private var appDensity
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     let allowsHorizontalScroll: Bool
     let content: Content
-    init(allowsHorizontalScroll: Bool = true, @ViewBuilder content: () -> Content) {
+    init(allowsHorizontalScroll: Bool = false, @ViewBuilder content: () -> Content) {
         self.allowsHorizontalScroll = allowsHorizontalScroll
         self.content = content()
     }
     var body: some View {
         Group {
-            if allowsHorizontalScroll {
+            if allowsHorizontalScroll, !dynamicTypeSize.isAccessibilitySize {
                 ScrollView(.horizontal) {
                     cardContent
                         .scrollTargetLayout()

DomainDig/DashboardView.swift +2 −1

                     .font(appDensity.font(.caption, design: .default, weight: .semibold))
                     .foregroundStyle(Color(.appTextSecondary))
                 Text("\(value)")
-                    .font(.system(size: 28, weight: .bold, design: .rounded))
+                    // Was a fixed 28pt, which ignored Dynamic Type entirely.
+                    .font(.system(.title, design: .rounded, weight: .bold))
                     .foregroundStyle(.primary)
                 HStack {
                     Circle()

DomainDig/DomainDigUI.swift +38 −5

                 rowSpacing: 4,
                 rowMinHeight: 30,
                 controlVerticalPadding: 10,
-                controlMinHeight: 42,
+                // Was 42, which put every control using it under the 44pt
+                // minimum in compact density — section headers, Run, Run Batch.
+                controlMinHeight: AppLayout.minimumTapTarget,
                 cardCornerRadius: 10
             )
         case .comfortable:
     }
 }
+/// Layout constants that are not density-dependent.
+enum AppLayout {
+    /// The HIG minimum for an interactive control, and WCAG 2.5.8's floor.
+    /// Controls scale up from here with Dynamic Type; none may sit below it.
+    static let minimumTapTarget: CGFloat = 44
+}
 struct AppDensityMetrics: Equatable {
     let sectionSpacing: CGFloat
     let cardSpacing: CGFloat
     @Environment(\.appDensity) private var appDensity
     @State private var didCopy = false
+    /// Grows with Dynamic Type. The `max(_, minimumTapTarget)` floor matters
+    /// because `@ScaledMetric` also scales *down* below the default text size,
+    /// which would push this back under the 44pt minimum.
+    @ScaledMetric(relativeTo: .caption) private var size: CGFloat = AppLayout.minimumTapTarget
     let value: String
     let label: String
         } label: {
             Image(systemName: didCopy ? "checkmark" : "doc.on.doc")
                 .font(appDensity.font(.caption))
-                .foregroundStyle(didCopy ? Color(.statusPositive) : .secondary)
+                .foregroundStyle(didCopy ? Color(.statusPositive) : Color(.appTextSecondary))
-                .frame(width: 30, height: 30)
+                .frame(width: max(size, AppLayout.minimumTapTarget), height: max(size, AppLayout.minimumTapTarget))
                 .background(Color(.appSurfaceElevated))
                 .clipShape(RoundedRectangle(cornerRadius: 8))
         }
     var body: some View {
         VStack(alignment: .leading, spacing: appDensity.metrics.cardSpacing) {
-            Label(title, systemImage: systemImage)
+            // `Text(message)` already carried `fixedSize`; the title and
+            // suggestion did not, which is why the audit reported the *title*
+            // clipped on every empty state while the body beneath it wrapped.
+            // Deliberately an HStack rather than `Label`. `Label` constrains its
+            // own title text and `.fixedSize` applied to the Label does not
+            // reach the Text inside, so every empty-state heading reported as
+            // clipped. Splitting it lets the modifier land on the Text itself.
+            // Verified: doing this alone cleared the finding on all four empty
+            // states; changing the font design did not.
+            HStack(alignment: .firstTextBaseline, spacing: 8) {
+                // Decorative. `Label` used to fold the icon into the title's
+                // element; splitting them exposed it as its own, announcing the
+                // raw SF Symbol name ("checklist.unchecked") to VoiceOver.
+                Image(systemName: systemImage)
+                    .accessibilityHidden(true)
+                Text(title)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .multilineTextAlignment(.leading)
+            }
                 .font(appDensity.font(.headline, weight: .semibold))
                 .foregroundStyle(.primary)
             Text(suggestion)
                 .font(appDensity.font(.caption))
                 .foregroundStyle(Color(.statusInfo))
+                .fixedSize(horizontal: false, vertical: true)
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding(appDensity.metrics.cardPadding)
                 HStack(alignment: .center, spacing: 10) {
                     VStack(alignment: .leading, spacing: 3) {
                         Text(title)
-                            .font(appDensity.font(.headline, design: .default, weight: .semibold))
+                            .font(appDensity.font(.headline, weight: .semibold))
                             .foregroundStyle(.primary)
                         if let subtitle {
                             Text(subtitle)

DomainDigWidget/DomainDigPortfolioWidget.swift +9 −3

         StaticConfiguration(kind: kind, provider: DomainDigProvider()) { entry in
             DomainDigWidgetView(data: entry.data)
                 .containerBackground(.fill.tertiary, for: .widget)
+                // Clamped here and ONLY here. A widget canvas is a fixed
+                // system-defined size and WidgetKit truncates overflow with no
+                // scroll affordance, so unclamped accessibility sizes produce
+                // less readable output, not more. In-app there is always a
+                // scroll view, so nothing there is clamped.
+                .dynamicTypeSize(...DynamicTypeSize.accessibility1)
         }
         .configurationDisplayName("Domain Portfolio")
         .description("Health and certificate status for your tracked domains.")
             .foregroundStyle(Color(.appTextSecondary))
             Text("\(data.totalDomains)")
-                .font(.system(size: 34, weight: .bold, design: .rounded))
+                .font(.system(.largeTitle, design: .rounded, weight: .bold))
             Text("tracked")
                 .font(.caption2)
                 .foregroundStyle(Color(.appTextSecondary))
                 .font(.headline)
                 .foregroundStyle(color)
             Text(label)
-                .font(.system(size: 9))
+                .font(.caption2)
                 .foregroundStyle(Color(.appTextSecondary))
         }
         .frame(maxWidth: .infinity, alignment: .leading)
                 .frame(width: 8, height: 8)
             if domain.isPinned {
                 Image(systemName: "pin.fill")
-                    .font(.system(size: 8))
+                    .font(.caption2)
                     .foregroundStyle(Color(.appTextSecondary))
             }
             Text(domain.domain)

Commit e2da09fec3

Commit `e2da09fec3`