🏠 Overview › 🎯 Features ›🎯 Contact List & Search

Contact List & Search

Feature Detail

medium complexity extracted Contacts Confidence: 100%
4
Components
18
Shared
0
User Stories
Yes
Analyzed

Description

The Contact List & Search feature gives peer mentors a scoped view of their own contacts and coordinators a full association-level view. Built-in search locates contacts by name or phone number instantly without additional navigation. The list is available offline via the Drift local database, critical for peer mentors in low-connectivity areas. All interactive elements meet WCAG 2.2 AA touch target and contrast requirements, with semantic labels for VoiceOver and TalkBack. Organization Labels terminology is applied per tenant so users see locally preferred contact labels such as Bruker or Familie.

Sources & reasoning

Priority matrix (line 162) marks contact search MUST in Phase 1 across all four organizations. MVP scope narrative (line 320) lists contact list as Phase 1. Architecture section (line 291) confirms role-specific list views. Phase 1 in source docs maps to MVP by ordinal position (Fase 1 = first deliverable phase = MVP).

Analysis

Business Value

All four workshop organizations need contact lookup as the entry point for activity registration - every logged activity must be linked to a contact, so the list is a prerequisite for the core workflow. The priority matrix marks basic contact search as MUST in Phase 1 for all four organizations. Role-specific scoping enforces appropriate data boundaries without additional configuration, reducing administrative overhead and preventing cross-role exposure. For large organizations such as NHF managing 1,400 local associations, instant search is essential to avoid overwhelming users with unfiltered lists and to keep cognitive load low for users with varying digital skills.

Implementation Notes

The contact list is a paginated Flutter widget backed by Drift queries scoped at the query layer: peer mentor queries filter to contacts with a direct user relationship; coordinator queries cover the full local association. The backend mirrors this scoping via JWT claims. Search runs against the local Drift database for offline support, falling back to the server endpoint when the local dataset is stale. Organization Labels are resolved at widget build time to apply tenant terminology to all display strings. All list items use AppButton and AppTextField widgets from the design token system, guaranteeing WCAG 2.2 AA touch targets, contrast ratios, and semantic labels for screen reader support.

Quality Assurance

Peer Mentor (scoped view) · Coordinator (full association view)
2
Scenarios
12
UAT Steps
36
A11y Annotations
2
Role Boundaries
Peer Mentor

Peer Mentor

Quick UAT

  1. Logg inn som Likeperson. Ă…pne Kontakter-fanen i bunnmenyen.
  2. Bekreft at listen bare viser egne kontakter — ikke koordinatorens øvrige kontakter.
  3. Skriv de tre første bokstavene i et kontaktnavn i søkefeltet.
  4. Bekreft at listen filtreres umiddelbart og viser bare treff pĂĄ navn.
  5. Slett søketeksten og skriv inn et delvis telefonnummer i søkefeltet.
  6. Bekreft at riktig kontakt vises i resultatlisten basert pĂĄ telefonnummertreff.

Quick UAT — Accessibility

  1. Logg inn som Likeperson. Ă…pne Kontakter-fanen i bunnmenyen.
    • Screen reader Bunnmeny-tab annonseres som 'Kontakter, tab, 2 av 5'; sideoverskrift leses ved fokus.
    • Keyboard / focus Tab-rekkefølge: bunnmeny-tabs → søkefelt → listeelementer.
    • Touch target Bunnmeny-tabs er minimum 44Ă—44 CSS px.
  2. Bekreft at listen bare viser egne kontakter — ikke koordinatorens øvrige kontakter.
    • Screen reader Antall listeelementer annonseres: 'Kontaktliste, X elementer'.
    • Focus visibility Første kontaktkort har synlig fokusring ved tastaturnavigasjon.
    • Contrast Kontaktnavn og telefonnummer har minimum 4,5:1 kontrast mot bakgrunn.
  3. Skriv de tre første bokstavene i et kontaktnavn i søkefeltet.
    • Screen reader Søkefelt er merket 'Søk i kontakter' via semantisk label; inntastet tekst leses opp.
    • Keyboard / focus Søkefelt nĂĄs med Tab fra listetoppen; Escape tømmer feltet og returnerer fokus.
    • Focus visibility Synlig fokusring pĂĄ søkefeltet ved aktivering.
    • Touch target Søkefelt er minimum 44 CSS px høyt.
  4. Bekreft at listen filtreres umiddelbart og viser bare treff pĂĄ navn.
    • Live region 'Søkeresultater oppdatert. X kontakter funnet.' via polite live region.
    • Zoom Søkeresultater forblir lesbare og scrollbare ved 200 % zoom.
    • Contrast Treffmarkering i navn har minimum 3:1 kontrast mot umarkert tekst.
  5. Slett søketeksten og skriv inn et delvis telefonnummer i søkefeltet.
    • Screen reader Sletting av tekst annonseres; nytt tastaturinput leses tegn for tegn.
    • Keyboard / focus Ctrl+A → Delete tømmer søkefeltet; Tab beholder fokus i feltet.
  6. Bekreft at riktig kontakt vises i resultatlisten basert pĂĄ telefonnummertreff.
    • Screen reader Hvert kontaktelement annonserer navn og telefonnummer via semantisk label.
    • Live region 'Søkeresultater oppdatert. X kontakter funnet.' via polite live region.
    • Contrast Telefonnummer vises ikke med farge alene for ĂĄ indikere klikkbarhet.
Coordinator

Coordinator

Quick UAT

  1. Logg inn som Koordinator. Ă…pne Kontakter-fanen i bunnmenyen.
  2. Bekreft at listen viser alle kontakter pĂĄ lokallags-/foreningsnivĂĄ, ikke bare koordinatorens egne.
  3. Skriv et kontaktnavn i søkefeltet.
  4. Bekreft at listen filtreres og viser treff fra hele foreningens kontaktbase.
  5. SlĂĄ av internett-tilkoblingen pĂĄ enheten og ĂĄpne Kontakter-fanen pĂĄ nytt.
  6. Bekreft at listen fortsatt vises og søk fungerer med hurtigbufrede data (offline-modus).

Quick UAT — Accessibility

  1. Logg inn som Koordinator. Ă…pne Kontakter-fanen i bunnmenyen.
    • Screen reader Bunnmeny-tab annonseres som 'Kontakter, tab, 2 av 5'; koordinatorrolle bekreftes via sideoverskrift.
    • Keyboard / focus Tab-rekkefølge: bunnmeny-tabs → søkefelt → listeelementer.
    • Touch target Bunnmeny-tabs er minimum 44Ă—44 CSS px.
  2. Bekreft at listen viser alle kontakter pĂĄ lokallags-/foreningsnivĂĄ, ikke bare koordinatorens egne.
    • Screen reader Antall listeelementer annonseres: 'Kontaktliste, X elementer'.
    • Focus visibility Første kontaktkort har synlig fokusring ved tastaturnavigasjon.
    • Contrast Kontaktinformasjon har minimum 4,5:1 kontrast mot bakgrunn.
  3. Skriv et kontaktnavn i søkefeltet.
    • Screen reader Søkefelt er merket 'Søk i kontakter' via semantisk label; inntastet tekst leses opp.
    • Keyboard / focus Søkefelt nĂĄs med Tab; Escape tømmer feltet og returnerer fokus til toppen av listen.
    • Focus visibility Synlig fokusring pĂĄ søkefeltet ved aktivering.
    • Touch target Søkefelt er minimum 44 CSS px høyt.
  4. Bekreft at listen filtreres og viser treff fra hele foreningens kontaktbase.
    • Live region 'Søkeresultater oppdatert. X kontakter funnet.' via polite live region.
    • Zoom Søkeresultater forblir lesbare og scrollbare ved 200 % zoom.
    • Contrast Treffmarkering har minimum 3:1 kontrast mot umarkert tekst.
  5. SlĂĄ av internett-tilkoblingen pĂĄ enheten og ĂĄpne Kontakter-fanen pĂĄ nytt.
    • Screen reader Offline-indikator (hvis vist) annonseres med semantisk label, ikke kun som fargeendring.
    • Contrast Offline-statusindikator bruker ikke farge alene; tekst eller ikon supplerer.
  6. Bekreft at listen fortsatt vises og søk fungerer med hurtigbufrede data (offline-modus).
    • Screen reader Bufret data-banner leses opp automatisk ved visning.
    • Live region 'Viser bufret data. Sist synkronisert: [dato/tid].' via polite live region.
    • Zoom Offline-banner og kontaktliste er begge lesbare ved 200 % zoom.

Role Boundaries

2 role(s) must NOT access this feature
  • Global Administrator

    Mobilappen viser 'Ingen tilgang'-skjerm ved innlogging; Kontakter-fanen er ikke montert i navigasjonen. Deep-link til kontaktlisten returnerer 403.

  • Prospective Organization Representative

    Ingen mobilapp-konto finnes; innlogging er ikke mulig. Kontaktlisten er utilgjengelig.

Expected End State

  • Peer Mentor

    Kontaktlisten viser kun egne kontakter filtrert etter søketerm. Søk på navn og telefonnummer returnerer umiddelbare resultater fra lokal Drift-database, også uten nettverkstilgang.

  • Coordinator

    Kontaktlisten viser alle foreningskontakter filtrert etter søketerm. Søk dekker hele foreningens kontaktbase og fungerer offline med hurtigbufrede data fra lokal Drift-database.

Components (22)

User Interface (2)

ui ContactListScreen medium ui ContactSearchWidget medium

Service Layer (1)

service ContactService medium

Data Layer (1)

data ContactRepository medium

Shared Components

These components are reused across multiple features

User Stories

No user stories have been generated for this feature yet.