Inline Contextual Help Widget
Component Detail
Description
Provides field-level and screen-level help text inline within the UI, replacing separate help sections. Help is revealed by tapping a labelled icon adjacent to the element it describes. Keeps assistance within the cognitive context of the current task.
inline-contextual-help-widget
Summaries
The Inline Contextual Help Widget keeps assistance within reach without pulling users away from the task at hand. Rather than routing users to a separate help section — where they lose their place and often don't return — help text appears instantly next to the element it describes. This improves form completion rates, reduces abandonment due to confusion, and lowers inbound support volume. For users who are less digitally confident or encounter unfamiliar terminology in activity forms, this in-context guidance is the difference between successful self-service and a failed interaction.
Shared across the entire application, it delivers this benefit consistently at low incremental cost per feature.
This is a low-complexity component with a content dependency on the help-content-registry, which must be populated for every screen and field that uses the widget. Content authoring — writing clear, concise Norwegian help text for each help key — is a non-development effort that must be planned and resourced alongside feature development. Tap target compliance (44×44 dp minimum per WCAG 2.5.5) must be verified through manual testing on physical devices, not just simulators. Because the help content is decoupled from the widget via the registry, content updates do not require code changes or app releases, reducing ongoing maintenance overhead.
The widget itself can be delivered and tested independently of any specific feature.
InlineContextualHelpWidget accepts a helpKey (String) prop used to look up content from the help-content-registry dependency. getHelpContent(helpKey) returns a HelpContent object containing title and body strings keyed by a compound identifier of screen ID and field ID. toggleHelp() manages local expanded/collapsed state with a smooth AnimatedCrossFade or SizeTransition to reveal buildHelpOverlay(), which renders the help text in a visually distinct but inline container. The help trigger icon is constrained to a minimum size of 44×44 logical pixels to satisfy WCAG 2.5.5.
Missing help keys should degrade gracefully — log a warning in debug mode but render nothing in production, avoiding broken UI states. Content registry updates are hot-reloadable without widget changes.
Responsibilities
- Toggle expanded help text on tap with smooth animation
- Source help text from a content registry keyed by screen and field ID
- Ensure help trigger has a minimum tap target of 44×44 dp per WCAG 2.5.5
Interfaces
InlineContextualHelpWidget({helpKey})
toggleHelp()
getHelpContent(helpKey)
buildHelpOverlay()