Skip to content

feat(ffe-core): add native utility classes for hybrid apps (WebView)#3169

Open
dagfrode wants to merge 4 commits into
developfrom
ffe-native
Open

feat(ffe-core): add native utility classes for hybrid apps (WebView)#3169
dagfrode wants to merge 4 commits into
developfrom
ffe-native

Conversation

@dagfrode

@dagfrode dagfrode commented Apr 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

feat: Native utility-klasser og CopyText-komponent

Del 1 — ffe-core: Native utility-klasser

Nye CSS-klasser for hybrid-apper (React Native WebView og lignende):

Klasse Hva den gjør
.ffe-native Markerer at siden kjører i native WebView. Settes av rammeverket. Ingen effekt alene.
.ffe-native-ready Opt-in-markør — aktiverer native-oppførsel (slår av tekstmarkering, touch-callout og native drag; unntar input/textarea/contenteditable automatisk). Midlertidig, settes av team etter verifisering.
.ffe-selectable Tillater tekstmarkering på et element og alle barn.
.ffe-selectable-all Markerer hele tekstinnholdet automatisk ved trykk (user-select: all).

Typisk bruk: rammeverket legger .ffe-native på <body>, det enkelte team legger .ffe-native-ready på app-rot etter at de har testat. Bruk .ffe-selectable / .ffe-selectable-all der markering faktisk er ønsket.

Opt-in med .ffe-native-ready

Native-oppførselen aktiveres bare når både .ffe-native og .ffe-native-ready er til stede:

  • .ffe-native settes av rammeverket (typisk <body>) og markerer at siden kjører i WebView. Ingen effekt alene.
  • .ffe-native-ready settes av det enkelte team/app (typisk som barn av <body>, f.eks. app-rot) etter verifisering.

Dette lar plattformen skru på .ffe-native globalt uten å knekke apper som ikke er testet. .ffe-native-ready er en midlertidig opt-in-markør og vil bli fjernet fra ffe-core når alle apper er migrert.

Utrulling og verifisering per app

Klassene rulles ut til ~20 apper fordelt på 6 team. Hvert team er selv ansvarlig for å verifisere sin(e) app(er) før .ffe-native-ready aktiveres i prod.

Steg per app (se native-rollout.md for full plan med sjekklister og status-tabell):

  1. Forbered test-miljø — aktiver .ffe-native-ready lokalt eller via feature flag, ikke i prod ennå.
  2. Funksjonell sjekkliste på iOS Safari WebView og Android Chrome WebView på ekte enhet:
    • Skjemafelt (input/textarea) fungerer — skriv, marker, kopier.
    • Kopierbart innhold er merket med .ffe-selectable / .ffe-selectable-all / CopyText (kontonummer, IBAN, KID, telefonnummer, e-post, vilkår, feilmeldinger).
    • Swipe/pan/karuseller/kart fungerer (touch-action: manipulation på alle etterkommere kan påvirke).
    • Long-press gir ikke utilsiktet kontekstmeny.
    • Ingen tap-delay på knapper og lenker.
  3. Regresjonstest av kritiske flyter — innlogging, betaling, skjemaer med valideringsfeil.
  4. Tilgjengelighet — fokusring synlig, VoiceOver/TalkBack leser innhold som før.
  5. Rapporter status i native-rollout.md eller intern wiki-versjon.
  6. Aktiver i prod og overvåk kundesenter-henvendelser + feillogger i 1–2 uker.

Exit-kriterium: Når alle apper har status Verifisert i minst 2 uker, fjernes .ffe-native-ready-kravet fra ffe-core i en ny release.

Del 2 — ffe-core-react: CopyText-komponent

Ny komponent som wrapper tekst brukeren skal kunne kopiere til utklippstavlen. Kopiering skjer ved klikk — ikonet bytter fra kopi til hake i 2 sekunder som visuell bekreftelse.

<CopyText copyText="12345678901" label="Kopier kontonummer">
    1234 56 78901
</CopyText>

Props:

Prop Type Standard Beskrivelse
label string — (påkrevd) aria-label på knappen. Bør beskrive hva som kopieres, f.eks. "Kopier kontonummer".
copyText string — Teksten som kopieres. Faller tilbake på children hvis ikke satt.
copiedLabel string 'Kopiert' aria-label etter kopiering.

Støtter alle native <button>-attributter via spread, samt ref til knappen via React.forwardRef.

WebView-fallback: Bruker navigator.clipboard.writeText der det er tilgjengelig, og faller tilbake på document.execCommand('copy') for Android WebView uten Clipboard API. Begge kodebaner håndterer feil uten å vise falsk "Kopiert"-feedback; feil logges i dev-mode.

a11y: aria-label på knappen byttes fra label til copiedLabel etter kopiering, slik at skjermleser annonserer bekreftelsen. Knappen har min-height: 44px (WCAG 2.5.5) og synlig fokusring via --ffe-color-border-interactive-focus.

@dagfrode dagfrode requested a review from a team as a code owner April 22, 2026 05:36
@github-actions

github-actions Bot commented Apr 22, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3169.westeurope.2.azurestaticapps.net

@dagfrode

dagfrode commented Apr 22, 2026

Copy link
Copy Markdown
Contributor Author
  • komponent for å enkelt kopiere tekst
  • blir ny major av ffe
  • venter med å legge det til / bryterstyrt i WTF
  • informere de andre som ikke er her i dag

antidecaf
antidecaf previously approved these changes Apr 24, 2026
View reviewed changes
@github-actions

github-actions Bot commented Apr 27, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3169.westeurope.2.azurestaticapps.net

@github-actions

github-actions Bot commented May 8, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3169.westeurope.2.azurestaticapps.net

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@antidecaf antidecaf antidecaf left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dagfrode @antidecaf