Chapter Affiliations Panel
Component Detail
Description
Displays all chapter memberships for a contact on their profile screen, showing up to 5 simultaneous local chapter affiliations. Renders each chapter as a labeled badge or card with chapter name and role context, supporting screen reader accessibility.
chapter-affiliations-panel
Summaries
The Chapter Affiliations Panel gives coordinators and staff immediate visibility into every chapter a contact belongs to, all on a single profile screen. For organizations managing contacts across multiple local chapters, this clarity eliminates the need to navigate separate screens or cross-reference external records to understand a person's full organizational footprint. This translates directly into faster onboarding decisions, fewer coordination errors, and a more professional staff experience. The component's full accessibility support ensures the platform can be used by staff with disabilities, supporting inclusion goals and reducing legal accessibility risk.
This is a medium-complexity mobile UI component that depends on chapter-membership-cubit for data. The main delivery risk is accessibility compliance: WCAG 2.2 AA contrast ratios and VoiceOver/TalkBack semantic labels must be validated on both iOS and Android devices before release. Plan dedicated QA time for accessibility testing — this is often underestimated. The component must gracefully handle the full range of 1 to 5 chapter memberships, including edge cases like a contact with no affiliations.
Localization of role labels and status text should be confirmed with the content team early. Estimate 4–6 days for implementation including accessibility review and cross-platform manual testing.
This is a stateless Flutter widget that receives a List
Primary vs secondary chapter affiliations should be visually differentiated using a design-system-approved indicator (e.g., a star icon or 'Primary' label). The widget should handle empty lists gracefully with an empty-state message. No business logic should live here — all filtering and sorting of memberships belongs in the cubit.
Responsibilities
- Render list of all affiliated chapters for a contact
- Display chapter role and membership status per chapter
- Support WCAG 2.2 AA contrast and VoiceOver/TalkBack semantics
- Indicate primary vs secondary chapter affiliations
Interfaces
ChapterAffiliationsPanel({required List<ContactChapter> memberships})
build(BuildContext context)
onChapterTap(ContactChapter chapter)
onEditAffiliations()
Relationships
Related Data Entities (1)
Data entities managed by this component