Skip to content

Onboarding: make the model-card info (ⓘ) icon a real button with a click-to-open popover#465

Open
geekrebel wants to merge 1 commit into
altic-dev:mainfrom
geekrebel:fix/onboarding-info-button-popover
Open

Onboarding: make the model-card info (ⓘ) icon a real button with a click-to-open popover#465
geekrebel wants to merge 1 commit into
altic-dev:mainfrom
geekrebel:fix/onboarding-info-button-popover

Conversation

@geekrebel

Copy link
Copy Markdown

Description

On the onboarding "Choose your voice engine" step, each model card has an info (ⓘ) glyph in its top-right corner. Today that glyph is a static Image whose details are only revealed through the macOS help tag (tooltip) after hovering the pointer for a moment.

That has a few problems:

  • The ⓘ glyph reads as an interactive control, but clicking it does nothing, so people (myself included) click it, get no response, and assume it's broken.
  • The information is effectively hover-only. It isn't reachable by keyboard or by VoiceOver focus, and there's no hover on a trackpad-tap or touch interaction, so the content is gated behind one specific input method.
  • The help tag's appearance is delayed and easy to miss, so the model details (size, description) are hard to discover at exactly the moment people are choosing a model.

This PR turns the glyph into an actual Button that toggles a small .popover with the model's name, engine + download size, and description. The help tag is kept as a supplement, and the control now has a proper accessibility label and hint.

It reuses the project's existing info-popover pattern from CustomDictionaryView (the "About Vocabulary Boosting" button), so it's consistent with how the rest of the app already surfaces contextual help.

Reasoning (Apple Human Interface Guidelines)

  • Help content / tooltips are a supplement, not the primary path. The HIG's guidance on offering help is that help tags should augment a clear interface, not be the only way to reach information people need to make a choice. Relying on the hover tooltip as the sole disclosure mechanism inverts that. A popover triggered by an explicit control is the HIG-recommended way to "provide additional detail or functionality in a transient view" on demand.
  • Hover is not an accessible affordance. HIG Accessibility guidance is to avoid making content reachable only by pointer hover, and to ensure every meaningful element is operable via keyboard and assistive technology. A bare Image is not focusable; a Button is keyboard-focusable, Space/Return-activatable, gets a focus ring, and is exposed to VoiceOver as a button with a hint rather than as a static image.
  • The ⓘ glyph is a recognized interactive control. Across Apple's platforms the "i" info button denotes a tappable control that reveals more information or configuration. Rendering it as a non-interactive image breaks that platform convention and the principle that controls should look and behave consistently with their standard meaning.
  • Larger, well-defined hit target. The control is bumped to a 28×28 tap target with a circular content shape, in line with HIG guidance on comfortable hit targets, instead of relying on a precise hover over a small glyph.

Type of Change

  • 🐞 Bug fix (non-breaking change which fixes an issue)

Testing

  • Tested on Intel Mac
  • Tested on Apple Silicon Mac
  • Ran linter locally: swiftlint --strict
  • Ran formatter locally: swiftformat

I wasn't able to run the full app, SwiftLint, or SwiftFormat in my environment (no full Xcode toolchain / the linters aren't installed here), so I've left those boxes unchecked rather than claim them. The change is small and isolated to OnboardingFlowView, uses only APIs already present in this file, and mirrors the existing CustomDictionaryView popover pattern, so it should sail through CI's build. Happy to adjust styling to match SwiftFormat/SwiftLint output if CI flags anything.

Notes

  • Visual appearance of the icon is unchanged at rest (same glyph, color, and font); the only at-rest difference is a slightly larger hit area. The new behavior is: click (or keyboard-activate) to open a popover; the existing hover tooltip still works.
  • No new dependencies, no behavior change to model selection/download logic.

Screenshots / Video

I couldn't build/run locally to capture a recording. The change adds a click-triggered popover to the existing ⓘ on each onboarding model card; the popover contains the model name, engine + download size, and description (the same content previously shown only in the hover tooltip).

…-open popover

The info icon on each voice-engine card in onboarding was a static
Image whose details were only reachable via the hover help tag. The
glyph reads as an interactive control but had no click action and was
not keyboard/VoiceOver focusable, so the information was effectively
hover-only.

Wrap it in a Button that toggles a popover (reusing the existing
info-popover pattern from CustomDictionaryView), keep the help tag as a
supplement, and give it a proper accessibility label and hint.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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