🏠 Overview › 🎯 Features ›🎯 Navigation & Gesture Accessibility

Navigation & Gesture Accessibility

Feature Detail

low complexity extracted Accessibility & Universal Design Confidence: 100%
3
Components
198
Shared
14
User Stories
Yes
Analyzed

Description

A navigation pattern that relies exclusively on explicit tap/button interactions rather than gesture shortcuts, with a persistent back button on all screens and vertical scrolling as the only scroll axis. This directly addresses the workshop requirement to avoid swipe-to-dismiss and horizontal carousels, which are inaccessible to users with motor impairments, screen reader users, and older adults unfamiliar with gesture conventions. All modal sheets and dialogs must be dismissible via a clearly labelled close button in addition to any swipe gesture. Deep navigation paths must always show a back control. The bottom navigation bar must preserve tab state so users never lose their place when switching sections, reducing re-navigation burden for users with motor fatigue.

Analysis

Business Value

Directly requested across all three workshop organisations. Improves usability for the widest range of users including motor-impaired users, older adults, and screen reader users who cannot reliably perform swipe gestures. Reduces drop-off during activity registration — the single most critical user flow.

Implementation Notes

Use StatefulShellRoute (already in current architecture) to preserve tab state. Add explicit close IconButton to every ModalBottomSheet and AlertDialog. Disable or never rely on DismissibleRoute swipe-back as the sole dismissal mechanism. Audit with Switch Access (Android) and Full Keyboard Access (iOS) to confirm all flows are operable without gestures.

Components (201)

Service Layer (1)

service Navigation Accessibility Service medium

Data Layer (1)

data Navigation State Repository low

Infrastructure (1)

infrastructure Accessibility Audit Runner medium

Shared Components

These components are reused across multiple features

User Interface (59)

ui Role Switch Widget medium Shared ui Role-Aware Bottom Navigation medium Shared ui Activity Type Selection Screen low Shared ui Speech-to-Text Field Overlay medium Shared ui Receipt Capture Widget medium Shared ui Peer Mentor Single Selector low Shared ui Proxy Audit Badge Widget low Shared ui Export Period Picker low Shared ui Contact Card Widget low Shared ui Contact Search Bar low Shared ui Peer Mentor Card Widget low Shared ui Activity History List low Shared ui Multi-Chapter Affiliation Chip Widget medium Shared ui Certification Status Badge low Shared ui Duplicate Activity Warning Dialog medium Shared ui Mentor Multi-Select Widget medium Shared ui Map Filter Panel medium Shared ui Claim Status Badge low Shared ui Export Date Range Picker low Shared ui Custom Date Range Picker low Shared ui Duplicate Activity Warning Dialog low Shared ui Proxy Activity Form medium Shared ui Proxy Peer Mentor Selector medium Shared ui Expected Return Date Picker low Shared ui Pause Activation Screen low Shared ui Pause Status Indicator low Shared ui Admin KPI Stat Widget low Shared ui Organisation Hierarchy Navigator high Shared ui Bufdir Period Selector Widget low Shared ui Export History List medium Shared ui Activity Type Donut Chart medium Shared ui Monthly Activity Bar Chart medium Shared ui Statistics Period Filter Bar low Shared ui Statistics Summary Cards low Shared ui Notification Badge Widget low Shared ui Certificate Expiry Status Indicator low Shared ui Animated Stat Card Widget medium Shared ui In-App Notification Banner low Shared ui Accessible Modal Sheet Widget high Shared ui Live Region Announcer medium Shared ui Semantics Wrapper Widget medium Shared ui Sensitive Field Warning Dialog high Shared ui Confirm Before Submit Screen medium Shared ui Inline Contextual Help Widget low Shared ui Labelled Navigation Bar low Shared ui Plain Language Error Display low Shared ui Single-Action Screen Layout medium Shared ui Wizard Progress Indicator low Shared ui Accessible Text Style System medium Shared ui Accessible Touch Target Wrapper low Shared ui Contrast-Safe Color Palette Widget medium Shared ui Accessible Bottom Navigation Bar medium Shared ui Modal Close Button low Shared ui Persistent Back Button low Shared ui Vertical Scroll Container low Shared ui Organization Card Widget low Shared ui Terminology-Aware Text Widget low Shared ui FeatureGate Widget low Shared ui Chapter Switcher medium Shared

Service Layer (52)

service Authentication Service medium Shared service Authentication Session Manager medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Permission Checker Service medium Shared service Role State Manager medium Shared service No-Access Route Guard low Shared service Activity Type Metadata Resolver low Shared service Chapter Scope Resolver medium Shared service Organisation Hierarchy Resolver medium Shared service Coordinator Notification Service medium Shared service Duplicate Activity Detection Service high Shared service Mentor Filter Service low Shared service Receipt Threshold Validator low Shared service Approval Status Notification Service medium Shared service Threshold Evaluation Service medium Shared service Declaration Encryption Service high Shared service Organization Feature Flag Service low Shared service Participant Deduplication Service high Shared service Reporting Period Service medium Shared service Activity Attribution Service low Shared service Proxy Duplicate Detection Service medium Shared service Pause Management Service medium Shared service Pause Notification Service medium Shared service Admin Export Service medium Shared service Admin Row-Level Security Guard high Shared service Organisation Hierarchy Service high Shared service User Management Service high Shared service Role Access Validator low Shared service Peer Mentor Stats Aggregator medium Shared service Push Notification Dispatcher medium Shared service Notification Preference Service low Shared service Scenario Deep-Link Router medium Shared service Scenario Notification Content Builder medium Shared service Badge Criteria Integration medium Shared service Activity Summary Aggregator low Shared service Focus Management Service medium Shared service Screen Reader Detection Service medium Shared service Sensitive Field Privacy Guard high Shared service Plain Language Content Service medium Shared service Wizard State Manager medium Shared service Tab State Manager medium Shared service Organization Route Guard medium Shared service Tenant Context Service high Shared service Label Key Resolver Service low Shared service Organization Labels Notifier medium Shared service FeatureFlagProvider (Riverpod) medium Shared service Access Scope Service high Shared service Hierarchy Aggregation Service high Shared service Hierarchy Service high Shared service Unit Assignment Service medium Shared

Data Layer (33)

data Authentication Repository low Shared data Auth Token Store low Shared data Secure Session Storage low Shared data Activity Type Cache Provider medium Shared data Receipt Storage Adapter medium Shared data Proxy Contact List Provider low Shared data Contact Repository medium Shared data Contact Detail Repository medium Shared data Peer Mentor Repository low Shared data Mentor Status Repository low Shared data Contact Chapter Repository medium Shared data Contact Cache Sync Repository low Shared data Organisation Rate Configuration Repository low Shared data Multi-Organization Data Isolator medium Shared data Bufdir Aggregation Repository low Shared data Report File Storage Client low Shared data Certification Status Repository low Shared data Peer Mentor Status Repository medium Shared data Statistics Cache Manager low Shared data In-App Notification Repository low Shared data Pause Status Record Repository low Shared data Activity Aggregation Repository medium Shared data Notification Preferences Repository low Shared data Scenario Notification Repository medium Shared data Sensitive Field Configuration low Shared data Error Message Registry low Shared data Help Content Registry low Shared data Wizard Draft Repository low Shared data Design Token Provider medium Shared data Organization Repository medium Shared data Terminology Local Cache Adapter low Shared data Organization Unit Repository high Shared data Unit Assignment Repository medium Shared

Infrastructure (54)

infrastructure Keyboard-Aware Layout Utility low Shared infrastructure Supabase Auth Client low Shared infrastructure Deep Link / OAuth Redirect Handler medium Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase Session Manager medium Shared infrastructure URL Launcher Utility low Shared infrastructure Local Storage Adapter low Shared infrastructure Supabase Activity Client low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client low Shared infrastructure Organisation Field Config Loader medium Shared infrastructure Speech-to-Text Adapter medium Shared infrastructure File Download Handler low Shared infrastructure Duplicate Reviewed Flag Middleware low Shared infrastructure Contact RLS Query Builder low Shared infrastructure Contact Form Validator low Shared infrastructure Design Token Theme low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client Provider low Shared infrastructure Search Debounce Utility low Shared infrastructure Expense Type Analytics Tracker low Shared infrastructure Receipt Image Picker Integration low Shared infrastructure CSV / JSON File Generator medium Shared infrastructure Coordinator Role Guard low Shared infrastructure Nightly Job Scheduler medium Shared infrastructure Supabase RLS Policy Configuration high Shared infrastructure Export File Storage Adapter low Shared infrastructure Supabase Storage Adapter low Shared infrastructure Peer Mentor Pause Management Service medium Shared infrastructure Push Notification Service medium Shared infrastructure fl_chart Adapter medium Shared infrastructure Push Notification Service low Shared infrastructure FCM Push Notification Sender medium Shared infrastructure FCM Notification Dispatcher medium Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Supabase Realtime Subscription Service medium Shared infrastructure Organisation Data Isolation Guard low Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Deep Link Handler medium Shared infrastructure QR Code Generator low Shared infrastructure Share Sheet Bridge low Shared infrastructure Semantics Service Facade medium Shared infrastructure Accessibility Design Token Enforcer medium Shared infrastructure Accessible Theme Builder medium Shared infrastructure Navigation Route Configuration medium Shared infrastructure Accessibility Live Region Announcer low Shared infrastructure Feature Flag Provider low Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase RLS Tenant Scope Configurator medium Shared infrastructure Label Key Registry low Shared infrastructure Terminology Riverpod Providers low Shared infrastructure WCAG Semantics Label Resolver low Shared infrastructure Feature Flag Key Constants low Shared infrastructure RLS Policy Manager high Shared

User Stories (14)

Navigation Accessibility Audit Integration in CI Pipeline
medium 8 pts

As a As a Peer Mentor (Likeperson)

I want the app to have been tested for navigation accessibility regressions automatically as part of each release build

So that I can trust that accessibility features I rely on will not break silently between app updates, and any regression is caught before it reaches my device

Acceptance Criteria
  • Given a CI build is triggered, when the accessibility audit runner executes, then it checks all navigation-related widgets for missing semantic labels and reports results
  • Given a developer introduces a navigation widget with a touch target below 44×44pt, when the CI build runs, then the audit fails with an error message identifying the widget, screen, and required minimum size
  • Given a modal is added without a close button or focus-trap semantics, when the CI build runs, then the lint check flags the missing accessibility pattern
  • +2 more
View Full Story →
Navigation Accessibility Audit Integration in CI Pipeline
medium 8 pts

As a As a Coordinator

I want the app to have been tested for navigation accessibility regressions automatically as part of each release build

So that I can trust that accessibility features I rely on will not break silently between app updates, and any regression is caught before it reaches my device

Acceptance Criteria
  • Given a CI build is triggered, when the accessibility audit runner executes, then it checks all navigation-related widgets for missing semantic labels and reports results
  • Given a developer introduces a navigation widget with a touch target below 44×44pt, when the CI build runs, then the audit fails with an error message identifying the widget, screen, and required minimum size
  • Given a modal is added without a close button or focus-trap semantics, when the CI build runs, then the lint check flags the missing accessibility pattern
  • +2 more
View Full Story →
Vertical Scroll as Primary Scroll Pattern with No Horizontal Swipe Dependency
high 3 pts

As a As a Peer Mentor (Likeperson)

I want all primary content in the app to scroll vertically, with no required horizontal swipe to reveal hidden content or actions

So that I can access all content using a single-direction scroll motion, which is more accessible for users with motor impairments and aligns with familiar usage norms

Acceptance Criteria
  • Given I am viewing any list screen (contacts, activities, notifications), when I scroll with one finger vertically, then all items are reachable without any horizontal scroll
  • Given a list item has swipe actions (e.g., delete or archive), when I long-press the item or tap an overflow menu icon, then the same actions are available without horizontal swiping
  • Given I am using switch access or keyboard navigation, when I navigate through a list, then all items and their actions are reachable using linear focus traversal without triggering scroll
  • +2 more
View Full Story →
Tab State Preservation Across Navigation Events
high 5 pts

As a As a Peer Mentor (Likeperson)

I want the app to remember my position within each tab when I switch to another tab and return

So that I do not lose my place or have to re-scroll to find where I was, which is especially important when I have a cognitive disability or am in the middle of a multi-step task

Acceptance Criteria
  • Given I have scrolled halfway down the Contacts list, when I switch to the Home tab and then return to Contacts, then the list is scrolled to the same position without reloading
  • Given I have navigated to a contact detail screen within the Contacts tab, when I switch to the Notifications tab and return to Contacts, then the contact detail screen is still displayed
  • Given I am using a screen reader and return to a previously visited tab, when the tab regains focus, then the focus is restored to the element I last interacted with
  • +2 more
View Full Story →
Screen Reader Focus Management After Navigation Events
high 8 pts

As a As a Peer Mentor (Likeperson)

I want the screen reader focus to always land in a logical, predictable location after every navigation event, including screen pushes, pops, tab switches, and modal opens

So that I never need to manually search for where focus has gone after a transition, which would be disorienting and slow down my workflow

Acceptance Criteria
  • Given I am using VoiceOver and I tap a contact card to open the contact detail screen, when the detail screen finishes rendering, then VoiceOver focus is on the contact's name heading at the top of the screen
  • Given I am using VoiceOver on a contact detail screen and I activate the back button, when the previous screen appears, then focus is on the contact card I originally tapped
  • Given I open the activity registration bottom sheet, when the sheet opens, then VoiceOver focus moves to the sheet's title or the first form field
  • +2 more
View Full Story →
Vertical Scroll as Primary Scroll Pattern with No Horizontal Swipe Dependency
high 3 pts

As a As a Coordinator

I want all primary content in the app to scroll vertically, with no required horizontal swipe to reveal hidden content or actions

So that I can access all content using a single-direction scroll motion, which is more accessible for users with motor impairments and aligns with familiar usage norms

Acceptance Criteria
  • Given I am viewing any list screen (contacts, activities, notifications), when I scroll with one finger vertically, then all items are reachable without any horizontal scroll
  • Given a list item has swipe actions (e.g., delete or archive), when I long-press the item or tap an overflow menu icon, then the same actions are available without horizontal swiping
  • Given I am using switch access or keyboard navigation, when I navigate through a list, then all items and their actions are reachable using linear focus traversal without triggering scroll
  • +2 more
View Full Story →
Tab State Preservation Across Navigation Events
high 5 pts

As a As a Coordinator

I want the app to remember my position within each tab when I switch to another tab and return

So that I do not lose my place or have to re-scroll to find where I was, which is especially important when I have a cognitive disability or am in the middle of a multi-step task

Acceptance Criteria
  • Given I have scrolled halfway down the Contacts list, when I switch to the Home tab and then return to Contacts, then the list is scrolled to the same position without reloading
  • Given I have navigated to a contact detail screen within the Contacts tab, when I switch to the Notifications tab and return to Contacts, then the contact detail screen is still displayed
  • Given I am using a screen reader and return to a previously visited tab, when the tab regains focus, then the focus is restored to the element I last interacted with
  • +2 more
View Full Story →
Screen Reader Focus Management After Navigation Events
high 8 pts

As a As a Coordinator

I want the screen reader focus to always land in a logical, predictable location after every navigation event, including screen pushes, pops, tab switches, and modal opens

So that I never need to manually search for where focus has gone after a transition, which would be disorienting and slow down my workflow

Acceptance Criteria
  • Given I am using VoiceOver and I tap a contact card to open the contact detail screen, when the detail screen finishes rendering, then VoiceOver focus is on the contact's name heading at the top of the screen
  • Given I am using VoiceOver on a contact detail screen and I activate the back button, when the previous screen appears, then focus is on the contact card I originally tapped
  • Given I open the activity registration bottom sheet, when the sheet opens, then VoiceOver focus moves to the sheet's title or the first form field
  • +2 more
View Full Story →
Persistent Back Button Navigation Without Swipe Gestures
critical 3 pts

As a As a Peer Mentor (Likeperson)

I want to navigate backwards through the app using a clearly visible back button on every screen rather than relying on swipe gestures

So that I can use the app confidently even if I have limited fine motor control, use an assistive device, or am unfamiliar with gesture-based navigation patterns

Acceptance Criteria
  • Given I am on any secondary or detail screen, when the screen renders, then a back button is visible in the top-left header area with a minimum touch target of 44×44pt
  • Given I am using a screen reader (VoiceOver), when I navigate to the back button, then it is announced as 'Go back' or the equivalent localized label with role 'button'
  • Given I tap the back button, when the action completes, then I am returned to the immediately preceding screen with focus restored to the element I was interacting with
  • +2 more
View Full Story →
Accessible Modal Sheet with Guaranteed Close Control
critical 3 pts

As a As a Peer Mentor (Likeperson)

I want every modal bottom sheet and dialog to have a clearly visible, labelled close button that I can always activate without swiping down or tapping outside the modal

So that I can dismiss modals even if I have limited motor control, use switch access, or if the modal overlays content I need to avoid touching

Acceptance Criteria
  • Given a bottom sheet modal opens, when the sheet finishes animating, then a close or cancel button is visible in the top area of the sheet with a minimum touch target of 44×44pt
  • Given I am using VoiceOver and a modal opens, when the sheet renders, then screen reader focus automatically moves to the modal's title or first focusable element
  • Given a modal is open and I activate the close button via switch access or VoiceOver double-tap, when the button is activated, then the modal is dismissed and focus returns to the element that triggered the modal
  • +2 more
View Full Story →
Accessible Bottom Navigation Bar with Screen Reader Announcements
critical 5 pts

As a As a Peer Mentor (Likeperson)

I want the bottom navigation bar to be fully operable with a screen reader, with each tab announced by name, current state, and position within the tab set

So that I can switch between the Home, Contacts, Add, Work, and Notifications sections of the app without needing to see the screen or rely on visual cues alone

Acceptance Criteria
  • Given I am using VoiceOver and focus on the bottom navigation bar, when I swipe through tabs, then each tab is announced with its label, selected state, and index (e.g., 'Home, tab, selected, 1 of 5')
  • Given the Notifications tab has unread notifications, when VoiceOver focuses on it, then it announces the unread count (e.g., 'Notifications, 3 unread, tab, 2 of 5')
  • Given I activate a tab using a screen reader double-tap, when the new screen loads, then a live region announces the screen name within 500 milliseconds
  • +2 more
View Full Story →
Persistent Back Button Navigation Without Swipe Gestures
critical 3 pts

As a As a Coordinator

I want to navigate backwards through the app using a clearly visible back button on every screen rather than relying on swipe gestures

So that I can use the app confidently even if I have limited fine motor control, use an assistive device, or am unfamiliar with gesture-based navigation patterns

Acceptance Criteria
  • Given I am on any secondary or detail screen, when the screen renders, then a back button is visible in the top-left header area with a minimum touch target of 44×44pt
  • Given I am using a screen reader (VoiceOver), when I navigate to the back button, then it is announced as 'Go back' or the equivalent localized label with role 'button'
  • Given I tap the back button, when the action completes, then I am returned to the immediately preceding screen with focus restored to the element I was interacting with
  • +2 more
View Full Story →
Accessible Modal Sheet with Guaranteed Close Control
critical 3 pts

As a As a Coordinator

I want every modal bottom sheet and dialog to have a clearly visible, labelled close button that I can always activate without swiping down or tapping outside the modal

So that I can dismiss modals even if I have limited motor control, use switch access, or if the modal overlays content I need to avoid touching

Acceptance Criteria
  • Given a bottom sheet modal opens, when the sheet finishes animating, then a close or cancel button is visible in the top area of the sheet with a minimum touch target of 44×44pt
  • Given I am using VoiceOver and a modal opens, when the sheet renders, then screen reader focus automatically moves to the modal's title or first focusable element
  • Given a modal is open and I activate the close button via switch access or VoiceOver double-tap, when the button is activated, then the modal is dismissed and focus returns to the element that triggered the modal
  • +2 more
View Full Story →
Accessible Bottom Navigation Bar with Screen Reader Announcements
critical 5 pts

As a As a Coordinator

I want the bottom navigation bar to be fully operable with a screen reader, with each tab announced by name, current state, and position within the tab set

So that I can switch between the Home, Contacts, Add, Work, and Notifications sections of the app without needing to see the screen or rely on visual cues alone

Acceptance Criteria
  • Given I am using VoiceOver and focus on the bottom navigation bar, when I swipe through tabs, then each tab is announced with its label, selected state, and index (e.g., 'Home, tab, selected, 1 of 5')
  • Given the Notifications tab has unread notifications, when VoiceOver focuses on it, then it announces the unread count (e.g., 'Notifications, 3 unread, tab, 2 of 5')
  • Given I activate a tab using a screen reader double-tap, when the new screen loads, then a live region announces the screen name within 500 milliseconds
  • +2 more
View Full Story →