Navigate the App via Bottom Tab Bar
The bottom navigation bar provides persistent, one-tap access to all five primary tab destinations throughout the app. The active tab is visually highlighted with a color from the design token system so users always know where they are. Each tab icon and label meets WCAG 2.2 AA contrast requirements. Tapping a tab that is already active scrolls the tab's content back to the top.
User Story
Acceptance Criteria
- Given the user is authenticated, when the app loads, then the bottom navigation bar displays five tabs: Home, Contacts, Add, Work, and Notifications
- Given the bottom nav is visible, when the user taps a tab, then the corresponding screen is shown immediately without a full reload
- Given a tab is active, when the user views the bottom nav, then the active tab icon and label are visually distinct from inactive tabs using design token colors
- Given the user is on a nested screen within a tab, when they tap the same tab in the bottom nav, then they are returned to the root of that tab
- Given any screen in the app, when the bottom nav is rendered, then all labels and icons meet WCAG 2.2 AA contrast ratio requirements (minimum 4.5:1 for text)
Business Value
The bottom navigation bar is the primary wayfinding mechanism for the entire application. Without it, no feature is discoverable or reachable. A clear, accessible tab bar directly reduces the cognitive load identified as a top concern across all three organizations, enabling peer mentors with limited digital skills, stroke patients, and visually impaired users to orient themselves instantly.