Merge branch 'main' into ci/azure

Author: Barsnes

.changeset/green-bushes-sink.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Fieldset**: Removed uneccessary margin when visually hiding `Fieldset.Legend` with `.ds-sr-only`

.github/workflows/test-visual.yml

@@ -1,23 +1,23 @@
 name: Visual tests
 on:
   workflow_dispatch:
+  push:
+    branches-ignore:
+      - 'renovate/**'
   pull_request:
     branches: [main, next]
-    types:
-      # Ensure workflow is run when PR is ready for review
-      - ready_for_review
-      # Also enable the default trigger types, for instances when
-      # the PR is not opened as a draft first
-      - opened
-      - reopened
-      - synchronize
-
+    types: [ready_for_review, synchronize, opened]
     paths:
       - .github/workflows/visual-tests.yml
-      - 'packages/**'
+      - 'packages/**/*.@(tsx|ts)'
+      - 'packages/**/*.css'
+      - 'packages/**/*.stories.@(ts|tsx)'
       - 'apps/storybook/**'
-  push:
-    branches: [main, next]
+      - 'design-tokens/**/*.(json|jsonc)'
+
+concurrency:
+  group: test-visual-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
 
 jobs:
   checks:
@@ -29,6 +29,7 @@ jobs:
         with:
           # Necessary for Chromatic
           fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.ref }}
       - uses: ./.github/actions/gh-setup
       - name: Build
         run: pnpm build
@@ -41,3 +42,5 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitZeroOnChanges: true
           autoAcceptChanges: '{main,next}'
+          onlyChanged: true
+          skip: '@(renovate/**|dependabot/**)'

apps/storybook/.storybook/main.ts

@@ -5,6 +5,7 @@ import * as R from 'ramda';
 import type { PropItem } from 'react-docgen-typescript';
 import remarkGfm from 'remark-gfm';
 import { defineConfig, mergeConfig } from 'vite';
+import { tag } from '../stories/component/showcase.module.css';
 
 const dirname =
   typeof __dirname !== 'undefined'
@@ -102,13 +103,15 @@ const config: StorybookConfig = {
       },
     },
   },
-  tags: (_, options) => {
+  tags: (tagOptions, options) => {
     return {
+      ...tagOptions,
       // Configure stories with the 'chromatic' tag to only be visible in development.
       // In production, they will be picked up by snapshot tests etc but not be visible.
       chromatic: {
         excludeFromDocsStories: true,
         excludeFromSidebar: options.configType === 'PRODUCTION',
+        ...tagOptions?.chromatic,
       },
     };
   },

apps/themebuilder/app/_components/sidebar/sidebar.module.css

@@ -85,7 +85,6 @@
   border-radius: 50%;
   border: 1px solid var(--ds-color-neutral-border-subtle);
   display: none;
-  z-index: 5;
   background-color: var(--ds-color-neutral-background-default);
   cursor: pointer;
   place-items: center;

apps/themebuilder/app/app.css

@@ -180,3 +180,10 @@ body {
 .content {
   min-height: 100svh;
 }
+
+@layer overrides {
+  .ds-skip-link:focus {
+    position: relative;
+    z-index: 1;
+  }
+}

apps/www/app/app.css

@@ -227,3 +227,9 @@ body {
     }
   }
 }
+@layer overrides {
+  .ds-skip-link:focus {
+    position: relative;
+    z-index: 1;
+  }
+}

apps/www/app/content/best-practices/en/accessibility/contrast.mdx

@@ -100,7 +100,7 @@ If we follow the method in WCAG 2, we technically meet the requirement for unive
   **Contrast in WCAG 2 "luminosity contrast algorithm"** <br />
   _"In WCAG 2, contrast is a measure of the difference in perceived luminance
   between two colors. This difference is expressed as a ratio ranging from 1:1 (e.g.,
-  white on white) to 21:1 (e.g., black on white)."_ – WebAIM. The contrasts are calculated using the colors' RGB, HEX, or HSL
+  white on white) to 21:1 (e.g., black on white)."_ - WebAIM. The contrasts are calculated using the colors' RGB, HEX, or HSL
   values in addition to transparency (alpha), whether the color is text, graphics, foreground
   or background has no significance.
 </Card>

apps/www/app/content/best-practices/en/accessibility/understanding-vision-impairment.mdx

@@ -1,6 +1,6 @@
 ---
 title: Understanding vision impairment
-description: An estimated 7–10% of the population lives with a visual impairment. What does this mean for their needs in digital services?
+description: An estimated 7-10% of the population lives with a visual impairment. What does this mean for their needs in digital services?
 date: 2023-05-15
 author: Brønnøysundregistrene
 category: Accessibility

apps/www/app/content/best-practices/no/accessibility/contrast.mdx

@@ -102,7 +102,7 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer
   **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
   _«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
-  eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ – WebAIM, vår
+  eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ - WebAIM, vår
   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.

apps/www/app/content/best-practices/no/content-work/terms.mdx

@@ -13,13 +13,13 @@ I Digdir har vi en rekke produkter og team. For å bevisstgjøre produktteam på
 
 Vi har også startet et arbeid for å standardisere noen språklige ting på tvers. Det gjør vi for at folk som sitter ute i produktteamene skal slippe å lure på hva de skal skrive på en knapp eller i en komponent. 
 
-Denne artikkelen gir anbefalinger om felles navn på knapper og navigasjonselementer. Anbefalingene har blitt godt tatt imot – dette har folk lurt på! Vi håper at anbefalingene kan være nyttig for flere der ute.  
+Denne artikkelen gir anbefalinger om felles navn på knapper og navigasjonselementer. Anbefalingene har blitt godt tatt imot - dette har folk lurt på! Vi håper at anbefalingene kan være nyttig for flere der ute.  
 
 ## Hvordan har vi gått frem? 
 
 Vi har søkt og sammenlignet med hva andre virksomheter bruker, der vi har kunnet. Vi har også sjekket definisjoner både på norsk og engelsk. Med disse anbefalingene håper vi at knapper og navigasjonselementer kan bli like på tvers av flere produkter og tjenester. 
 
-Vi tar gjerne imot forslag på andre begreper som det kan være lurt å enes om, slik at de som lager offentlige digitale tjenester kan gi brukerne samstemte innholdselementer fra ett sted til et annet – akkurat som de får samstemte komponenter.   
+Vi tar gjerne imot forslag på andre begreper som det kan være lurt å enes om, slik at de som lager offentlige digitale tjenester kan gi brukerne samstemte innholdselementer fra ett sted til et annet - akkurat som de får samstemte komponenter.   
 
 ## Dette er begrepene vi har laget anbefalinger for