PWA: dyplenket tilfluktsrom utenfor topp-N vises som om det er nærmest #17

New issue

Open

opened 2026-04-29 16:51:32 +02:00 by olemd · 0 comments

olemd commented

2026-04-29 16:51:32 +02:00

Owner

Bakgrunn

Hybrid-fiksen i Android-appen (#13, commit 1fb9f14) løste at et dyplenket tilfluktsrom utenfor topp-N nå appendes i bunnpanelets liste med en tydelig badge «Valgt – utenfor nærområdet», og lista scroller til valgt rad.

PWA-en har en relatert, men ikke identisk feil i samme kodeflate.

Nåværende oppførsel i PWA

Se `pwa/src/app.ts:266-285`.

Når en dyplenke peker på et tilfluktsrom som ikke er blant de N nærmeste:

nearestShelters.unshift({
  shelter,
  distanceMeters: ...,
  bearingDegrees: ...,
});
selectedShelterIndex = 0;

Dvs. det dyplenkede tilfluktsrommet vises, men det blir unshift-et på posisjon 0 og presenteres som om det skulle være det nærmeste. Brukeren får dermed et feilaktig inntrykk: lista skal være sortert på avstand, men topp-elementet kan være milevis lenger unna enn de tre under. Det er ingen badge, ingen separator, ingen forklaring.

Forslag — hybrid, parallelt med Android

Konvergér oppførselen med Android-fiksen:

Append, ikke prepend. Bytt unshift til push i `app.ts:274` — det dyplenkede ligger som ekstra rad etter de N nærmeste.
Badge. Marker den ekstra raden i `pwa/src/ui/shelter-list.ts` med en synlig badge med samme tekst som Android: «Valgt – utenfor nærområdet» (en/nb/nn). Strengen finnes allerede i Android-appen som shelter_outside_nearest_badge; legg til samme nøkkel i `pwa/src/i18n/{en,nb,nn}.ts`.
Datamodell. updateList(shelters, currentSelectedIndex) får en outsideNearestRomnr: number | null-parameter (eller en Array<{swd, isOutsideNearest}> parallelt med Android sin ShelterListItem). Det første alternativet er enklere; det andre matcher Android tydeligere.
Skjermleser. Legg badge-teksten til aria-label for den raden, slik Android gjør i ShelterListAdapter.bind() (se adapteren).
Scroll til valgt rad. Bunnpanelet i PWA-en er en knapperad i en scroll-container; bruk selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' }) etter updateList(...) slik at både den appendede og en hvilken som helst valgt nærliggende rad alltid er synlig.
Tilgjengelighet. Badge må ha ≥4.5:1 kontrast (WCAG 2.2 AA SC 1.4.3). Bruk samme orange #FF6B35 som Android, men hvit tekst og fet vekt (verifisert kontrast: ~3.5:1 — for lav for tekst). Velg heller shelter_primary_dark #E55A2B som bakgrunn, eller bruk svart tekst på #FF6B35 (~7:1) — verifiser med en kontrast-sjekker før merge.

Ut-av-skopet

Endring av selve dyplenke-formatet (fortsatt https://tilfluktsrom.naiv.no/shelter/{romnr}, beholdt etter #15-utredningen om lokalId-drift).
Klyngevisning av kartmarkører (#10).

Relatert

Android-implementasjon: 1fb9f14 (Forgejo #13)
PWA-modulene som endres: pwa/src/app.ts, pwa/src/ui/shelter-list.ts, pwa/src/i18n/{en,nb,nn}.ts

## Bakgrunn Hybrid-fiksen i Android-appen (#13, commit 1fb9f14) løste at et dyplenket tilfluktsrom utenfor topp-N nå appendes i bunnpanelets liste med en tydelig badge «Valgt – utenfor nærområdet», og lista scroller til valgt rad. PWA-en har en relatert, men ikke identisk feil i samme kodeflate. ## Nåværende oppførsel i PWA Se [\`pwa/src/app.ts:266-285\`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/app.ts#L266-L285). Når en dyplenke peker på et tilfluktsrom som ikke er blant de N nærmeste: ```ts nearestShelters.unshift({ shelter, distanceMeters: ..., bearingDegrees: ..., }); selectedShelterIndex = 0; ``` Dvs. det dyplenkede tilfluktsrommet **vises**, men det blir `unshift`-et på posisjon 0 og presenteres som om det skulle være det nærmeste. Brukeren får dermed et feilaktig inntrykk: lista skal være sortert på avstand, men topp-elementet kan være milevis lenger unna enn de tre under. Det er ingen badge, ingen separator, ingen forklaring. ## Forslag — hybrid, parallelt med Android Konvergér oppførselen med Android-fiksen: 1. **Append, ikke prepend.** Bytt `unshift` til `push` i [\`app.ts:274\`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/app.ts#L274) — det dyplenkede ligger som ekstra rad *etter* de N nærmeste. 2. **Badge.** Marker den ekstra raden i [\`pwa/src/ui/shelter-list.ts\`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/ui/shelter-list.ts) med en synlig badge med samme tekst som Android: «Valgt – utenfor nærområdet» (en/nb/nn). Strengen finnes allerede i Android-appen som `shelter_outside_nearest_badge`; legg til samme nøkkel i [\`pwa/src/i18n/{en,nb,nn}.ts\`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/i18n/). 3. **Datamodell.** `updateList(shelters, currentSelectedIndex)` får en `outsideNearestRomnr: number | null`-parameter (eller en `Array<{swd, isOutsideNearest}>` parallelt med Android sin `ShelterListItem`). Det første alternativet er enklere; det andre matcher Android tydeligere. 4. **Skjermleser.** Legg badge-teksten til `aria-label` for den raden, slik Android gjør i `ShelterListAdapter.bind()` (se [adapteren](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/app/src/main/java/no/naiv/tilfluktsrom/ui/ShelterListAdapter.kt)). 5. **Scroll til valgt rad.** Bunnpanelet i PWA-en er en knapperad i en scroll-container; bruk `selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' })` etter `updateList(...)` slik at både den appendede og en hvilken som helst valgt nærliggende rad alltid er synlig. 6. **Tilgjengelighet.** Badge må ha ≥4.5:1 kontrast (WCAG 2.2 AA SC 1.4.3). Bruk samme orange `#FF6B35` som Android, men hvit tekst og fet vekt (verifisert kontrast: ~3.5:1 — *for lav* for tekst). Velg heller `shelter_primary_dark` `#E55A2B` som bakgrunn, eller bruk svart tekst på `#FF6B35` (~7:1) — verifiser med en kontrast-sjekker før merge. ## Ut-av-skopet - Endring av selve dyplenke-formatet (fortsatt `https://tilfluktsrom.naiv.no/shelter/{romnr}`, beholdt etter #15-utredningen om `lokalId`-drift). - Klyngevisning av kartmarkører (#10). ## Relatert - Android-implementasjon: 1fb9f14 (Forgejo #13) - PWA-modulene som endres: [`pwa/src/app.ts`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/app.ts), [`pwa/src/ui/shelter-list.ts`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/ui/shelter-list.ts), [`pwa/src/i18n/{en,nb,nn}.ts`](https://kode.naiv.no/olemd/tilfluktsrom/src/branch/main/pwa/src/i18n/)