feat(skjemakomponenter): Legge til Valgfritt og Må fylles ut tags by lisamarimyreneNVE · Pull Request #1033 · NVE/Designsystem

lisamarimyreneNVE · 2026-10-16T08:13:39Z

Lagt til "Valgfritt" og "Må fylles ut" tags på:

nve-textarea
nve-radio-group
nve-input
nve-combobox
nve-checkbox-group
nve-segment-group

Inkludert oppdatert dokumentasjon på komponent-sidene og validering-avsnittet under "For utviklere". Gjerne dobbelsjekk at det er riktig kilde jeg har hentet fra UU tilsynet i lenken under det sistnevnte avsnittet.

Skisser: https://www.figma.com/design/0eXhyUrUF7fWi1VaphfpEu/04---%E2%9D%96-Komponenter?m=auto&node-id=5686-19689&t=gGIIlX20JosXCa0s-1

Fixes #1018

… paa skjemakomponenter

github-actions · 2026-10-16T08:15:11Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-1033.westeurope.5.azurestaticapps.net

Copilot

🟡 Changes recommended

Fixed badge heights allow wrapped label text to overflow and potentially overlap adjacent form content.

1 open finding

Badge height is fixed, causing wrapped labels to overflow · New

What changed in this PR

Adds “Må fylles ut” and “Valgfritt” label tags to six form components using the shared label template.

Changes:

Adds optional-field properties and shared tag styling.
Adds required and optional tag rendering tests.
Updates documentation and validation examples.

File	Description
src/templates/label.ts	Renders and styles validation tags.
src/components/nve-textarea/nve-textarea.test.ts	Tests both tags.
src/components/nve-textarea/nve-textarea.component.ts	Enables textarea tags.
src/components/nve-segment-group/nve-segment-group.test.ts	Tests both tags.
src/components/nve-segment-group/nve-segment-group.component.ts	Enables segment-group tags.
src/components/nve-radio-group/nve-radio-group.test.ts	Tests both tags.
src/components/nve-radio-group/nve-radio-group.component.ts	Enables radio-group tags.
src/components/nve-input/nve-input.test.ts	Tests both tags.
src/components/nve-input/nve-input.component.ts	Enables input tags.
src/components/nve-combobox/nve-combobox.test.ts	Tests both tags.
src/components/nve-combobox/nve-combobox.component.ts	Enables combobox tags.
src/components/nve-checkbox-group/nve-checkbox-group.test.ts	Tests both tags.
src/components/nve-checkbox-group/nve-checkbox-group.component.ts	Enables checkbox-group tags.
doc-site/introduction/forDevelopers/validation.md	Explains validation tags.
doc-site/components/nve-textarea.md	Updates tag and validation examples.
doc-site/components/nve-segment-group.md	Updates tag and validation examples.
doc-site/components/nve-radio-group.md	Updates tag and validation examples.
doc-site/components/nve-input.md	Updates tag and validation examples.
doc-site/components/nve-combobox.md	Updates tag and validation examples.
doc-site/components/nve-checkbox-group.md	Updates tag and validation examples.
doc-site/.vitepress/theme/style.css	Adds horizontal example layout.

🧠 Review effort: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

github-actions · 2026-10-16T08:19:41Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-1033.westeurope.5.azurestaticapps.net

Copilot

🟢 Approval recommended

The component changes are consistent, and the remaining documentation defects are minor and non-blocking.

0 open findings

1 resolved since last review

Badge height is fixed, causing wrapped labels to overflow

Previously missed (1)

In code that hasn't changed since last review

Remove stray language label from second example

doc-site/components/nve-segment-group.md:137

Both code fences share one CodeExamplePreview, whose textContent.replace('html', '') removes only the first language label (doc-site/.vitepress/theme/components/CodeExamplePreview.vue:8). The second html label appears as stray text in the live example. Keep both examples in one fenced block.

🧠 Review effort: Balanced

amish1188

Ser veldig bra ut :) bra du tok den!
Jeg har bare et par kommentarer.

amish1188 · 2026-10-16T11:58:30Z

-<b>To typer validering støttes:</b>
+### Valideringstags
+
+Etter retningslinjer fra <a href="https://www.uutilsynet.no/veiledning/skjema/38" target="_blank_">UU Tilsynet</a> er det ikke nødvendig å merke feltene som obligatoriske dersom flertallet av feltene er påkrevd. Brukeren må imidlertid informeres om dette før vedkommende begynner å fylle ut skjemaet.


Tror vi må kanskje endre litt på disse tekstene, required attributet bør alltid være med, men det er ok å skjule taggen i hvert fall.

Har oppdatert teksten nå, så gjerne se over igjen. Har prøvd å gjøre det mer tydelig.

…onTags attributten da det blir overflødig.

…ylles_ut_tag' of https://github.com/NVE/Designsystem into feature(skjemakomponenter)_Legge_til_valgfritt_og_maa_fylles_ut_tag

github-actions · 2026-10-16T12:26:22Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-1033.westeurope.5.azurestaticapps.net

Copilot

🟢 Approval recommended

The remaining feedback concerns non-blocking documentation issues; no blocking functional defects were identified.

1 open finding

Use a single-select control for mutually exclusive answers · New

🧠 Review effort: Balanced

Copilot

🟡 Changes recommended

The shared template breaks native label associations and hides checkbox-group required information from assistive technology.

3 open findings

🧠 Review effort: Balanced

  return useLegend
    ? html`<legend part="label" class="field__legend">${content}</legend>`
-    : html`<label part="label" class="field__label" for="${id}">${content}</label>`;
+    : html`<label part="label" class="field__label" id="${id}">${content}</label>`;


+  const validationTag = required
+    ? options?.hideRequiredTag
+      ? nothing
+      : html`<span class="field__label__validation field__label__validation--required" aria-hidden="true">${options?.requiredLabel || 'Må fylles ut'}</span>`


Copilot

🔵 Needs a closer look

Reported label-association and required-state accessibility regressions remain unresolved.

3 open findings

Previously missed (1)

In code that hasn't changed since last review

Keep both segment groups in a single fenced code block

doc-site/components/nve-segment-group.md:141

Both fenced blocks share one CodeExamplePreview. Its renderer (doc-site/.vitepress/theme/components/CodeExamplePreview.vue:8) reads the slot's combined text and removes only the first html language label, leaving the second label visible in the live example. Keep both segment groups in a single fenced block.

🧠 Review effort: Balanced

Copilot

🟡 Changes recommended

The required checkbox-group example uses an ignored attribute, disabling both the demonstrated tag and required validation.

3 open findings

1 resolved since last review

Use a single-select control for mutually exclusive answers

🧠 Review effort: Balanced

github-actions · 2026-10-16T12:56:36Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-1033.westeurope.5.azurestaticapps.net

Copilot

🟡 Changes recommended

The updated label-association tests accept duplicate IDs instead of detecting broken label-to-control relationships.

3 open findings

1 resolved since last review

Correct the required attribute typo

Previously missed (1)

In code that hasn't changed since last review

Correct misspelled required attribute

doc-site/components/nve-checkbox-group.md:136

requried is not recognized, so this live example neither enables required nor displays the “Må fylles ut” tag. Change it to required.

🧠 Review effort: Balanced

    expect(input).not.toBeNull();
    expect(input?.id).toBeTruthy();
-    expect(label?.getAttribute('for')).toBe(input?.id);
+    expect(label?.getAttribute('id')).toBe(input?.id);


lisamarimyrene added 2 commits October 16, 2026 08:17

feature(skjemakomponenter): Legge til valgfritt og maa fylles ut tags…

8cba16c

… paa skjemakomponenter

oppdater validering dokumentasjon

75193ee

Copilot AI balanced review requested due to automatic review settings October 16, 2026 08:13

lisamarimyreneNVE requested review from NVEJoel, amish1188, gruble, malingranlynve and tomapedersen as code owners October 16, 2026 08:13

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 08:14

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Comment thread src/templates/label.ts Outdated

Change height to min-height for label styles

36d7c7c

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI balanced review requested due to automatic review settings October 16, 2026 08:18

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 08:18

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

amish1188 requested changes Oct 16, 2026

View reviewed changes

lisamarimyrene added 2 commits October 16, 2026 14:24

Legg til hideRequiredTag og opionalLabel attributter. Fjerne validati…

953f24a

…onTags attributten da det blir overflødig.

Merge branch 'feature(skjemakomponenter)_Legge_til_valgfritt_og_maa_f…

d0dd1aa

…ylles_ut_tag' of https://github.com/NVE/Designsystem into feature(skjemakomponenter)_Legge_til_valgfritt_og_maa_fylles_ut_tag

Copilot AI balanced review requested due to automatic review settings October 16, 2026 12:24

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 12:25

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Comment thread doc-site/components/nve-checkbox-group.md Outdated

add changes from comments in PR

a406245

Copilot AI balanced review requested due to automatic review settings October 16, 2026 12:35

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 12:36

View session

fix code preview from ts to html

a5234d8

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Copilot AI balanced review requested due to automatic review settings October 16, 2026 12:39

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 12:40

View session

change code preview

2305ecd

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Copilot AI balanced review requested due to automatic review settings October 16, 2026 12:43

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 12:43

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Comment thread doc-site/components/nve-checkbox-group.md Outdated

fix tests

f02adcd

Copilot AI balanced review requested due to automatic review settings October 16, 2026 12:55

Copilot started reviewing on behalf of lisamarimyreneNVE October 16, 2026 12:55

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Comment thread src/components/nve-input/nve-input.test.ts

expect(input).not.toBeNull();

expect(input?.id).toBeTruthy();

expect(label?.getAttribute('for')).toBe(input?.id);

expect(label?.getAttribute('id')).toBe(input?.id);

Conversation

lisamarimyreneNVE commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

amish1188 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amish1188 Oct 16, 2026

Choose a reason for hiding this comment

Uh oh!

lisamarimyreneNVE Oct 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lisamarimyreneNVE commented Oct 16, 2026 •

edited

Loading