chore(apps): minor a11y updates (#3323)

Barsnes · web-flow · commit 07445d8d0636 · 2025-03-07T09:20:22.000+01:00
* chore(apps): minor a11y updates

* designprinsipper links

* remove miro section

* skiplink on codeblock, misc styling

* remove skiplink

* change link texts

* style(storybook): mark a with code
diff --git a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
@@ -62,7 +62,7 @@ I forbindelse med det nye fargesystemet har vi utviklet et verktøy der du kan t
   href='https://theme.designsystemet.no/'
   target='_blank'
 >
-  theme.designsystemet.no
+  theme.designsystemet.no (åpnes i ny fane)
 </Link>
 
 Selv om vi nå har lagt opp til et fargesystem som støtter darkmode og contrastmode, gjenstår det fremdeles litt utforsking før vi er sikre på at genereringen av farger fungerer optimalt.
@@ -109,7 +109,7 @@ Veiledninger på hvordan dette skal tas i bruk kommer!
   href='https://github.com/designsystemet/design-tokens'
   target='_blank'
 >
-  github.com/designsystemet/design-tokens
+  github.com/designsystemet/design-tokens (åpnes i ny fane)
 </Link>
 
 #### Migrere fra beta-versjon
@@ -155,4 +155,4 @@ Fikk du ikke med deg demoen 29. mai, kan du se opptaket i videoen over.
   ]}
 />
 
-Vi skulle gjerne nevnt alle, men du kan finne en full liste av bidragsytere på [Github](https://github.com/digdir/designsystemet/graphs/contributors).
+Vi skulle gjerne nevnt alle, men du kan finne en full liste av [bidragsytere på Github](https://github.com/digdir/designsystemet/graphs/contributors).
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -76,11 +76,11 @@ function PostLayout({
                 Vi vil gjerne ha historier om hvordan Designsystemet har blitt
                 brukt! Ta kontakt med oss i{' '}
                 <Link href='https://designsystemet.no/slack' target='_blank'>
-                  Slack
+                  Slack (åpnes i ny fane)
                 </Link>{' '}
                 eller{' '}
                 <Link href='mailto:designsystem@digdir.no' target='_blank'>
-                  send oss en epost.
+                  send oss en epost (åpnes i ny fane).
                 </Link>{' '}
               </Paragraph>
             </div>
diff --git a/apps/storefront/app/god-praksis/brukerinnsikt/felles-innsiktsbase/page.mdx b/apps/storefront/app/god-praksis/brukerinnsikt/felles-innsiktsbase/page.mdx
@@ -62,8 +62,6 @@ Innsiktsbibliotektet består av to deler, en samling av github issues og ett til
 
 Dersom du ønsker å dele av egen innsikt i innsiktbiblioteket så har vi satt opp [tre typer skjema som kan fylles ut](https://github.com/digdir/innsiktsbibliotek/issues/new/choose). Vi skiller mellom studier, funn og innsikt der studien beskriver selve datainnhentingen, et funn beskriver en viktig oppdagelse fra studien og innsikt er flere funn sett i sammenheng som forklarer hvorfor noe skjedde.
 
-Ettersom systemet er på et tidlig prototypstadie og mangler forklarende innholder og guider har vi satt opp [en enkel guide i Miro](https://miro.com/app/board/uXjVM8DHH3o=/?share_link_id=998152182535) som vi håper kan hjelpe deg å komme i gang med å registrere innsikt i innsiktsbiblioteket.
-
 ## Bidra til innsiktsbiblioteket
 
 Vårt mål er at innsiktsbiblioteket skal eies og modereres i fellesskap på tvers av offentlig sektor. Dersom du ønsker å bidra til å realisere ett felles innsiktsbibliotek på tvers av det offentlige vil vi gjerne høre fra deg. Vi håper også på at alle (kommune, stat, næringsliv, frivillige organisasjoner, innbyggere, mm) gir tilbakemeldinger samt sender inn forslag og ideer til hvordan vi kan gjøre løsningen enda bedre. Opprett gjerne en ny tråd i [Github discussions forumet](https://github.com/digdir/innsiktsbibliotek/discussions) eller kontakt oss på ima@digdir.no og sss@digdir.no.
diff --git a/apps/storefront/app/grunnleggende/designelementer/ikoner/page.mdx b/apps/storefront/app/grunnleggende/designelementer/ikoner/page.mdx
@@ -34,7 +34,7 @@ For å holde ikonpakken i Figma i sync med nye oppdateringer og justeringer som
 
 Installer pluginen, trykk "Run" og du henter ned de siste endringene. Tusen takk til designsystem-teamet i NAV som gjorde dette mulig! 🙏🏻👏🏻🏅
 
-![Image](https://user-images.githubusercontent.com/1464915/230187062-b17ecf3a-4910-461f-b6c1-7767af26963c.png)
+![Viser hvor i Figmas grensesitt du kan kjøre Navs plugin for å oppdatere ikonene](https://user-images.githubusercontent.com/1464915/230187062-b17ecf3a-4910-461f-b6c1-7767af26963c.png)
 
 ## Slik bidrar du
 
diff --git a/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx
@@ -82,7 +82,7 @@ Dersom ein av event handlerane er avhengig av `event.defaultPrevented`, så må
   asChild
   onClick={(event) => {
     if (!event.defaultPrevented)
-      console.log('Not logged because default is prevented.');
+      console.log('Ikkje logget til konsoll fordi default er prevented.');
   }}
 >
   <Link onClick={(e) => e.preventDefault()}>Di lenke</Link>
diff --git a/apps/storefront/app/grunnleggende/introduksjon/designprinsipper/page.mdx b/apps/storefront/app/grunnleggende/introduksjon/designprinsipper/page.mdx
@@ -60,16 +60,16 @@ Eksempel på opplevelser vi ønsker at innbyggerne skal ha i møte med oss:
 - Brønnøysundregistrene: [Brønnøysundregistrenes brukskvalitetspolicy](https://brukskvalitet.brreg.no/brukskvalitet/)
 - Digdir: [Designprinsipper Dødsfall og Arv](/pdf/designprinsipperDOA.pdf)
 - Helsenorge: [Designprinsipper for Helsenorge](/pdf/designprinsipperHelsenorge.png)
-- Entur: [Designprinsipper](https://design.entur.no/kom-i-gang/designprinsipper?gclid=CjwKCAjwjYKjBhB5EiwAiFdSfkxEStTvDp8-7MVu-U-ExvXGT5R_h-ceqZRnjOWk_B9oXS3YpAXmmxoCtesQAvD_BwE)
+- Entur: [Designprinsipper for Entur](https://linje.entur.no/kom-i-gang/introduksjon/designprinsipper)
 - Forum for brukskvalitet: Prinsipper for samarbeid i offentlig sektor (ikke ferdigstilt og delt)
 
 ### Utenfor Norge:
 
 - UK charity sector: [10 design principles to help charities build better digital services](https://betterdigital.services/principles/)
-- Gov.je: [Digital design principles](https://www.gov.je/servicemanual/pages/designprinciples.aspx)
-- Gov.uk: [Government Design Principles](https://www.gov.uk/guidance/government-design-principles)
-- US Gov: [Design principles](https://designsystem.digital.gov/design-principles/)
-- Australia: [Design principles](https://gold.designsystemau.org/about/#design-principles)
+- Gov.je: [Digital design principles for gov.je](https://www.gov.je/servicemanual/pages/designprinciples.aspx)
+- Gov.uk: [Government Design Principles for Gov.uk](https://www.gov.uk/guidance/government-design-principles)
+- US Gov: [Design principles for US Gov](https://designsystem.digital.gov/design-principles/)
+- Australia: [Design principles for Australia](https://gold.designsystemau.org/about/#design-principles)
 
 ## Andre relevante kilder:
 
diff --git a/apps/storefront/app/monstre/feilmeldinger/page.mdx b/apps/storefront/app/monstre/feilmeldinger/page.mdx
@@ -273,7 +273,7 @@ For feilmeldinger som dukker opp dynamisk må vi bruke `aria-live` for at meldin
 <br />
 
 <Card data-color='brand3' variant="tinted" data-unstyled>
-  Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).
+  Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [diskusjonstråden om systemvarsler på Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).
 </Card>
 
 <Contributors
diff --git a/apps/storefront/app/monstre/systemvarsler/page.mdx b/apps/storefront/app/monstre/systemvarsler/page.mdx
@@ -246,7 +246,7 @@ Dette gjør at modaltittelen kan få fokus, selv om den normalt ikke er et inter
 <br/>
 
 <Card data-color='brand3' variant="tinted" data-unstyled>
-  Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatteetaten, Brønnøysundregistrene, Politiet, KS, Entur, Mattilsynet og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1801) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).
+  Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatteetaten, Brønnøysundregistrene, Politiet, KS, Entur, Mattilsynet og Oslo kommune. Du kan påvirke arbeidet i [diskusjonstråden om systemvarsler på Github](https://github.com/digdir/designsystemet/discussions/1801) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).
 </Card>
 
 <br/>
diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css
@@ -125,7 +125,9 @@
     box-shadow: var(--ds-shadow-md);
   }
 
-  & > p > code {
+  & > p > code,
+  & li > code,
+  & h2 > code {
     padding: 0.2em 0.5em;
     margin: 1px;
     font-size: 0.9em;
diff --git a/apps/storybook/.storybook/style.css b/apps/storybook/.storybook/style.css
@@ -5,3 +5,23 @@
 html {
   font-family: 'Inter', sans-serif;
 }
+
+a > code {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: 0.0625em;
+  text-underline-offset: 0.27em; /* 5px ish */
+
+  /* Only use hover for non-touch devices to prevent sticky-hovering */
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      color: var(--ds-color-text-default);
+      text-decoration-thickness: 0.125em;
+    }
+  }
+
+  &:active {
+    background-color: var(--ds-color-surface-tinted) !important;
+    color: var(--ds-color-text-default) !important;
+  }
+}
diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -118,22 +118,22 @@ export const TokenModal = () => {
                     target='_blank'
                     href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
                   >
-                    Figma plugin
+                    Figma plugin (åpnes i ny fane)
                   </Link>{' '}
                   i{' '}
                   <Link
                     target='_blank'
                     href='https://www.figma.com/community/file/1322138390374166141'
                   >
-                    Core UI Kit
+                    Core UI Kit (åpnes i ny fane)
                   </Link>{' '}
                   for å oppdatere et tema direkte i Figma. Les mer om disse
                   alternativene på{' '}
                   <Link
                     target='_blank'
                     href='https://www.designsystemet.no/grunnleggende/for-designere/eget-tema'
                   >
-                    eget tema
+                    eget tema (åpnes i ny fane)
                   </Link>{' '}
                   siden.
                 </Paragraph>
@@ -170,14 +170,14 @@ export const TokenModal = () => {
                       target='_blank'
                       href='https://designsystemet.no/slack'
                     >
-                      Slack
+                      Slack (åpnes i ny fane)
                     </Link>{' '}
                     eller lag et{' '}
                     <Link
                       target='_blank'
                       href='https://github.com/digdir/designsystemet/issues/new/choose'
                     >
-                      Github issue
+                      Github issue (åpnes i ny fane)
                     </Link>
                     .
                   </Paragraph>
diff --git a/packages/Overview.mdx b/packages/Overview.mdx
@@ -38,7 +38,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone
           target='_blank'
           rel='noreferrer'
           className='sb-unstyled'
-        >Kom i gang</a>
+        >Kom i gang (åpnes i ny fane)</a>
       </h2>
     </Heading>
     Les vår README-fil for å komme i gang med å bruke designsystemet.
@@ -56,7 +56,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone
           target='_blank'
           rel='noreferrer'
           className='sb-unstyled'
-        >Bidra</a>
+        >Bidra (åpnes i ny fane)</a>
       </h2>
     </Heading>
     Si gjerne i fra om du finner en bug eller har forslag til forbedringer.
@@ -74,7 +74,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone
           target='_blank'
           rel='noreferrer'
           className='sb-unstyled'
-        >Tokens</a>
+        >Tokens (åpnes i ny fane)</a>
         </h2>
     </Heading>
     Design tokens sørger vi for at både designere og utviklere arbeider
@@ -93,7 +93,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone
           target='_blank'
           rel='noreferrer'
           className='sb-unstyled'
-        >Eget tema?</a>
+        >Eget tema? (åpnes i ny fane)</a>
       </h2>
     </Heading>
     Skal du ta i bruk Designsystemet med dine egne farger og

Original file line number	Diff line number	Diff line change
@@ -82,7 +82,7 @@ Dersom ein av event handlerane er avhengig av `event.defaultPrevented`, så må
`82`	`82`	`asChild`
`83`	`83`	`onClick={(event) => {`
`84`	`84`	`if (!event.defaultPrevented)`
`85`		`- console.log('Not logged because default is prevented.');`
	`85`	`+ console.log('Ikkje logget til konsoll fordi default er prevented.');`
`86`	`86`	`}}`
`87`	`87`	`>`
`88`	`88`	`<Link onClick={(e) => e.preventDefault()}>Di lenke</Link>`