diff --git a/apps/storefront/app/(frontpage)/layout.tsx b/apps/storefront/app/(frontpage)/layout.tsx index 1413f12e8d..d0ca21688f 100644 --- a/apps/storefront/app/(frontpage)/layout.tsx +++ b/apps/storefront/app/(frontpage)/layout.tsx @@ -70,7 +70,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
Beta
- + Designsystemet hjelper deg å lage gode digitale tjenester
diff --git a/apps/storefront/pages/api/tokens.ts b/apps/storefront/app/api/tokens/route.ts similarity index 76% rename from apps/storefront/pages/api/tokens.ts rename to apps/storefront/app/api/tokens/route.ts index 6d42ae2702..4b98addeae 100644 --- a/apps/storefront/pages/api/tokens.ts +++ b/apps/storefront/app/api/tokens/route.ts @@ -1,16 +1,13 @@ import { promises as fs } from 'fs'; import path from 'path'; -import type { NextApiRequest, NextApiResponse } from 'next'; +import { NextResponse } from 'next/server'; type outputObjType = { [key: string]: string; }; -export default async function handler( - req: NextApiRequest, - res: NextApiResponse, -) { +export async function GET() { //Read the json data file data.json const tokensDirectory = path.join(process.cwd(), 'tokens'); const fileContents = await fs.readFile( @@ -27,5 +24,8 @@ export default async function handler( const itemArr = fileContentsArr[i].split(':'); outputObj[itemArr[0].replace('\n --', '')] = itemArr[1]; } - res.status(200).json(outputObj); + return NextResponse.json({ + status: 200, + body: outputObj + }); } diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.tsx b/apps/storefront/app/bloggen/(frontpage)/layout.tsx index 3e3198c776..7ed32b5967 100644 --- a/apps/storefront/app/bloggen/(frontpage)/layout.tsx +++ b/apps/storefront/app/bloggen/(frontpage)/layout.tsx @@ -6,7 +6,7 @@ import { Banner, BannerIcon, BannerHeading, -} from 'components/SubPages/Banner/Banner'; +} from 'components/Banner/Banner'; import classes from './layout.module.css'; diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare.mdx b/apps/storefront/app/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare.mdx rename to apps/storefront/app/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare/page.mdx diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste.mdx b/apps/storefront/app/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste.mdx rename to apps/storefront/app/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste/page.mdx diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/felles-innsiktsbase.mdx b/apps/storefront/app/god-praksis/brukerinnsikt/felles-innsiktsbase/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/brukerinnsikt/felles-innsiktsbase.mdx rename to apps/storefront/app/god-praksis/brukerinnsikt/felles-innsiktsbase/page.mdx diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko.mdx b/apps/storefront/app/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko.mdx rename to apps/storefront/app/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko/page.mdx diff --git a/apps/storefront/pages/god-praksis/innholdsarbeid/andre-ressurser.mdx b/apps/storefront/app/god-praksis/innholdsarbeid/andre-ressurser/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/innholdsarbeid/andre-ressurser.mdx rename to apps/storefront/app/god-praksis/innholdsarbeid/andre-ressurser/page.mdx diff --git a/apps/storefront/pages/god-praksis/innholdsarbeid/skriverad.mdx b/apps/storefront/app/god-praksis/innholdsarbeid/skriverad/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/innholdsarbeid/skriverad.mdx rename to apps/storefront/app/god-praksis/innholdsarbeid/skriverad/page.mdx diff --git a/apps/storefront/pages/god-praksis/innholdsarbeid/skumlesing.mdx b/apps/storefront/app/god-praksis/innholdsarbeid/skumlesing/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/innholdsarbeid/skumlesing.mdx rename to apps/storefront/app/god-praksis/innholdsarbeid/skumlesing/page.mdx diff --git a/apps/storefront/pages/god-praksis/index.mdx b/apps/storefront/app/god-praksis/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/index.mdx rename to apps/storefront/app/god-praksis/page.mdx diff --git a/apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/forsta-synsnedsettelse/page.mdx similarity index 100% rename from apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx rename to apps/storefront/app/god-praksis/tilgjengelighet/forsta-synsnedsettelse/page.mdx diff --git a/apps/storefront/pages/god-praksis/tilgjengelighet/kontrast.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx similarity index 89% rename from apps/storefront/pages/god-praksis/tilgjengelighet/kontrast.mdx rename to apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx index e1802560a9..a74ac61765 100644 --- a/apps/storefront/pages/god-praksis/tilgjengelighet/kontrast.mdx +++ b/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx @@ -1,4 +1,13 @@ -import { Card, List } from '@digdir/designsystemet-react'; +import { + Card, + CardContent, + List, + ListRoot, + ListHeading, + ListUnordered, + ListItem, + +} from '@digdir/designsystemet-react'; import { Meta, Image } from '@components'; import { PageLayout } from '@layouts'; @@ -29,93 +38,93 @@ For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunn Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjenester. Web Content Accessibility Guidelines (WCAG) inneholder suksesskriterier og forslag til løsninger for å lykkes. Men det er ikke samsvar mellom dagens kontrastregler og kravet om at alle skal kunne se innholdet. - - - + + Gjeldende regelverk, WCAG 2.1 - - - + + + **1.4.3 Kontrast (minimum) (Nivå AA)**: Kontrastforholdet mellom teksten og bakgrunnen er minst 4,5:1. [1.4.3 Kontrast (minimum), WCAG 2.1 (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-minimum) - - + + **1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)**: Den visuelle presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av. [1.4.11 Kontrast for ikke-tekstlig innhold, WCAG 2.1 (w3.org)](https://www.w3.org/Translations/WCAG21-no/#non-text-contrast) - - - - + + + +
- - - + + Fremtidig eller strengere: - - - + + + **1.4.6 Kontrast** (forbedret) (Nivå AAA): Den visuelle presentasjonen av tekst og bilder av tekst har et kontrastforhold på minst 7:1, unntatt uvesentlig tekst og skriftstørrelser større enn 18px eller 14px fet. [ 1.4.6 Kontrast (forbedret), WCAG 2.1 (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-enhanced) - - + + **WCAG 2.2: 2.4.13** Focus Appearance (Nivå AAA), om utseende til fokusmarkering krever at fokusindikator har en kontrastverdi på 3:1 mellom samme piksler i fokusert og ikke-fokusert tilstand. [Understanding Success Criterion 2.4.13: Focus Appearance | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) - - + + **WCAG 3** har et krav om farge og kontrast, visuell kontrast i tekst (sølv): Sørg for tilstrekkelig kontrast mellom tekst i forgrunnen og bakgrunnen for teksten. Her brukes det en ny metode, med navn APCA, for å regne ut kontrasten. - - - - + + + + ## Mer presis metode WCAG 3.0 foreslår nå en mer presis metode enn dagens standard, for å kalkulere kontrast og sette terskelverdier. - - - + + + Metoden forbedrer hvordan verdien mellom to farger bestemmes, og skiller også på om fargene er i forgrunnen eller i bakgrunnen. - - + + Den setter også tydelige terskelverdier eller målverdier for valg av font, tekststørrelse og font-vekt. Metoden heter Advanced Perceptual Contrast Algorithm (APCA). - - + + Målet vårt er å ligge over AAA-krav i WCAG 2.1, og vi vil dermed ligge nærmere terskelverdiene i APCA. Det øker sjansen for at vi klarer å oppfylle kravet om at alle, også svaksynte, skal kunne se innholdet på nettstedet. - - - + + + ## I dag bruker vi en høyere standard enn kravene til tilgjengelighet @@ -130,7 +139,7 @@ Vi vet at selv om en løsning oppfyller de konkrete kravene fra regelverket om u Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til universell utforming, men det betyr ikke at innholdet er tilgjengelig eller universelt utformet. Derfor strekker vi oss langt i å også oppfylle de fremtidige WCAG-3 kravene som bruker APCA-metoden. - + **Kontrast i WCAG 2 «luminosity contrast algorithm**
_«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for @@ -138,13 +147,13 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer oversettelse. Kontrastene regnes ut ved hjelp av fargenes RGB, HEX eller HSL verdier i tillegg til transparens (alpha), om fargen er tekst, grafikk, forgrunn eller bakgrunn har ingen betydning. - +
- + **Kontrast i WCAG 3 «visual contrast algorithm»**
I WCAG 3 benyttes en visuell-kontrast algoritme som kalles for APCA, det er fremdeles fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er @@ -154,7 +163,7 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer kontrastverdier vil i APCA kunne få andre verdier fordi en i større grad kalkulerer ut fra øyets evne til å oppfatte farger enn kun den tekniske fargeverdien. - + ## Verktøy for å teste kontrastverdier @@ -179,18 +188,18 @@ Terskelverdiene (over) som viser om kontrasten er godkjent eller ikke, er forenk /> I eksempelet over ser vi at selv om kontrasten som er utregnet til å være lik med WCAG 2-metoden, er graden av lesbarhet ulik for tekstene i variant A og Variant B. -Begge tekstene har 16px stor tekst i normal vekt, og begge variantene har 4,6 til 1 i kontrast. +Begge tekstene har 16px stor tekst i normal vekt, og begge variantene har 4,6 til 1 i kontrast. I variant A har teksten fargen #6D7879og bakgrunnen er hvit. Teksten er sånn passe lesbar. I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe mindre lesbar enn variant A.

- + **Bidra til artikkelen?**
Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en e-post på: designsystem@digdir.no eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new). - + ; const BannerHeading = ({ ...props }: BannerHeadingProps) => { return ( ); diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx index 9f53763a6d..303da07ae9 100644 --- a/apps/storefront/components/Header/Header.tsx +++ b/apps/storefront/components/Header/Header.tsx @@ -4,6 +4,7 @@ import Link from 'next/link'; import Image from 'next/image'; import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons'; import cl from 'clsx'; +import { usePathname } from 'next/navigation'; import { GithubLogo } from './logos/github-logo'; import { FigmaLogo } from './logos/figma-logo'; @@ -11,7 +12,7 @@ import classes from './Header.module.css'; const Header = () => { const [open, setOpen] = useState(false); - const href = typeof window !== 'undefined' ? window.location.pathname : ''; + const pathName = usePathname() || ''; const menu = [ { @@ -91,7 +92,7 @@ const Header = () => { onClick={() => setOpen(false)} prefetch={false} className={cl( - href.includes(item.url) && classes.active, + pathName === item.url ? classes.active : '', classes.link, 'ds-paragraph--md', 'ds-focus', diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx index b3b9ac5b07..a2515d7cfe 100644 --- a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx +++ b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx @@ -41,8 +41,8 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {