Map / List View Toggle Button
Component Detail
Description
Persistent toggle button always visible on the map screen that switches between the interactive map view and the accessible list view fallback. Keyboard focusable and announced to screen readers so users who cannot use the visual map can always access the list alternative.
view-toggle-button
Summaries
The Map / List View Toggle Button is a small component with outsized strategic importance: it ensures the peer mentor discovery feature is usable by all students, including those with visual impairments who rely on screen readers. By providing a persistent, accessible escape hatch to the list view, the platform avoids excluding a segment of users from a core feature — reducing legal and reputational risk around accessibility compliance (ADA, WCAG) and demonstrating the organization's commitment to inclusive design. This directly supports equity goals that are often central to the mission of mentoring programs.
This is a low-complexity, zero-dependency UI component deliverable within a day or two of focused development. It pairs tightly with the mentor-list-fallback-view component, so both should be scheduled in the same sprint to ensure end-to-end toggle functionality can be tested together. The primary delivery consideration is accessibility validation: the semantic label must be verified with VoiceOver (iOS) and TalkBack (Android) on real devices, not just emulators. There is no backend dependency or data model requirement.
Risk is minimal, but any changes to ViewMode enum values will require coordinated updates with the map screen and list fallback.
View Toggle Button is a stateless widget that emits onToggle(ViewMode newMode) to its parent and reflects the current mode via getCurrentMode(). The parent map screen owns the ViewMode state and passes it down, keeping this component purely presentational. Implement using Flutter's Semantics widget with a dynamic label (e.g., 'Switch to list view' / 'Switch to map view') that updates based on current mode to provide meaningful screen reader announcements. Use IconButton or a custom ToggleButton with sufficient tap target size (48x48dp minimum per Material accessibility guidelines).
No dependencies on services or data models — this component is intentionally minimal to maximize reusability.
Responsibilities
- Render toggle between map and list view modes
- Provide semantic label readable by screen readers
- Emit view-mode change event to parent screen
Interfaces
build(BuildContext context)
onToggle(ViewMode newMode)
getCurrentMode() → ViewMode
Relationships
Used Integrations (1)
External integrations and APIs this component relies on