build: Update The Design System

[TomasEng]

Description

This pull request updates The Design System to the latest version, along with necessary changes to the code. Here is an overview of the code adjustments:

Fixes to breaking changes

• The variant prop on Pagination.Button is replaced with data-variant
• Added data-toggle-group attribute on ToggleGroup
• Added aria-label to ToggleGroup.Item (title is no longer interpreted as the input element's name)
• Adjusted typing related to ToggleGroup, of which the root element is now a fieldset and not a div
• Adjusted typing related to Tabs, of which the root element is now the custom-made ds-tabs
• Added aria-label to Breadcrumbs

Adjustments in Jest setup

Polyfill for matches(':popover-open')

JSDOM does not recognise the :popover-open pseudo-class in selectors. This makes at least one of our tests fail. Therefore, the @oddbird/popover-polyfill package is added to setupTests.ts.

Custom matchers for fieldset and details/summary elements

Some elements are not reachable using the ordinary getByRole approach. Therefore, we have created facade modules for the screen and within utilities with some custom matcher functions:

altinn-studio/src/Designer/frontend/libs/studio-ui-test/src/matchers.ts

Lines 7 to 55 in 2bd961d

	export type StudioMatchers = BoundFunctions<typeof queries> & {
	getDetailsBySummary: (summary: string) => HTMLElement;
	getFieldsetByLegend: (legend: string) => HTMLElement;
	getSummaryByText: (summary: string) => HTMLElement;
	queryDetailsBySummary: (summary: string) => HTMLElement | null;
	querySummaryByText: (summary: string) => HTMLElement | null;
	};
	export const screen: StudioMatchers = extendMatcherObject(testingLibraryScreen);
	export function within(element: HTMLElement): StudioMatchers {
	return extendMatcherObject(testingLibraryWithin(element));
	}
	function extendMatcherObject(
	matcherObject: Screen | ReturnType<typeof testingLibraryWithin>,
	): StudioMatchers {
	return {
	...matcherObject,
	getDetailsBySummary(summary: string): HTMLDetailsElement {
	// See https://github.com/testing-library/dom-testing-library/issues/1252
	const { parentElement } = this.getSummaryByText(summary);
	/* istanbul ignore else */
	if (parentElement instanceof HTMLDetailsElement) return parentElement;
	else throw new Error('Could not find details element.');
	},
	getFieldsetByLegend(legend: string): HTMLElement {
	return this.getByRole('group', {
	name: (accessibleName) => accessibleName.startsWith(legend),
	});
	},
	getSummaryByText(summary: string): HTMLElement {
	return this.getByText(summaryByTextMatcher(summary));
	},
	queryDetailsBySummary(summary: string): HTMLDetailsElement | null {
	const summaryElement = this.querySummaryByText(summary);
	/* istanbul ignore else */
	if (!summaryElement) {
	return null;
	} else {
	const { parentElement } = summaryElement;
	return parentElement instanceof HTMLDetailsElement ? parentElement : null;
	}
	},
	querySummaryByText(summary: string): HTMLElement | null {
	return this.queryByText(summaryByTextMatcher(summary));
	},
	};
	}

Adjustments in Playwright tests

The <summary> element has no role anymore, so the getByRole('button') selectors which were used to address it are replaced with this custom matcher:

altinn-studio/src/Designer/frontend/testing/playwright/helpers/BasePage.ts

Lines 55 to 57 in bbd9a45

	public getSummaryByText(text: string): Locator {
	return this.page.locator('summary').filter({ hasText: text });
	}

A similar fix is also added to the resourceadm Playwright tests.

Verification

• No related issues
• Your code builds clean without any errors or warnings
• Manual testing done (required)
• No need to add new tests, as this does not change any user-facing behaviour

Summary by CodeRabbit

• New Features

  • Added testing utilities for improved test authoring and maintenance.
  • Added popover polyfill support for enhanced browser compatibility.

• Bug Fixes

  • Improved accessibility with additional aria-label attributes across components.
  • Updated component ref types to properly reflect underlying DOM elements.
  • Refined semantic HTML structure for toggle and grouping components.
  • Simplified validation messaging in select component.

• Tests

  • Updated test suite to use improved helper functions for better maintainability.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request extends the testing infrastructure by introducing a new @studio/ui-test package with custom testing matchers, adds it as a development dependency across multiple frontend packages, refactors existing tests to use the new helpers, updates component ref types for better semantic HTML alignment, and improves accessibility attributes across various components.

Changes

Cohort / File(s)	Summary
Testing Infrastructure Library src/Designer/frontend/libs/studio-ui-test/src/matchers.ts, src/Designer/frontend/libs/studio-ui-test/src/index.ts, src/Designer/frontend/libs/studio-ui-test/src/renderAndRunTimers.ts	Added three new testing matchers (getFieldsetByLegend, queryDetailsBySummary, querySummaryByText) for improved DOM querying in tests. Updated renderAndRunTimers to wrap timer execution in React's act() and re-exported matchers from main index.
Package.json Dependency Additions src/Designer/frontend/app-development/package.json, src/Designer/frontend/dashboard/package.json, src/Designer/frontend/libs/studio-components/package.json, src/Designer/frontend/packages/policy-editor/package.json, src/Designer/frontend/packages/process-editor/package.json, src/Designer/frontend/packages/schema-editor/package.json, src/Designer/frontend/packages/shared/package.json, src/Designer/frontend/packages/ux-editor-v3/package.json, src/Designer/frontend/packages/ux-editor/package.json, src/Designer/frontend/settings/package.json, src/Designer/frontend/studio-root/package.json	Added @studio/ui-test (workspace:^) as development dependency across 11 frontend packages. Also updated design system dependencies in studio-components to a test-friendliness build (0.0.0-fix-test-friendliness-20260330063914).
Core Frontend Setup src/Designer/frontend/package.json, src/Designer/frontend/testing/setupTests.ts, src/Designer/frontend/tsconfig.json	Added @oddbird/popover-polyfill (^0.6.1) to root frontend dependencies, imported polyfill in Jest setup, and added explicit TypeScript compiler type includes for jest, testing-library, and design system types.
Studio Components Test Refactoring src/Designer/frontend/libs/studio-components/src/components/StudioBooleanToggleGroup/StudioBooleanToggleGroup.test.tsx, src/Designer/frontend/libs/studio-components/src/components/StudioBooleanToggleGroup/StudioBooleanToggleGroup.tsx, src/Designer/frontend/libs/studio-components/src/components/StudioCodeListEditor/StudioCodeListEditor.test.tsx, src/Designer/frontend/libs/studio-components/src/components/StudioExpression/StudioExpression.test.tsx, src/Designer/frontend/libs/studio-components/src/components/StudioField/StudioField.test.tsx	Updated boolean toggle tests to query by group role instead of radiogroup, changed StudioBooleanToggleGroup forwarded ref from HTMLDivElement to HTMLFieldSetElement, wrapped code list validity test in it.failing(), and refactored field tests to use actual input elements instead of text content.
Component Accessibility Updates src/Designer/frontend/libs/studio-components/src/components/StudioExpression/.../LogicalOperatorToggle/LogicalOperatorToggle.tsx, src/Designer/frontend/libs/studio-components/src/components/StudioTextResourceInput/StudioTextResourceInput.tsx, src/Designer/frontend/packages/ux-editor/src/containers/BreadcrumbsTaskNavigation/BreadcrumbsTaskNavigation.tsx, src/Designer/frontend/packages/ux-editor/src/containers/BreadcrumbsTaskNavigation/BreadcrumbsTaskNavigation.test.tsx	Added aria-label attributes to LogicalOperatorToggle and StudioBreadcrumbs, replaced icon/title props with explicit aria-label in ModeToggle items, updated breadcrumb navigation test to query by role="list" instead of role="navigation".
Select & Pagination Component Updates src/Designer/frontend/libs/studio-components/src/components/StudioSelect/StudioSelect.tsx, src/Designer/frontend/libs/studio-components/src/components/StudioTableRemotePagination/StudioPagination/StudioPagination.tsx	Removed useId dependency and aria-describedby/aria-invalid attributes from StudioSelect error handling. Updated pagination buttons to use data-variant prop instead of variant.
Text Resource Editor Type Update src/Designer/frontend/libs/studio-components/src/components/StudioTextResourceEditor/StudioTextResourceEditor.tsx	Updated forwarded ref type from HTMLDivElement to DSTabElement to align with underlying StudioTabs element type.
Dashboard & Content Library Tests src/Designer/frontend/dashboard/testing/mocks.tsx, src/Designer/frontend/libs/studio-content-library/src/pages/CodeLists/.../CodeListsPage.test.tsx, src/Designer/frontend/libs/studio-content-library/src/pages/CodeListsWithTextResources/.../CodeListsWithTextResources.test.tsx, src/Designer/frontend/libs/studio-content-library/src/pages/CodeListsWithTextResources/.../CodeListsWithTextResourcesPage.test.tsx	Updated renderWithProviders to use renderAndRunTimers instead of direct render. Refactored code list tests to use queryDetailsBySummary() and querySummaryByText() helpers instead of role-based queries and DOM traversal.
Process Editor Tests src/Designer/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx, src/Designer/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.test.tsx, src/Designer/frontend/packages/process-editor/src/components/ConfigPanel/ConfigServiceTask/ConfigPdfServiceTask/ConfigPdfServiceTask.test.tsx	Updated accordion tests to use queryDetailsBySummary() helper. Refactored receipt accordion test to verify content visibility rather than aria-expanded attribute. Added getFieldsetByLegend usage for PDF mode fieldset location.
UX Editor Tests src/Designer/frontend/packages/ux-editor/src/components/Settings/.../ValidateRuleConfig.test.tsx, src/Designer/frontend/packages/ux-editor/src/components/Settings/.../ValidateNavigationTestUtils.ts, src/Designer/frontend/packages/ux-editor/src/components/config/editModal/.../OptionListEditor.test.tsx, src/Designer/frontend/packages/ux-editor/src/components/config/editModal/.../PublishedOptionListSelector.test.tsx	Updated ValidateRuleConfig to use renderAndRunTimers. Refactored selectSuggestionOption to use async findByRole for combobox. Added getFieldsetByLegend usage for form fieldset location queries.
Playwright E2E Tests src/Designer/frontend/testing/playwright/pages/OrgLibraryPage/CodeLists.ts, src/Designer/frontend/testing/playwright/pages/ProcessEditorPage/DataModelConfig.ts, src/Designer/frontend/testing/playwright/pages/ProcessEditorPage/PolicyConfig.ts	Refactored code list locators from role-based queries to title-based helpers. Updated accordion click selectors from button role to summary:text() locator. Added explicit timeout for policy editor visibility check.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 New helpers hop into our test domain,
Matchers and timers ease the refrain,
From divs to fieldsets, the types align,
A-labels bloom where accessibility shines,
Details by summary, we query with grace,
Testing's a joy in this newfound place!

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'build: Update The Design System' clearly and concisely summarises the main objective of the changeset, which is updating The Design System to the latest version.
Description check	✅ Passed	The PR description adequately covers the main changes: Design System updates, breaking changes to components (variant props, fieldset typing, aria-label additions), Jest polyfill setup, and Playwright test adjustments.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch update-the-design-system-minor

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[framitdavid]

Ryddig, gode kommentarer med todos, og fin PR-beskrivelse. Har ikke noe mer å utsette på selve koden som er endret. Jeg godkjenner review, men ruller den også ut i dev for å se hvordan dette ser ut. 😊

[framitdavid]

Supert, da har jeg testet i dev. Det meste ser bra ut og fungerer som forventet.

Testfunn 1

Det ser ut til at det har oppstått en feil med avstand/spacing i profilmenyen.

Testfunn 2

Noen av elementene ser også ut til å være litt lavere/smalere enn før, men det kan hende dette er tilsiktet fra designsystemet.

Før (prod)

Nå (dev)

[TomasEng]

@framitdavid

Testfunn 1

Det ser ut til at det har oppstått en feil med avstand/spacing i profilmenyen.

Dette bunner i at vi har <div>-elementer direkte i <ul>-elementet, noe som ikke er lov. Designsystemets CSS forutsetter at vi har gyldig HTML. For å fikse dette, bør vi egentlig skrive om StudioPageHeaderProfileMenu-komponenten slik at den ikke inneholder denne feilen (den bør antakelig inneholde flere Dropdown.List i stedet for å dele én opp i div-elementer). Ved første øyekast er jeg usikker på hvor mye arbeid det er, men jeg tror ikke det er gjort i en håndvending. Jeg kan lage en midlertidig fiks, men det blir ikke spesielt pent i koden, og det er ikke sikkert den vil holde seg gjennom ytterligere oppdateringer fra Designsystemet. Hva tenker du - er dette noe vil kan leve med inntil vi får ordnet det underliggende problemet, eller bør vi lage en midlertidig fiks?

Jeg ser nærmere på testfunn 2 i morgen.

[TomasEng]

@framitdavid

Testfunn 2

Noen av elementene ser også ut til å være litt lavere/smalere enn før, men det kan hende dette er tilsiktet fra designsystemet.

Dette skjer på grunn av en endring som gjør at størrelsen på ikonet regnes ut basert på skriftstørrelsen til button-elementet, uavhengig av om det er andre elementer imellom som endrer på den.

I vår kode er ikonet omgitt av en div med klassen tabIcon som setter skriftstørrelsen:

.tabIcon {
    /* ... */
    font-size: var(--ds-size-8);
}

Med gammel versjon av Designsystemet, blir denne størrelsen forstørret med en faktor på 1,3:

.ds-button :where(img, svg) {
    /* ... */
    font-size: 1.3em;
}

I den nye versjonen er det gjort en liten justering:

.ds-button :where(img, svg):not(.ds-spinner) {
    /* ... */
    font-size: calc(var(--_ds-captured-length) * 1.3);
}

--_ds-captured-length er satt til 1em på .ds-button. Resultatet av dette er at font-size i vår .tabIcon-CSS blir ignorert. Dette er det en smal sak å fikse (vi kan bare erstatte font-size med --_ds-captured-length i .tabIcon), men slik jeg tolker denne koden, er dette tilsiktet fra Designsystemet. Ikonstørrelsen skal bestemmes ut fra skriftstørrelsen som gjelder på button-nivå. Kan du bekrefte eller avkrefte dette, @mimarz? Hva er hensikten bak denne endringen?

[mimarz]

--_ds-captured-length er satt til 1em på .ds-button. Resultatet av dette er at font-size i vår .tabIcon-CSS blir ignorert. Dette er det en smal sak å fikse (vi kan bare erstatte font-size med --_ds-captured-length i .tabIcon), men slik jeg tolker denne koden, er dette tilsiktet fra Designsystemet. Ikonstørrelsen skal bestemmes ut fra skriftstørrelsen som gjelder på button-nivå. Kan du bekrefte eller avkrefte dette, @mimarz? Hva er hensikten bak denne endringen?

Dette var for å fikse svg ikon størrelser i Safari når du bruker zoom. 🔍
Nå husker jeg ikke detaljene, men det var mye fram og tilbake for å finne best mulig fix, så det måtte bli slik dessverre (og noe andre komponenter) hvor du må definere font-size på selve elementet.

Mer info finner du på PRen: digdir/designsystemet#4484

 & :where(img, svg):not(.ds-spinner) {
    flex-shrink: 0;
    /* using --_ds-captured-length fixes svg not scaling with zoom in Safari */
    font-size: calc(var(--_ds-captured-length) * 1.3);
  }

I retrospekt, skulle vi kanskje ha skrevet at font-size må nå defineres direkte på elementet dersom enn ønsker å overstyre den enkelte komponenten. Hadde det hjulpet?

[TomasEng]

Takk for oppklaringen, @mimarz.

I retrospekt, skulle vi kanskje ha skrevet at font-size må nå defineres direkte på elementet dersom enn ønsker å overstyre den enkelte komponenten. Hadde det hjulpet?

I dokumentasjonen tenker du på? Ja, det hadde hjulpet! Vil det si at vi heller burde gjøre dette;

.tabIcon svg {
  font-size: calc(var(--ds-size-8) * 1.3);
}

enn dette?

.tabIcon {
  --_ds-captured-length: var(--ds-size-8);
}