From 6497bb8a208d21b85a9f0b7abb6f83d427a9b380 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 24 Sep 2024 11:47:07 +0200
Subject: [PATCH 01/23] feat(Field): start implementing field api

---
 .../react/src/components/form/Field/Field.mdx |  8 ++++++++
 .../components/form/Field/Field.stories.tsx   | 20 +++++++++++++++++++
 .../react/src/components/form/Field/Field.tsx | 13 ++++++++++++
 .../react/src/components/form/Field/index.ts  |  1 +
 packages/react/src/components/index.ts        |  1 +
 5 files changed, 43 insertions(+)
 create mode 100644 packages/react/src/components/form/Field/Field.mdx
 create mode 100644 packages/react/src/components/form/Field/Field.stories.tsx
 create mode 100644 packages/react/src/components/form/Field/Field.tsx
 create mode 100644 packages/react/src/components/form/Field/index.ts

diff --git a/packages/react/src/components/form/Field/Field.mdx b/packages/react/src/components/form/Field/Field.mdx
new file mode 100644
index 0000000000..17035526b1
--- /dev/null
+++ b/packages/react/src/components/form/Field/Field.mdx
@@ -0,0 +1,8 @@
+import { Meta, Controls, Primary } from '@storybook/blocks';
+
+import * as FieldStories from './Field.stories';
+
+<Meta of={FieldStories} />
+
+<Primary />
+<Controls />
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
new file mode 100644
index 0000000000..00b5c8e79c
--- /dev/null
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Textarea } from '../Textarea';
+import { Textfield } from '../Textfield';
+
+import { Field } from '.';
+
+type Story = StoryFn<typeof Field>;
+
+export default {
+  title: 'Komponenter/Field',
+  component: Field,
+} as Meta;
+
+export const Preview: Story = (args) => (
+  <Field {...args}>
+    <Textfield label='Kort beskrivelse'></Textfield>
+    <Textarea label='Lang beskrivelse'></Textarea>
+  </Field>
+);
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
new file mode 100644
index 0000000000..8a50a64139
--- /dev/null
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -0,0 +1,13 @@
+import cl from 'clsx/lite';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useContext } from 'react';
+
+export type FieldProps = HTMLAttributes<HTMLDivElement>;
+
+export const Field = forwardRef<HTMLDivElement, FieldProps>(
+  function Field(props, ref) {
+    const { className, ...rest } = props;
+
+    return <div className={cl('ds-field', className)} ref={ref} {...rest} />;
+  },
+);
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
new file mode 100644
index 0000000000..deacb78271
--- /dev/null
+++ b/packages/react/src/components/form/Field/index.ts
@@ -0,0 +1 @@
+export * from './Field';
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index a4eec0aa5e..9949a1e24b 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -16,6 +16,7 @@ export * from './Chip';
 export * from './Pagination';
 export * from './SkipLink';
 export * from './Tooltip';
+export * from './form/Field';
 export * from './form/Checkbox';
 export * from './form/Radio';
 export * from './form/Fieldset';

From 8d66fa6d29f5f66fcc37c55ac953a8996bf5f42b Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 25 Sep 2024 18:48:27 +0200
Subject: [PATCH 02/23] fix(Field): create a11yField utility

---
 .../ValidationMessage/ValidationMessage.tsx   |  1 +
 .../components/form/Field/Field.stories.tsx   | 31 ++++++++++++++-----
 .../react/src/components/form/Field/Field.tsx | 22 ++++++++-----
 .../src/components/form/Field/FieldHelp.tsx   | 10 ++++++
 .../components/form/Field/FieldValidation.tsx | 13 ++++++++
 .../src/components/form/Field/a11yField.ts    | 27 ++++++++++++++++
 .../react/src/components/form/Field/index.ts  | 25 ++++++++++++++-
 7 files changed, 112 insertions(+), 17 deletions(-)
 create mode 100644 packages/react/src/components/form/Field/FieldHelp.tsx
 create mode 100644 packages/react/src/components/form/Field/FieldValidation.tsx
 create mode 100644 packages/react/src/components/form/Field/a11yField.ts

diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
index d0e514de37..4863924bba 100644
--- a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
@@ -35,6 +35,7 @@ export const ValidationMessage = forwardRef<
       className={cl(`ds-validation-message--${size}`, className)}
       data-error={error || undefined}
       data-spacing={spacing || undefined}
+      data-validation
       ref={ref}
       {...rest}
     />
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 00b5c8e79c..1863b2a757 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Textarea } from '../Textarea';
-import { Textfield } from '../Textfield';
+import { Label } from '../../Typography/Label';
 
 import { Field } from '.';
 
@@ -12,9 +11,25 @@ export default {
   component: Field,
 } as Meta;
 
-export const Preview: Story = (args) => (
-  <Field {...args}>
-    <Textfield label='Kort beskrivelse'></Textfield>
-    <Textarea label='Lang beskrivelse'></Textarea>
-  </Field>
-);
+// TMP toggles to test a11yField utility
+const toggles = {
+  label: true,
+  description: true,
+  validation: true,
+};
+
+export const Preview: Story = (args) => {
+  const { label, description, validation } = args as typeof toggles;
+
+  return (
+    <Field>
+      {label && <Label>Kort beskrivelse</Label>}
+      {description && <Field.Help>Beskrivelse</Field.Help>}
+      <textarea style={{ display: 'block' }} />
+      {validation && <Field.Validation>Feilmelding</Field.Validation>}
+    </Field>
+  );
+};
+
+// @ts-expect-error
+Preview.args = toggles;
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
index 8a50a64139..bcafe641b8 100644
--- a/packages/react/src/components/form/Field/Field.tsx
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -1,13 +1,19 @@
+import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
+import { a11yField } from './a11yField';
 
 export type FieldProps = HTMLAttributes<HTMLDivElement>;
+export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
+  { className, ...rest },
+  ref,
+) {
+  const fieldRef = useRef<HTMLDivElement>(null);
+  const mergedRefs = useMergeRefs([fieldRef, ref]);
+  useEffect(() => a11yField(fieldRef.current)); // Intentionally run on each render
 
-export const Field = forwardRef<HTMLDivElement, FieldProps>(
-  function Field(props, ref) {
-    const { className, ...rest } = props;
-
-    return <div className={cl('ds-field', className)} ref={ref} {...rest} />;
-  },
-);
+  return (
+    <div className={cl('ds-field', className)} ref={mergedRefs} {...rest} />
+  );
+});
diff --git a/packages/react/src/components/form/Field/FieldHelp.tsx b/packages/react/src/components/form/Field/FieldHelp.tsx
new file mode 100644
index 0000000000..31293aa100
--- /dev/null
+++ b/packages/react/src/components/form/Field/FieldHelp.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type FieldHelpProps = HTMLAttributes<HTMLDivElement>;
+
+export const FieldHelp = forwardRef<HTMLDivElement, FieldHelpProps>(
+  function FieldHelp(rest, ref) {
+    return <div data-field-help ref={ref} {...rest} />;
+  },
+);
diff --git a/packages/react/src/components/form/Field/FieldValidation.tsx b/packages/react/src/components/form/Field/FieldValidation.tsx
new file mode 100644
index 0000000000..20979f7238
--- /dev/null
+++ b/packages/react/src/components/form/Field/FieldValidation.tsx
@@ -0,0 +1,13 @@
+// TMP File, maybe ValidationMessage can just be this?
+import { forwardRef } from 'react';
+import { ValidationMessage } from '../../Typography';
+import type { ValidationMessageProps } from '../../Typography';
+
+export type FieldValidationProps = ValidationMessageProps;
+
+export const FieldValidation = forwardRef<
+  HTMLDivElement,
+  ValidationMessageProps
+>(function FieldValidation(rest, ref) {
+  return <ValidationMessage data-field-validation ref={ref} {...rest} />;
+});
diff --git a/packages/react/src/components/form/Field/a11yField.ts b/packages/react/src/components/form/Field/a11yField.ts
new file mode 100644
index 0000000000..b7aa052df8
--- /dev/null
+++ b/packages/react/src/components/form/Field/a11yField.ts
@@ -0,0 +1,27 @@
+// Utility function to manage a11y attributes
+let a11yFieldId = Date.now();
+const ARIA_DESC = 'aria-describedby';
+
+export const a11yField = (field: HTMLElement | null) => {
+  const desc = field?.querySelector('[data-field-help]');
+  const label = field?.querySelector('label');
+  const valid = field?.querySelector('[data-field-validation]');
+  const input = Array.from(field?.querySelectorAll('*') || []).find(
+    (el) => 'validity' in el, // Find both native form elements and form-associated custom elements
+  );
+
+  if (input && !input.id) input.id = (++a11yFieldId).toString(32); // Must run first
+  if (desc && !desc.id) desc.id = `${input?.id}:desc`;
+  if (label && !label.htmlFor) label.htmlFor = input?.id || '';
+  if (valid && !valid.id) valid.id = `${input?.id}:valid`;
+
+  // Set aria-description, and make order is: validation, description, ...rest
+  const descs =
+    `${valid?.id || ''} ${desc?.id || ''} ${input?.getAttribute(ARIA_DESC)?.trim() || ''}`
+      .split(' ')
+      .filter((id, index) => (index < 2 ? id : !id.startsWith(input?.id || '')))
+      .join(' ');
+
+  if (descs) input?.setAttribute(ARIA_DESC, descs);
+  else input?.removeAttribute(ARIA_DESC);
+};
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index deacb78271..2c9ea48b97 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -1 +1,24 @@
-export * from './Field';
+import { Field as FieldParent } from './Field';
+import { FieldHelp } from './FieldHelp';
+import { FieldValidation } from './FieldValidation';
+
+/**
+ * @example
+ * <Field>
+ *  <Label>Label text</Label>
+ *  <Field.Help>Help text</Field.Help>
+ *  <Input />
+ *  <Field.Validation>Validation message</Field.Validation>
+ * </Field>
+ */
+const Field = Object.assign(FieldParent, {
+  Help: FieldHelp,
+  Validation: FieldValidation,
+});
+
+Field.Help.displayName = 'Field.Help';
+Field.Validation.displayName = 'Field.Validation';
+
+export type { FieldProps } from './Field';
+export type { FieldHelpProps } from './FieldHelp';
+export { Field, FieldHelp, FieldValidation };

From b3481c6964779a32e3b8fa5b4a5e7704c4494f5e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 25 Sep 2024 18:56:47 +0200
Subject: [PATCH 03/23] fix(Field): better demo story

---
 .../src/components/form/Field/Field.stories.tsx    | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 1863b2a757..c272b31f28 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -9,23 +9,31 @@ type Story = StoryFn<typeof Field>;
 export default {
   title: 'Komponenter/Field',
   component: Field,
+  argTypes: {
+    type: {
+      control: { type: 'radio' },
+      options: ['textarea', 'input', 'select'],
+    },
+  },
 } as Meta;
 
 // TMP toggles to test a11yField utility
 const toggles = {
+  type: 'textarea',
   label: true,
   description: true,
   validation: true,
 };
 
 export const Preview: Story = (args) => {
-  const { label, description, validation } = args as typeof toggles;
+  const { type, label, description, validation } = args as typeof toggles;
+  const Component = type;
 
   return (
     <Field>
-      {label && <Label>Kort beskrivelse</Label>}
+      {label && <Label style={{ display: 'block' }}>Kort beskrivelse</Label>}
       {description && <Field.Help>Beskrivelse</Field.Help>}
-      <textarea style={{ display: 'block' }} />
+      <Component />
       {validation && <Field.Validation>Feilmelding</Field.Validation>}
     </Field>
   );

From 9b710463cde25252c7dd7a50eab29029f5c00d03 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 25 Sep 2024 19:06:13 +0200
Subject: [PATCH 04/23] fix(Field): rename Field.Help to Field.Description

---
 .../src/components/form/Field/Field.stories.tsx      |  2 +-
 .../src/components/form/Field/FieldDescription.tsx   | 11 +++++++++++
 .../react/src/components/form/Field/FieldHelp.tsx    | 10 ----------
 .../react/src/components/form/Field/a11yField.ts     |  2 +-
 packages/react/src/components/form/Field/index.ts    | 12 ++++++------
 5 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 packages/react/src/components/form/Field/FieldDescription.tsx
 delete mode 100644 packages/react/src/components/form/Field/FieldHelp.tsx

diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index c272b31f28..a09e5ce108 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -32,7 +32,7 @@ export const Preview: Story = (args) => {
   return (
     <Field>
       {label && <Label style={{ display: 'block' }}>Kort beskrivelse</Label>}
-      {description && <Field.Help>Beskrivelse</Field.Help>}
+      {description && <Field.Description>Beskrivelse</Field.Description>}
       <Component />
       {validation && <Field.Validation>Feilmelding</Field.Validation>}
     </Field>
diff --git a/packages/react/src/components/form/Field/FieldDescription.tsx b/packages/react/src/components/form/Field/FieldDescription.tsx
new file mode 100644
index 0000000000..c879d95401
--- /dev/null
+++ b/packages/react/src/components/form/Field/FieldDescription.tsx
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type FieldDescriptionProps = HTMLAttributes<HTMLDivElement>;
+
+export const FieldDescription = forwardRef<
+  HTMLDivElement,
+  FieldDescriptionProps
+>(function FieldDescription(rest, ref) {
+  return <div data-field-description ref={ref} {...rest} />;
+});
diff --git a/packages/react/src/components/form/Field/FieldHelp.tsx b/packages/react/src/components/form/Field/FieldHelp.tsx
deleted file mode 100644
index 31293aa100..0000000000
--- a/packages/react/src/components/form/Field/FieldHelp.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-export type FieldHelpProps = HTMLAttributes<HTMLDivElement>;
-
-export const FieldHelp = forwardRef<HTMLDivElement, FieldHelpProps>(
-  function FieldHelp(rest, ref) {
-    return <div data-field-help ref={ref} {...rest} />;
-  },
-);
diff --git a/packages/react/src/components/form/Field/a11yField.ts b/packages/react/src/components/form/Field/a11yField.ts
index b7aa052df8..715a7125af 100644
--- a/packages/react/src/components/form/Field/a11yField.ts
+++ b/packages/react/src/components/form/Field/a11yField.ts
@@ -3,7 +3,7 @@ let a11yFieldId = Date.now();
 const ARIA_DESC = 'aria-describedby';
 
 export const a11yField = (field: HTMLElement | null) => {
-  const desc = field?.querySelector('[data-field-help]');
+  const desc = field?.querySelector('[data-field-description]');
   const label = field?.querySelector('label');
   const valid = field?.querySelector('[data-field-validation]');
   const input = Array.from(field?.querySelectorAll('*') || []).find(
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index 2c9ea48b97..7995b13e2c 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -1,24 +1,24 @@
 import { Field as FieldParent } from './Field';
-import { FieldHelp } from './FieldHelp';
+import { FieldDescription } from './FieldDescription';
 import { FieldValidation } from './FieldValidation';
 
 /**
  * @example
  * <Field>
  *  <Label>Label text</Label>
- *  <Field.Help>Help text</Field.Help>
+ *  <Field.Hint>Description</Field.Hint>
  *  <Input />
  *  <Field.Validation>Validation message</Field.Validation>
  * </Field>
  */
 const Field = Object.assign(FieldParent, {
-  Help: FieldHelp,
+  Description: FieldDescription,
   Validation: FieldValidation,
 });
 
-Field.Help.displayName = 'Field.Help';
+Field.Description.displayName = 'Field.Description';
 Field.Validation.displayName = 'Field.Validation';
 
 export type { FieldProps } from './Field';
-export type { FieldHelpProps } from './FieldHelp';
-export { Field, FieldHelp, FieldValidation };
+export type { FieldDescriptionProps } from './FieldDescription';
+export { Field, FieldDescription, FieldValidation };

From ffd79960148a906087e1a85414e96f99060118fc Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 25 Sep 2024 19:23:44 +0200
Subject: [PATCH 05/23] chore(Field): fix typo

---
 packages/react/src/components/form/Field/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index 7995b13e2c..8722a803b6 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -6,7 +6,7 @@ import { FieldValidation } from './FieldValidation';
  * @example
  * <Field>
  *  <Label>Label text</Label>
- *  <Field.Hint>Description</Field.Hint>
+ *  <Field.Description>Description</Field.Description>
  *  <Input />
  *  <Field.Validation>Validation message</Field.Validation>
  * </Field>

From 38b8c20654cc6f876bae3cdf1ffedb5875e031ae Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Thu, 26 Sep 2024 09:29:07 +0200
Subject: [PATCH 06/23] chore(ValidationMessage): remove api

---
 .../Typography/ValidationMessage/ValidationMessage.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
index 4863924bba..d0e514de37 100644
--- a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
@@ -35,7 +35,6 @@ export const ValidationMessage = forwardRef<
       className={cl(`ds-validation-message--${size}`, className)}
       data-error={error || undefined}
       data-spacing={spacing || undefined}
-      data-validation
       ref={ref}
       {...rest}
     />

From 3871051cd9b8678fa9f5534a7f526be10bc521f8 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Thu, 26 Sep 2024 09:41:39 +0200
Subject: [PATCH 07/23] fix(Field): use validationmessage directly

---
 .../ValidationMessage/ValidationMessage.tsx         |  1 +
 .../src/components/form/Field/Field.stories.tsx     |  3 ++-
 .../src/components/form/Field/FieldValidation.tsx   | 13 -------------
 packages/react/src/components/form/Field/index.ts   |  5 +----
 4 files changed, 4 insertions(+), 18 deletions(-)
 delete mode 100644 packages/react/src/components/form/Field/FieldValidation.tsx

diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
index d0e514de37..1c17318630 100644
--- a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
@@ -35,6 +35,7 @@ export const ValidationMessage = forwardRef<
       className={cl(`ds-validation-message--${size}`, className)}
       data-error={error || undefined}
       data-spacing={spacing || undefined}
+      data-field-validation
       ref={ref}
       {...rest}
     />
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index a09e5ce108..6c3601e609 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { Label } from '../../Typography/Label';
 
 import { Field } from '.';
+import { ValidationMessage } from '../../Typography';
 
 type Story = StoryFn<typeof Field>;
 
@@ -34,7 +35,7 @@ export const Preview: Story = (args) => {
       {label && <Label style={{ display: 'block' }}>Kort beskrivelse</Label>}
       {description && <Field.Description>Beskrivelse</Field.Description>}
       <Component />
-      {validation && <Field.Validation>Feilmelding</Field.Validation>}
+      {validation && <ValidationMessage>Feilmelding</ValidationMessage>}
     </Field>
   );
 };
diff --git a/packages/react/src/components/form/Field/FieldValidation.tsx b/packages/react/src/components/form/Field/FieldValidation.tsx
deleted file mode 100644
index 20979f7238..0000000000
--- a/packages/react/src/components/form/Field/FieldValidation.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// TMP File, maybe ValidationMessage can just be this?
-import { forwardRef } from 'react';
-import { ValidationMessage } from '../../Typography';
-import type { ValidationMessageProps } from '../../Typography';
-
-export type FieldValidationProps = ValidationMessageProps;
-
-export const FieldValidation = forwardRef<
-  HTMLDivElement,
-  ValidationMessageProps
->(function FieldValidation(rest, ref) {
-  return <ValidationMessage data-field-validation ref={ref} {...rest} />;
-});
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index 8722a803b6..9b737f9738 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -1,6 +1,5 @@
 import { Field as FieldParent } from './Field';
 import { FieldDescription } from './FieldDescription';
-import { FieldValidation } from './FieldValidation';
 
 /**
  * @example
@@ -13,12 +12,10 @@ import { FieldValidation } from './FieldValidation';
  */
 const Field = Object.assign(FieldParent, {
   Description: FieldDescription,
-  Validation: FieldValidation,
 });
 
 Field.Description.displayName = 'Field.Description';
-Field.Validation.displayName = 'Field.Validation';
 
 export type { FieldProps } from './Field';
 export type { FieldDescriptionProps } from './FieldDescription';
-export { Field, FieldDescription, FieldValidation };
+export { Field, FieldDescription };

From e8054ef68d22c2c602b417e5771063b38e77738a Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 27 Sep 2024 14:19:58 +0200
Subject: [PATCH 08/23] fix: moving to mutationobserver wip

---
 .../components/form/Field/Field.stories.tsx   | 27 +++++-
 .../react/src/components/form/Field/Field.tsx |  2 +-
 .../src/components/form/Field/a11yField.ts    | 97 ++++++++++++++-----
 3 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 6c3601e609..e91aa22c66 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -22,20 +22,39 @@ export default {
 const toggles = {
   type: 'textarea',
   label: true,
+  ariaDesribedby: '',
   description: true,
+  descriptionId: '',
   validation: true,
+  validationId: '',
 };
 
 export const Preview: Story = (args) => {
-  const { type, label, description, validation } = args as typeof toggles;
+  const {
+    ariaDesribedby,
+    type,
+    label,
+    description,
+    descriptionId,
+    validation,
+    validationId,
+  } = args as typeof toggles;
   const Component = type;
 
   return (
     <Field>
       {label && <Label style={{ display: 'block' }}>Kort beskrivelse</Label>}
-      {description && <Field.Description>Beskrivelse</Field.Description>}
-      <Component />
-      {validation && <ValidationMessage>Feilmelding</ValidationMessage>}
+      {description && (
+        <Field.Description id={descriptionId || undefined}>
+          Beskrivelse
+        </Field.Description>
+      )}
+      <Component aria-describedby={ariaDesribedby || undefined} />
+      {validation && (
+        <ValidationMessage id={validationId || undefined}>
+          Feilmelding
+        </ValidationMessage>
+      )}
     </Field>
   );
 };
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
index bcafe641b8..3dbbf85045 100644
--- a/packages/react/src/components/form/Field/Field.tsx
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -11,7 +11,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
 ) {
   const fieldRef = useRef<HTMLDivElement>(null);
   const mergedRefs = useMergeRefs([fieldRef, ref]);
-  useEffect(() => a11yField(fieldRef.current)); // Intentionally run on each render
+  useEffect(() => a11yField(fieldRef.current), []); // Intentionally run on each render
 
   return (
     <div className={cl('ds-field', className)} ref={mergedRefs} {...rest} />
diff --git a/packages/react/src/components/form/Field/a11yField.ts b/packages/react/src/components/form/Field/a11yField.ts
index 715a7125af..b497469f82 100644
--- a/packages/react/src/components/form/Field/a11yField.ts
+++ b/packages/react/src/components/form/Field/a11yField.ts
@@ -1,27 +1,80 @@
+import { i } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
+
 // Utility function to manage a11y attributes
-let a11yFieldId = Date.now();
+const a11yFieldId = Date.now();
 const ARIA_DESC = 'aria-describedby';
+const DATA_DESC = 'data-field-description';
+const DATA_VALID = 'data-field-validation';
+const VOID = () => {};
 
 export const a11yField = (field: HTMLElement | null) => {
-  const desc = field?.querySelector('[data-field-description]');
-  const label = field?.querySelector('label');
-  const valid = field?.querySelector('[data-field-validation]');
-  const input = Array.from(field?.querySelectorAll('*') || []).find(
-    (el) => 'validity' in el, // Find both native form elements and form-associated custom elements
-  );
-
-  if (input && !input.id) input.id = (++a11yFieldId).toString(32); // Must run first
-  if (desc && !desc.id) desc.id = `${input?.id}:desc`;
-  if (label && !label.htmlFor) label.htmlFor = input?.id || '';
-  if (valid && !valid.id) valid.id = `${input?.id}:valid`;
-
-  // Set aria-description, and make order is: validation, description, ...rest
-  const descs =
-    `${valid?.id || ''} ${desc?.id || ''} ${input?.getAttribute(ARIA_DESC)?.trim() || ''}`
-      .split(' ')
-      .filter((id, index) => (index < 2 ? id : !id.startsWith(input?.id || '')))
-      .join(' ');
-
-  if (descs) input?.setAttribute(ARIA_DESC, descs);
-  else input?.removeAttribute(ARIA_DESC);
+  if (!field) return;
+  const elements = new Map<Element, ReadonlyArray<[string, string]>>(); // Map of element to [id, attr]
+  let desc: Node | null = null;
+  let input: Node | null = null;
+  let label: HTMLLabelElement | null = null;
+  let valid: Node | null = null;
+
+  const handleMutations = (mutations: Partial<MutationRecord>[]) => {
+    const added: Node[] = [];
+    const removed: Node[] = [];
+
+    for (const { target, addedNodes = [], removedNodes = [] } of mutations) {
+      if (target && target !== field) added.push(target);
+      else added.push(...addedNodes);
+      removed.push(...removedNodes);
+    }
+
+    for (const el of added)
+      if (el instanceof Element) {
+        if (!desc && el.hasAttribute(DATA_DESC)) desc = el;
+        if (!input && 'validity' in el) input = el; // Find both native form elements and form-associated custom elements
+        if (!label && el instanceof HTMLLabelElement) label = el;
+        if (!valid && el.hasAttribute(DATA_VALID)) valid = el;
+      }
+    console.log({ desc, input, label, valid });
+    observer.takeRecords(); // Clear the queue if we done DOM changes in the callback
+  };
+  const observer = new MutationObserver(handleMutations);
+
+  observer.observe(field, {
+    attributeFilter: ['id', ARIA_DESC],
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+
+  // Trigger initial setup
+  handleMutations([{ addedNodes: field.querySelectorAll('*') }]);
+  return () => observer.disconnect();
 };
+
+const attr = (node: Element, key: string, set?: string) => {
+  const val = node.getAttribute(key);
+  if (set) node.setAttribute(key, set);
+  else node.removeAttribute(key);
+
+  return () => (val ? node.setAttribute(key, val) : node.removeAttribute(key));
+};
+
+// const desc = field?.querySelector('[data-field-description]');
+// const label = field?.querySelector('label');
+// const valid = field?.querySelector('[data-field-validation]');
+// const input = Array.from(field?.querySelectorAll('*') || []).find(
+//   (el) => 'validity' in el, // Find both native form elements and form-associated custom elements
+// );
+
+// if (input && !input.id) input.id = (++a11yFieldId).toString(32); // Must run first
+// if (desc && !desc.id) desc.id = `${input?.id}:desc`;
+// if (label && !label.htmlFor) label.htmlFor = input?.id || '';
+// if (valid && !valid.id) valid.id = `${input?.id}:valid`;
+
+// // Set aria-description, and make order is: validation, description, ...rest
+// const descs =
+//   `${valid?.id || ''} ${desc?.id || ''} ${input?.getAttribute(ARIA_DESC)?.trim() || ''}`
+//     .split(' ')
+//     .filter((id, index) => (index < 2 ? id : !id.startsWith(input?.id || '')))
+//     .join(' ');
+
+// if (descs) input?.setAttribute(ARIA_DESC, descs);
+// else input?.removeAttribute(ARIA_DESC);

From 58534aacc753fbc58810cc1ddf55581bb99ab278 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Sat, 28 Sep 2024 13:37:37 +0200
Subject: [PATCH 09/23] fix: continue mutationobserver implementation

---
 .../src/components/form/Field/a11yField.ts    | 111 ++++++++++++------
 1 file changed, 75 insertions(+), 36 deletions(-)

diff --git a/packages/react/src/components/form/Field/a11yField.ts b/packages/react/src/components/form/Field/a11yField.ts
index b497469f82..8aa505bdf8 100644
--- a/packages/react/src/components/form/Field/a11yField.ts
+++ b/packages/react/src/components/form/Field/a11yField.ts
@@ -1,38 +1,43 @@
-import { i } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
-
 // Utility function to manage a11y attributes
-const a11yFieldId = Date.now();
+let a11yFieldId = Date.now();
 const ARIA_DESC = 'aria-describedby';
-const DATA_DESC = 'data-field-description';
-const DATA_VALID = 'data-field-validation';
-const VOID = () => {};
+const ELEMENTS = [
+  ['input', 'id', (el: Element) => 'validity' in el], // Muse be first
+  ['label', 'for', (el: Element) => el instanceof HTMLLabelElement],
+  ['desc', 'id', (el: Element) => el.hasAttribute('data-field-description')],
+  ['valid', 'id', (el: Element) => el.hasAttribute('data-field-validation')],
+] as const;
 
 export const a11yField = (field: HTMLElement | null) => {
   if (!field) return;
-  const elements = new Map<Element, ReadonlyArray<[string, string]>>(); // Map of element to [id, attr]
-  let desc: Node | null = null;
-  let input: Node | null = null;
-  let label: HTMLLabelElement | null = null;
-  let valid: Node | null = null;
+  const elements: Record<string, string> = {}; // Map of element to [id, attr]
 
   const handleMutations = (mutations: Partial<MutationRecord>[]) => {
-    const added: Node[] = [];
-    const removed: Node[] = [];
-
-    for (const { target, addedNodes = [], removedNodes = [] } of mutations) {
-      if (target && target !== field) added.push(target);
-      else added.push(...addedNodes);
-      removed.push(...removedNodes);
-    }
-
-    for (const el of added)
-      if (el instanceof Element) {
-        if (!desc && el.hasAttribute(DATA_DESC)) desc = el;
-        if (!input && 'validity' in el) input = el; // Find both native form elements and form-associated custom elements
-        if (!label && el instanceof HTMLLabelElement) label = el;
-        if (!valid && el.hasAttribute(DATA_VALID)) valid = el;
-      }
-    console.log({ desc, input, label, valid });
+    let input: Element | undefined;
+    const changed: Node[] = [];
+
+    for (const { target, addedNodes = [], removedNodes = [] } of mutations)
+      changed.push(target ?? field, ...addedNodes, ...removedNodes);
+
+    for (const [key, attr, check] of ELEMENTS)
+      for (const el of changed)
+        if (el instanceof Element && check(el)) {
+          const reset = elements[key];
+          const prev = el.getAttribute(attr);
+          const next = `${input?.id ?? (++a11yFieldId).toString(32)}${key !== 'input' && attr === 'id' ? `:${key}` : ''}`;
+
+          if (key === 'input') input = el;
+          if (!prev) el.setAttribute(attr, next);
+          elements[key] = prev || next;
+        }
+
+    const descs = [
+      elements.valid,
+      elements.desc,
+      input?.getAttribute(ARIA_DESC),
+    ];
+    console.log(descs);
+
     observer.takeRecords(); // Clear the queue if we done DOM changes in the callback
   };
   const observer = new MutationObserver(handleMutations);
@@ -44,18 +49,52 @@ export const a11yField = (field: HTMLElement | null) => {
     subtree: true,
   });
 
-  // Trigger initial setup
-  handleMutations([{ addedNodes: field.querySelectorAll('*') }]);
+  handleMutations([{ addedNodes: field.querySelectorAll('*') }]); // Initial setup
   return () => observer.disconnect();
 };
 
-const attr = (node: Element, key: string, set?: string) => {
-  const val = node.getAttribute(key);
-  if (set) node.setAttribute(key, set);
-  else node.removeAttribute(key);
+// const attr = (node: Element, key: string, set?: string) => {
+//   const val = node.getAttribute(key);
+//   if (set) node.setAttribute(key, set);
+//   else node.removeAttribute(key);
 
-  return () => (val ? node.setAttribute(key, val) : node.removeAttribute(key));
-};
+//   return () => (val ? node.setAttribute(key, val) : node.removeAttribute(key));
+// };
+
+// for (const el of removed) {
+//   const attrs = elements.get(el);
+//   if (attrs) {
+//     el.setAttribute(attrs[0], attrs[1]);
+//     elements.delete(el);
+//   }
+// }
+
+// desc = added.find((el) => el.hasAttribute(DATA_DESC)) || desc;
+// input = added.find((el) => 'validity' in el) || input; // Find both native form elements and form-associated custom elements
+// label = added.find((el) => el instanceof HTMLLabelElement) || label;
+// valid = added.find((el) => el.hasAttribute(DATA_VALID)) || valid;
+
+// const inputId = input?.id || (++a11yFieldId).toString(32); // Must run first
+
+// for (const el of added)
+//   if (el instanceof Element) {
+//     if (!desc && el.hasAttribute(DATA_DESC)) desc = el;
+//     if (!input && 'validity' in el) input = el; // Find both native form elements and form-associated custom elements
+//     if (!label && el instanceof HTMLLabelElement) label = el;
+//     if (!valid && el.hasAttribute(DATA_VALID)) valid = el;
+//   }
+
+// const [prevEl, prevValue] = elements[key] || [];
+// const nowValue = el.getAttribute(attr);
+
+// if (prevEl) {
+//   if (prevValue) prevEl.setAttribute(attr, prevValue);
+//   else prevEl.removeAttribute(attr);
+// }
+// if (el.parentNode) {
+//   elements[key] = [el, nowValue];
+//   el;
+// }
 
 // const desc = field?.querySelector('[data-field-description]');
 // const label = field?.querySelector('label');

From f271f37c55a7631379bfebeb49943c034d8706e0 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 1 Oct 2024 07:58:25 +0200
Subject: [PATCH 10/23] fix: testing removing

---
 .../components/form/Field/Field.stories.tsx   |  18 +-
 .../src/components/form/Field/a11yField.ts    | 181 +++++++++++++++---
 2 files changed, 165 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index e91aa22c66..367fbecd44 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
+import { useEffect } from 'react';
 import { Label } from '../../Typography/Label';
 
 import { Field } from '.';
@@ -13,7 +14,7 @@ export default {
   argTypes: {
     type: {
       control: { type: 'radio' },
-      options: ['textarea', 'input', 'select'],
+      options: ['textarea', 'input', 'select', false],
     },
   },
 } as Meta;
@@ -27,6 +28,7 @@ const toggles = {
   descriptionId: '',
   validation: true,
   validationId: '',
+  moveToBody: false,
 };
 
 export const Preview: Story = (args) => {
@@ -38,20 +40,28 @@ export const Preview: Story = (args) => {
     descriptionId,
     validation,
     validationId,
+    moveToBody,
   } = args as typeof toggles;
   const Component = type;
 
+  useEffect(() => {
+    const valid = document.querySelector('[data-my-validation]');
+    const field = document.querySelector('[data-my-field]');
+    const root = moveToBody ? document.body : field;
+    if (valid && valid.parentElement !== root) root?.appendChild(valid);
+  }, [moveToBody]);
+
   return (
-    <Field>
+    <Field data-my-field>
       {label && <Label style={{ display: 'block' }}>Kort beskrivelse</Label>}
       {description && (
         <Field.Description id={descriptionId || undefined}>
           Beskrivelse
         </Field.Description>
       )}
-      <Component aria-describedby={ariaDesribedby || undefined} />
+      {type && <Component aria-describedby={ariaDesribedby || undefined} />}
       {validation && (
-        <ValidationMessage id={validationId || undefined}>
+        <ValidationMessage data-my-validation id={validationId || undefined}>
           Feilmelding
         </ValidationMessage>
       )}
diff --git a/packages/react/src/components/form/Field/a11yField.ts b/packages/react/src/components/form/Field/a11yField.ts
index 8aa505bdf8..fb3160660f 100644
--- a/packages/react/src/components/form/Field/a11yField.ts
+++ b/packages/react/src/components/form/Field/a11yField.ts
@@ -1,47 +1,168 @@
-// Utility function to manage a11y attributes
-let a11yFieldId = Date.now();
 const ARIA_DESC = 'aria-describedby';
+export const DATA_DESC = 'data-field-description';
+export const DATA_VALID = 'data-field-validation';
+export const DATA_RESET = 'data-field-reset';
+
+export const a11yField = (field: HTMLElement | null) => {
+  if (!field) return;
+
+  const uuid = `:${Math.round(Date.now() + Math.random() * 100).toString(36)}`;
+  const queue: MutationRecord[] = [];
+  const elements = field.getElementsByTagName('*'); // Speed up MutationObserver by refering to live HTMLCollection
+  const observer = new MutationObserver((mutations) => {
+    if (!queue.length) requestAnimationFrame(process); // Speed up MutationObserver by queuing and only running when tab is visible
+    queue.push(...mutations);
+  });
+
+  const process = () => {
+    let desc: undefined | Element;
+    let input: undefined | Element;
+    let label: undefined | HTMLLabelElement;
+    let valid: undefined | Element;
+
+    // Find elements
+    for (const el of elements) {
+      if (el instanceof HTMLLabelElement) label = el;
+      else if ('validity' in el) input = el;
+      else if (el.hasAttribute(DATA_DESC)) desc = el;
+      else if (el.hasAttribute(DATA_VALID)) valid = el;
+    }
+
+    // Set attributes
+    if (desc && !desc.id) desc.id = `desc${uuid}`;
+    if (input && !input.id) input.id = uuid; // Must run before label
+    if (label && !label.htmlFor) label.htmlFor = input?.id || '';
+    if (valid && !valid.id) valid.id = `valid${uuid}`;
+
+    // Deregister elements
+    for (const { removedNodes } of queue)
+      for (const el of removedNodes)
+        if (el instanceof Element && el.id.endsWith(uuid))
+          el.removeAttribute('id');
+
+    // Set aria-description, and make order is: validation, description, ...rest
+    const descs =
+      `${valid?.id || ''} ${desc?.id || ''} ${input?.getAttribute(ARIA_DESC) || ''}`
+        .split(' ')
+        .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
+        .join(' ');
+    if (descs) input?.setAttribute(ARIA_DESC, descs);
+    else input?.removeAttribute(ARIA_DESC);
+
+    queue.length = 0;
+    observer.takeRecords(); // Clear queue of our DOM changes
+  };
+
+  // let inputId: Element | undefined;
+  // const attrs: Record<string, string> = {}; // Map of element to [id, attr]
+  // const handleMutation = (mutations: Partial<MutationRecord>[]) => {
+  //   const changed: Node[] = [];
+  //   const removed: Node[] = [];
+
+  //   // Collect all changed nodes from MutationRecords
+  //   for (const {
+  //     target = field,
+  //     addedNodes = [],
+  //     removedNodes = [],
+  //   } of mutations) {
+  //     changed.push(target ?? field, ...addedNodes, ...removedNodes);
+  //     removed.push(...removedNodes);
+  //   }
+
+  //   // Run through changedNode for each ELEMENTS check
+  //   for (const [key, attr, check] of ELEMENTS)
+  //     for (const el of changed)
+  //       if (el instanceof Element && check(el)) {
+  //         const isInput = key === 'input';
+  //         const value = el.getAttribute(attr);
+  //         const fallback = `${attrs.input ?? (++a11yFieldId).toString(32)}${isInput || attr !== 'id' ? '' : `:${key}`}`;
+  //         attrs[key] = value || fallback; // Store attribute value
+
+  //         if (isInput) input = el.parentNode ? el : undefined; // Update connected input
+  //         if (!removed.includes(el)) value || el.setAttribute(attr, fallback);
+  //         else if (value === fallback) el.removeAttribute(attr); // Reset attribute if removed
+  //       }
+
+  //   // Set aria-description, and make order is: validation, description, ...rest
+  //   const descs =
+  //     `${attrs.valid || ''} ${attrs.desc || ''} ${input?.getAttribute(ARIA_DESC) || ''}`
+  //       .split(' ')
+  //       .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
+  //       .join(' ');
+
+  //   if (descs) input?.setAttribute(ARIA_DESC, descs);
+  //   else input?.removeAttribute(ARIA_DESC);
+
+  //   observer.takeRecords(); // Clear queue of our DOM changes
+  // };
+
+  observer.observe(field, {
+    attributeFilter: ['id', ARIA_DESC],
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+
+  requestAnimationFrame(process); // Inital setup
+  return () => observer.disconnect();
+};
+
+/*
 const ELEMENTS = [
-  ['input', 'id', (el: Element) => 'validity' in el], // Muse be first
-  ['label', 'for', (el: Element) => el instanceof HTMLLabelElement],
-  ['desc', 'id', (el: Element) => el.hasAttribute('data-field-description')],
-  ['valid', 'id', (el: Element) => el.hasAttribute('data-field-validation')],
+  ['input', 'id', (node: Node) => 'validity' in node], // Muse be first
+  ['label', 'for', (node: Node) => node instanceof HTMLLabelElement],
+  ['desc', 'id', (node: Node) => hasAttr(node, 'data-field-description')],
+  ['valid', 'id', (node: Node) => hasAttr(node, 'data-field-validation')],
 ] as const;
 
+const hasAttr = (node: Node, attr: string) =>
+  node instanceof Element && node.hasAttribute(attr);
+
 export const a11yField = (field: HTMLElement | null) => {
   if (!field) return;
-  const elements: Record<string, string> = {}; // Map of element to [id, attr]
-
-  const handleMutations = (mutations: Partial<MutationRecord>[]) => {
-    let input: Element | undefined;
-    const changed: Node[] = [];
+  let input: Element | undefined;
+  const attrs: Record<string, string> = {}; // Map of element to [id, attr]
+  const handleMutation = (mutations: Partial<MutationRecord>[]) => {
+    const changedNodes: Node[] = [];
 
+    // Collect all changed nodes from MutationRecords
     for (const { target, addedNodes = [], removedNodes = [] } of mutations)
-      changed.push(target ?? field, ...addedNodes, ...removedNodes);
+      changedNodes.push(target ?? field, ...addedNodes, ...removedNodes);
 
+    // Run through changedNode for each ELEMENTS check
     for (const [key, attr, check] of ELEMENTS)
-      for (const el of changed)
+      for (const el of changedNodes)
         if (el instanceof Element && check(el)) {
-          const reset = elements[key];
-          const prev = el.getAttribute(attr);
-          const next = `${input?.id ?? (++a11yFieldId).toString(32)}${key !== 'input' && attr === 'id' ? `:${key}` : ''}`;
-
-          if (key === 'input') input = el;
-          if (!prev) el.setAttribute(attr, next);
-          elements[key] = prev || next;
+          const isInput = key === 'input';
+          const value = el.getAttribute(attr);
+          const fallback = `${attrs.input ?? (++a11yFieldId).toString(32)}${isInput || attr !== 'id' ? '' : `:${key}`}`;
+          attrs[key] = value || fallback; // Store attribute value
+
+          if (isInput) input = el.parentNode ? el : undefined; // Update connected input
+          if (el.parentNode) value || el.setAttribute(attr, fallback);
+          else if (value === fallback) el.removeAttribute(attr); // Reset attribute if removed
         }
 
-    const descs = [
-      elements.valid,
-      elements.desc,
-      input?.getAttribute(ARIA_DESC),
-    ];
-    console.log(descs);
+    // Set aria-description, and make order is: validation, description, ...rest
+    const descs =
+      `${attrs.valid || ''} ${attrs.desc || ''} ${input?.getAttribute(ARIA_DESC) || ''}`
+        .split(' ')
+        .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
+        .join(' ');
+
+    if (descs) input?.setAttribute(ARIA_DESC, descs);
+    else input?.removeAttribute(ARIA_DESC);
 
-    observer.takeRecords(); // Clear the queue if we done DOM changes in the callback
+    observer.takeRecords(); // Clear queue of our DOM changes
   };
-  const observer = new MutationObserver(handleMutations);
 
+  let debounce: ReturnType<typeof setTimeout> | undefined;
+  const handleMutationDebounced = (mutations: Partial<MutationRecord>[]) => {
+    clearTimeout(debounce);
+    debounce = setTimeout(handleMutation, 100, mutations);
+  };
+
+  const observer = new MutationObserver(handleMutationDebounced);
   observer.observe(field, {
     attributeFilter: ['id', ARIA_DESC],
     attributes: true,
@@ -49,9 +170,9 @@ export const a11yField = (field: HTMLElement | null) => {
     subtree: true,
   });
 
-  handleMutations([{ addedNodes: field.querySelectorAll('*') }]); // Initial setup
+  handleMutationDebounced([{ addedNodes: field.querySelectorAll('*') }]); // Initial setup
   return () => observer.disconnect();
-};
+};*/
 
 // const attr = (node: Element, key: string, set?: string) => {
 //   const val = node.getAttribute(key);

From 73440698450a39cbb4e9d96018e5815ecaf4e083 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 11 Oct 2024 10:55:40 +0200
Subject: [PATCH 11/23] fix: simplify

---
 .../ValidationMessage/ValidationMessage.tsx   |   3 +-
 .../components/form/Field/Field.stories.tsx   |  26 +--
 .../react/src/components/form/Field/Field.tsx |   4 +-
 .../form/Field/FieldDescription.tsx           |  11 --
 .../src/components/form/Field/FieldHelp.tsx   |  10 ++
 .../form/Field/{a11yField.ts => fieldA11Y.ts} | 156 ++++++++----------
 .../react/src/components/form/Field/index.ts  |  14 +-
 7 files changed, 105 insertions(+), 119 deletions(-)
 delete mode 100644 packages/react/src/components/form/Field/FieldDescription.tsx
 create mode 100644 packages/react/src/components/form/Field/FieldHelp.tsx
 rename packages/react/src/components/form/Field/{a11yField.ts => fieldA11Y.ts} (62%)

diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index dfc45ece26..bc6dabb1dd 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -30,10 +30,11 @@ export const ValidationMessage = forwardRef<
 
   return (
     <Component
-      ref={ref}
       className={cl('ds-validation-message', className)}
       data-error={error || undefined}
+      data-field-validation
       data-size={size}
+      ref={ref}
       {...rest}
     />
   );
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 367fbecd44..99a18b5ffd 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -1,10 +1,11 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { useEffect } from 'react';
-import { Label } from '../../Typography/Label';
+import { createPortal } from 'react-dom';
+import { Label } from '../../Label';
 
 import { Field } from '.';
-import { ValidationMessage } from '../../Typography';
+import { ValidationMessage } from '../../ValidationMessage';
 
 type Story = StoryFn<typeof Field>;
 
@@ -23,9 +24,10 @@ export default {
 const toggles = {
   type: 'textarea',
   label: true,
+  labelFor: '',
   ariaDesribedby: '',
-  description: true,
-  descriptionId: '',
+  help: true,
+  helpId: '',
   validation: true,
   validationId: '',
   moveToBody: false,
@@ -36,8 +38,9 @@ export const Preview: Story = (args) => {
     ariaDesribedby,
     type,
     label,
-    description,
-    descriptionId,
+    labelFor,
+    help,
+    helpId,
     validation,
     validationId,
     moveToBody,
@@ -52,19 +55,16 @@ export const Preview: Story = (args) => {
   }, [moveToBody]);
 
   return (
-    <Field data-my-field>
-      {label && <Label style={{ display: 'block' }}>Kort beskrivelse</Label>}
-      {description && (
-        <Field.Description id={descriptionId || undefined}>
-          Beskrivelse
-        </Field.Description>
-      )}
+    <Field data-my-field style={{ display: 'flex', flexDirection: 'column' }}>
+      {label && <Label htmlFor={labelFor || undefined}>Kort beskrivelse</Label>}
+      {help && <Field.Help id={helpId || undefined}>Beskrivelse</Field.Help>}
       {type && <Component aria-describedby={ariaDesribedby || undefined} />}
       {validation && (
         <ValidationMessage data-my-validation id={validationId || undefined}>
           Feilmelding
         </ValidationMessage>
       )}
+      {/* {createPortal(<div>Hei</div>, document.body)} */}
     </Field>
   );
 };
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
index 3dbbf85045..89d08188cb 100644
--- a/packages/react/src/components/form/Field/Field.tsx
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -2,7 +2,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import { a11yField } from './a11yField';
+import { fieldA11Y } from './fieldA11Y';
 
 export type FieldProps = HTMLAttributes<HTMLDivElement>;
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
@@ -11,7 +11,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
 ) {
   const fieldRef = useRef<HTMLDivElement>(null);
   const mergedRefs = useMergeRefs([fieldRef, ref]);
-  useEffect(() => a11yField(fieldRef.current), []); // Intentionally run on each render
+  useEffect(() => fieldA11Y(fieldRef.current), []); // Intentionally run on each render
 
   return (
     <div className={cl('ds-field', className)} ref={mergedRefs} {...rest} />
diff --git a/packages/react/src/components/form/Field/FieldDescription.tsx b/packages/react/src/components/form/Field/FieldDescription.tsx
deleted file mode 100644
index c879d95401..0000000000
--- a/packages/react/src/components/form/Field/FieldDescription.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-export type FieldDescriptionProps = HTMLAttributes<HTMLDivElement>;
-
-export const FieldDescription = forwardRef<
-  HTMLDivElement,
-  FieldDescriptionProps
->(function FieldDescription(rest, ref) {
-  return <div data-field-description ref={ref} {...rest} />;
-});
diff --git a/packages/react/src/components/form/Field/FieldHelp.tsx b/packages/react/src/components/form/Field/FieldHelp.tsx
new file mode 100644
index 0000000000..31293aa100
--- /dev/null
+++ b/packages/react/src/components/form/Field/FieldHelp.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type FieldHelpProps = HTMLAttributes<HTMLDivElement>;
+
+export const FieldHelp = forwardRef<HTMLDivElement, FieldHelpProps>(
+  function FieldHelp(rest, ref) {
+    return <div data-field-help ref={ref} {...rest} />;
+  },
+);
diff --git a/packages/react/src/components/form/Field/a11yField.ts b/packages/react/src/components/form/Field/fieldA11Y.ts
similarity index 62%
rename from packages/react/src/components/form/Field/a11yField.ts
rename to packages/react/src/components/form/Field/fieldA11Y.ts
index fb3160660f..8e36a9b116 100644
--- a/packages/react/src/components/form/Field/a11yField.ts
+++ b/packages/react/src/components/form/Field/fieldA11Y.ts
@@ -1,112 +1,98 @@
-const ARIA_DESC = 'aria-describedby';
-export const DATA_DESC = 'data-field-description';
-export const DATA_VALID = 'data-field-validation';
-export const DATA_RESET = 'data-field-reset';
+const ARIA_DESC = "aria-describedby";
+
+/**
+ * The cache takes a element identifier as key, and a object of element, attribute, and original value.
+ * If there is no original value, we create a fallback value, but do not store it.
+ */
+type Cache = Record<string, Entry>;
+type Entry = {
+  el: Element | null;
+  attr: string;
+  value: string | null;
+  prefix?: string;
+};
 
-export const a11yField = (field: HTMLElement | null) => {
+export const fieldA11Y = (field: HTMLElement | null) => {
   if (!field) return;
 
+  const elements = field.getElementsByTagName("*"); // Speed up by using a live HTMLCollection instead of traversing MutationRecords
   const uuid = `:${Math.round(Date.now() + Math.random() * 100).toString(36)}`;
-  const queue: MutationRecord[] = [];
-  const elements = field.getElementsByTagName('*'); // Speed up MutationObserver by refering to live HTMLCollection
-  const observer = new MutationObserver((mutations) => {
-    if (!queue.length) requestAnimationFrame(process); // Speed up MutationObserver by queuing and only running when tab is visible
-    queue.push(...mutations);
-  });
-
-  const process = () => {
-    let desc: undefined | Element;
-    let input: undefined | Element;
-    let label: undefined | HTMLLabelElement;
-    let valid: undefined | Element;
+  const cache: Cache = {
+    input: { el: null, attr: "id", value: null },
+    label: { el: null, attr: "for", value: null },
+    help: { el: null, attr: "id", value: null, prefix: "help" },
+    valid: { el: null, attr: "id", value: null, prefix: "valid" },
+  };
 
+  const observer = createOptimizedMutationObserver(() => {
     // Find elements
     for (const el of elements) {
-      if (el instanceof HTMLLabelElement) label = el;
-      else if ('validity' in el) input = el;
-      else if (el.hasAttribute(DATA_DESC)) desc = el;
-      else if (el.hasAttribute(DATA_VALID)) valid = el;
+      if (el instanceof HTMLLabelElement) update(cache, "label", el);
+      else if ("validity" in el) update(cache, "input", el);
+      else if (el.hasAttribute("data-field-help")) update(cache, "help", el);
+      else if (el.hasAttribute("data-field-validation"))
+        update(cache, "valid", el);
     }
 
-    // Set attributes
-    if (desc && !desc.id) desc.id = `desc${uuid}`;
-    if (input && !input.id) input.id = uuid; // Must run before label
-    if (label && !label.htmlFor) label.htmlFor = input?.id || '';
-    if (valid && !valid.id) valid.id = `valid${uuid}`;
-
-    // Deregister elements
-    for (const { removedNodes } of queue)
-      for (const el of removedNodes)
-        if (el instanceof Element && el.id.endsWith(uuid))
-          el.removeAttribute('id');
+    // Set attributes or reset if no input or moved outside field
+    const input = cache.input.el;
+    const inputId = input && (cache.input.value || uuid);
+    for (const [key, { el, attr, value, prefix }] of Object.entries(cache)) {
+      if (!inputId || !field.contains(el)) reset(cache, key);
+      else el?.setAttribute(attr, value || `${prefix || ""}${inputId}`);
+    }
 
-    // Set aria-description, and make order is: validation, description, ...rest
+    // Set aria-description, and make order is: validation, help, ...rest
     const descs =
-      `${valid?.id || ''} ${desc?.id || ''} ${input?.getAttribute(ARIA_DESC) || ''}`
-        .split(' ')
+      `${cache.valid.prefix}${inputId} ${cache.help.prefix}${inputId} ${input?.getAttribute(ARIA_DESC) || ""}`
+        .split(" ")
         .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
-        .join(' ');
+        .join(" ");
+
     if (descs) input?.setAttribute(ARIA_DESC, descs);
     else input?.removeAttribute(ARIA_DESC);
-
-    queue.length = 0;
-    observer.takeRecords(); // Clear queue of our DOM changes
-  };
-
-  // let inputId: Element | undefined;
-  // const attrs: Record<string, string> = {}; // Map of element to [id, attr]
-  // const handleMutation = (mutations: Partial<MutationRecord>[]) => {
-  //   const changed: Node[] = [];
-  //   const removed: Node[] = [];
-
-  //   // Collect all changed nodes from MutationRecords
-  //   for (const {
-  //     target = field,
-  //     addedNodes = [],
-  //     removedNodes = [],
-  //   } of mutations) {
-  //     changed.push(target ?? field, ...addedNodes, ...removedNodes);
-  //     removed.push(...removedNodes);
-  //   }
-
-  //   // Run through changedNode for each ELEMENTS check
-  //   for (const [key, attr, check] of ELEMENTS)
-  //     for (const el of changed)
-  //       if (el instanceof Element && check(el)) {
-  //         const isInput = key === 'input';
-  //         const value = el.getAttribute(attr);
-  //         const fallback = `${attrs.input ?? (++a11yFieldId).toString(32)}${isInput || attr !== 'id' ? '' : `:${key}`}`;
-  //         attrs[key] = value || fallback; // Store attribute value
-
-  //         if (isInput) input = el.parentNode ? el : undefined; // Update connected input
-  //         if (!removed.includes(el)) value || el.setAttribute(attr, fallback);
-  //         else if (value === fallback) el.removeAttribute(attr); // Reset attribute if removed
-  //       }
-
-  //   // Set aria-description, and make order is: validation, description, ...rest
-  //   const descs =
-  //     `${attrs.valid || ''} ${attrs.desc || ''} ${input?.getAttribute(ARIA_DESC) || ''}`
-  //       .split(' ')
-  //       .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
-  //       .join(' ');
-
-  //   if (descs) input?.setAttribute(ARIA_DESC, descs);
-  //   else input?.removeAttribute(ARIA_DESC);
-
-  //   observer.takeRecords(); // Clear queue of our DOM changes
-  // };
+  });
 
   observer.observe(field, {
-    attributeFilter: ['id', ARIA_DESC],
+    attributeFilter: ["id", ARIA_DESC],
     attributes: true,
     childList: true,
     subtree: true,
   });
 
-  requestAnimationFrame(process); // Inital setup
   return () => observer.disconnect();
 };
 
+const update = (cache: Cache, key: string, el: Element) => {
+  if (cache[key].el === el) return; // TODO: What about storing reset if original attribute changes?
+  reset(cache, key);
+  cache[key].el = el;
+  cache[key].value = el.getAttribute(cache[key].attr);
+};
+
+const reset = (cache: Cache, key: string) => {
+  const { el, attr, value } = cache[key] || {};
+  value ? el?.setAttribute(attr, value) : el?.removeAttribute(attr);
+  cache[key].el = cache[key].value = null;
+};
+
+// Speed up MutationObserver by debouncing and only running when page is visible
+const createOptimizedMutationObserver = (callback: () => void) => {
+  let queue: ReturnType<typeof requestAnimationFrame> = 0;
+  const observer = new MutationObserver(() => {
+    if (!queue) queue = requestAnimationFrame(process);
+  });
+
+  const process = () => {
+    callback();
+    queue = 0; // Empty queue
+    observer.takeRecords(); // Clear queue of our DOM changes
+  };
+
+  requestAnimationFrame(process); // Initial setup
+  return observer;
+};
+
 /*
 const ELEMENTS = [
   ['input', 'id', (node: Node) => 'validity' in node], // Muse be first
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index 9b737f9738..f7c5522617 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -1,5 +1,5 @@
-import { Field as FieldParent } from './Field';
-import { FieldDescription } from './FieldDescription';
+import { Field as FieldParent } from "./Field";
+import { FieldHelp } from "./FieldHelp";
 
 /**
  * @example
@@ -11,11 +11,11 @@ import { FieldDescription } from './FieldDescription';
  * </Field>
  */
 const Field = Object.assign(FieldParent, {
-  Description: FieldDescription,
+  Help: FieldHelp,
 });
 
-Field.Description.displayName = 'Field.Description';
+Field.Help.displayName = "Field.Help";
 
-export type { FieldProps } from './Field';
-export type { FieldDescriptionProps } from './FieldDescription';
-export { Field, FieldDescription };
+export type { FieldProps } from "./Field";
+export type { FieldHelpProps } from "./FieldHelp";
+export { Field, FieldHelp };

From 5b612afa0652d4d2ad7bebefc7dea8340793e4b3 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 11 Oct 2024 15:12:55 +0200
Subject: [PATCH 12/23] fix: simplify

---
 packages/css/field.css                        |   3 +
 .../ValidationMessage/ValidationMessage.tsx   |   2 +-
 .../components/form/Field/Field.stories.tsx   |  14 +-
 .../react/src/components/form/Field/Field.tsx |   2 +-
 .../src/components/form/Field/FieldHelp.tsx   |   2 +-
 .../src/components/form/Field/fieldA11Y.ts    | 225 +++---------------
 6 files changed, 45 insertions(+), 203 deletions(-)
 create mode 100644 packages/css/field.css

diff --git a/packages/css/field.css b/packages/css/field.css
new file mode 100644
index 0000000000..eb6e32573a
--- /dev/null
+++ b/packages/css/field.css
@@ -0,0 +1,3 @@
+.ds-field {
+  display: contents;
+}
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index bc6dabb1dd..f6c1871c9f 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -32,7 +32,7 @@ export const ValidationMessage = forwardRef<
     <Component
       className={cl('ds-validation-message', className)}
       data-error={error || undefined}
-      data-field-validation
+      data-field='validation'
       data-size={size}
       ref={ref}
       {...rest}
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 99a18b5ffd..b7ab71a0f0 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -23,9 +23,9 @@ export default {
 // TMP toggles to test a11yField utility
 const toggles = {
   type: 'textarea',
+  inputId: '',
   label: true,
   labelFor: '',
-  ariaDesribedby: '',
   help: true,
   helpId: '',
   validation: true,
@@ -35,8 +35,8 @@ const toggles = {
 
 export const Preview: Story = (args) => {
   const {
-    ariaDesribedby,
     type,
+    inputId,
     label,
     labelFor,
     help,
@@ -45,20 +45,22 @@ export const Preview: Story = (args) => {
     validationId,
     moveToBody,
   } = args as typeof toggles;
-  const Component = type;
+  const Component = type as keyof JSX.IntrinsicElements;
 
   useEffect(() => {
+    const label = document.querySelector('label');
     const valid = document.querySelector('[data-my-validation]');
     const field = document.querySelector('[data-my-field]');
     const root = moveToBody ? document.body : field;
-    if (valid && valid.parentElement !== root) root?.appendChild(valid);
+    if (valid && valid.parentElement !== root) root?.append(valid);
+    if (label && label.parentElement !== root) root?.prepend(label);
   }, [moveToBody]);
 
   return (
-    <Field data-my-field style={{ display: 'flex', flexDirection: 'column' }}>
+    <Field data-my-field>
       {label && <Label htmlFor={labelFor || undefined}>Kort beskrivelse</Label>}
       {help && <Field.Help id={helpId || undefined}>Beskrivelse</Field.Help>}
-      {type && <Component aria-describedby={ariaDesribedby || undefined} />}
+      {type && <Component id={inputId || undefined} />}
       {validation && (
         <ValidationMessage data-my-validation id={validationId || undefined}>
           Feilmelding
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
index 89d08188cb..ec72a69e70 100644
--- a/packages/react/src/components/form/Field/Field.tsx
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -11,7 +11,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
 ) {
   const fieldRef = useRef<HTMLDivElement>(null);
   const mergedRefs = useMergeRefs([fieldRef, ref]);
-  useEffect(() => fieldA11Y(fieldRef.current), []); // Intentionally run on each render
+  useEffect(() => fieldA11Y(fieldRef.current), []);
 
   return (
     <div className={cl('ds-field', className)} ref={mergedRefs} {...rest} />
diff --git a/packages/react/src/components/form/Field/FieldHelp.tsx b/packages/react/src/components/form/Field/FieldHelp.tsx
index 31293aa100..e03292cdd4 100644
--- a/packages/react/src/components/form/Field/FieldHelp.tsx
+++ b/packages/react/src/components/form/Field/FieldHelp.tsx
@@ -5,6 +5,6 @@ export type FieldHelpProps = HTMLAttributes<HTMLDivElement>;
 
 export const FieldHelp = forwardRef<HTMLDivElement, FieldHelpProps>(
   function FieldHelp(rest, ref) {
-    return <div data-field-help ref={ref} {...rest} />;
+    return <div data-field='help' ref={ref} {...rest} />;
   },
 );
diff --git a/packages/react/src/components/form/Field/fieldA11Y.ts b/packages/react/src/components/form/Field/fieldA11Y.ts
index 8e36a9b116..2519050d71 100644
--- a/packages/react/src/components/form/Field/fieldA11Y.ts
+++ b/packages/react/src/components/form/Field/fieldA11Y.ts
@@ -1,60 +1,42 @@
-const ARIA_DESC = "aria-describedby";
+export const fieldA11Y = (fieldElement: HTMLElement | null) => {
+  if (!fieldElement) return;
 
-/**
- * The cache takes a element identifier as key, and a object of element, attribute, and original value.
- * If there is no original value, we create a fallback value, but do not store it.
- */
-type Cache = Record<string, Entry>;
-type Entry = {
-  el: Element | null;
-  attr: string;
-  value: string | null;
-  prefix?: string;
-};
-
-export const fieldA11Y = (field: HTMLElement | null) => {
-  if (!field) return;
-
-  const elements = field.getElementsByTagName("*"); // Speed up by using a live HTMLCollection instead of traversing MutationRecords
   const uuid = `:${Math.round(Date.now() + Math.random() * 100).toString(36)}`;
-  const cache: Cache = {
-    input: { el: null, attr: "id", value: null },
-    label: { el: null, attr: "for", value: null },
-    help: { el: null, attr: "id", value: null, prefix: "help" },
-    valid: { el: null, attr: "id", value: null, prefix: "valid" },
-  };
+  const elements = fieldElement.getElementsByTagName("*"); // Speed up by using a live HTMLCollection instead of traversing MutationRecords
+  const connected = new Set<Element>();
+  let input: Element | null = null;
 
   const observer = createOptimizedMutationObserver(() => {
     // Find elements
     for (const el of elements) {
-      if (el instanceof HTMLLabelElement) update(cache, "label", el);
-      else if ("validity" in el) update(cache, "input", el);
-      else if (el.hasAttribute("data-field-help")) update(cache, "help", el);
-      else if (el.hasAttribute("data-field-validation"))
-        update(cache, "valid", el);
+      if ("validity" in el) input = el;
+      else if (el instanceof HTMLLabelElement || el.hasAttribute("data-field"))
+        connected.add(el);
     }
 
-    // Set attributes or reset if no input or moved outside field
-    const input = cache.input.el;
-    const inputId = input && (cache.input.value || uuid);
-    for (const [key, { el, attr, value, prefix }] of Object.entries(cache)) {
-      if (!inputId || !field.contains(el)) reset(cache, key);
-      else el?.setAttribute(attr, value || `${prefix || ""}${inputId}`);
+    // Setup attributes
+    const describedby: string[] = [];
+    if (!fieldElement.contains(input)) input = null; // Reset if input is removed
+    if (input && !input.id) input.id = uuid; // Ensure input always has ID
+    for (const el of connected) {
+      if (!input || !fieldElement.contains(el)) {
+        connected.delete(el);
+        el.removeAttribute("for");
+        el.removeAttribute("id");
+      } else if (el instanceof HTMLLabelElement) el.htmlFor = input.id;
+      else {
+        el.id = `${input.id}:${el.getAttribute("data-field")}`;
+        describedby[el.hasAttribute("data-error") ? "unshift" : "push"](el.id); // Errors to the front
+      }
     }
 
-    // Set aria-description, and make order is: validation, help, ...rest
-    const descs =
-      `${cache.valid.prefix}${inputId} ${cache.help.prefix}${inputId} ${input?.getAttribute(ARIA_DESC) || ""}`
-        .split(" ")
-        .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
-        .join(" ");
-
-    if (descs) input?.setAttribute(ARIA_DESC, descs);
-    else input?.removeAttribute(ARIA_DESC);
+    // Set aria-describedby
+    if (!describedby.length) input?.removeAttribute("aria-describedby");
+    else input?.setAttribute("aria-describedby", describedby.join(" "));
   });
 
-  observer.observe(field, {
-    attributeFilter: ["id", ARIA_DESC],
+  observer.observe(fieldElement, {
+    attributeFilter: ["id", "for", "aria-describedby"],
     attributes: true,
     childList: true,
     subtree: true,
@@ -63,164 +45,19 @@ export const fieldA11Y = (field: HTMLElement | null) => {
   return () => observer.disconnect();
 };
 
-const update = (cache: Cache, key: string, el: Element) => {
-  if (cache[key].el === el) return; // TODO: What about storing reset if original attribute changes?
-  reset(cache, key);
-  cache[key].el = el;
-  cache[key].value = el.getAttribute(cache[key].attr);
-};
-
-const reset = (cache: Cache, key: string) => {
-  const { el, attr, value } = cache[key] || {};
-  value ? el?.setAttribute(attr, value) : el?.removeAttribute(attr);
-  cache[key].el = cache[key].value = null;
-};
-
-// Speed up MutationObserver by debouncing and only running when page is visible
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
 const createOptimizedMutationObserver = (callback: () => void) => {
   let queue: ReturnType<typeof requestAnimationFrame> = 0;
   const observer = new MutationObserver(() => {
-    if (!queue) queue = requestAnimationFrame(process);
+    cancelAnimationFrame(queue);
+    queue = requestAnimationFrame(process);
   });
 
   const process = () => {
     callback();
-    queue = 0; // Empty queue
-    observer.takeRecords(); // Clear queue of our DOM changes
+    observer.takeRecords(); // Clear queue due to DOM changes in callback
   };
 
   requestAnimationFrame(process); // Initial setup
   return observer;
 };
-
-/*
-const ELEMENTS = [
-  ['input', 'id', (node: Node) => 'validity' in node], // Muse be first
-  ['label', 'for', (node: Node) => node instanceof HTMLLabelElement],
-  ['desc', 'id', (node: Node) => hasAttr(node, 'data-field-description')],
-  ['valid', 'id', (node: Node) => hasAttr(node, 'data-field-validation')],
-] as const;
-
-const hasAttr = (node: Node, attr: string) =>
-  node instanceof Element && node.hasAttribute(attr);
-
-export const a11yField = (field: HTMLElement | null) => {
-  if (!field) return;
-  let input: Element | undefined;
-  const attrs: Record<string, string> = {}; // Map of element to [id, attr]
-  const handleMutation = (mutations: Partial<MutationRecord>[]) => {
-    const changedNodes: Node[] = [];
-
-    // Collect all changed nodes from MutationRecords
-    for (const { target, addedNodes = [], removedNodes = [] } of mutations)
-      changedNodes.push(target ?? field, ...addedNodes, ...removedNodes);
-
-    // Run through changedNode for each ELEMENTS check
-    for (const [key, attr, check] of ELEMENTS)
-      for (const el of changedNodes)
-        if (el instanceof Element && check(el)) {
-          const isInput = key === 'input';
-          const value = el.getAttribute(attr);
-          const fallback = `${attrs.input ?? (++a11yFieldId).toString(32)}${isInput || attr !== 'id' ? '' : `:${key}`}`;
-          attrs[key] = value || fallback; // Store attribute value
-
-          if (isInput) input = el.parentNode ? el : undefined; // Update connected input
-          if (el.parentNode) value || el.setAttribute(attr, fallback);
-          else if (value === fallback) el.removeAttribute(attr); // Reset attribute if removed
-        }
-
-    // Set aria-description, and make order is: validation, description, ...rest
-    const descs =
-      `${attrs.valid || ''} ${attrs.desc || ''} ${input?.getAttribute(ARIA_DESC) || ''}`
-        .split(' ')
-        .filter((id, idx, all) => id && all.indexOf(id) === idx) // Remove empty and duplicates
-        .join(' ');
-
-    if (descs) input?.setAttribute(ARIA_DESC, descs);
-    else input?.removeAttribute(ARIA_DESC);
-
-    observer.takeRecords(); // Clear queue of our DOM changes
-  };
-
-  let debounce: ReturnType<typeof setTimeout> | undefined;
-  const handleMutationDebounced = (mutations: Partial<MutationRecord>[]) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(handleMutation, 100, mutations);
-  };
-
-  const observer = new MutationObserver(handleMutationDebounced);
-  observer.observe(field, {
-    attributeFilter: ['id', ARIA_DESC],
-    attributes: true,
-    childList: true,
-    subtree: true,
-  });
-
-  handleMutationDebounced([{ addedNodes: field.querySelectorAll('*') }]); // Initial setup
-  return () => observer.disconnect();
-};*/
-
-// const attr = (node: Element, key: string, set?: string) => {
-//   const val = node.getAttribute(key);
-//   if (set) node.setAttribute(key, set);
-//   else node.removeAttribute(key);
-
-//   return () => (val ? node.setAttribute(key, val) : node.removeAttribute(key));
-// };
-
-// for (const el of removed) {
-//   const attrs = elements.get(el);
-//   if (attrs) {
-//     el.setAttribute(attrs[0], attrs[1]);
-//     elements.delete(el);
-//   }
-// }
-
-// desc = added.find((el) => el.hasAttribute(DATA_DESC)) || desc;
-// input = added.find((el) => 'validity' in el) || input; // Find both native form elements and form-associated custom elements
-// label = added.find((el) => el instanceof HTMLLabelElement) || label;
-// valid = added.find((el) => el.hasAttribute(DATA_VALID)) || valid;
-
-// const inputId = input?.id || (++a11yFieldId).toString(32); // Must run first
-
-// for (const el of added)
-//   if (el instanceof Element) {
-//     if (!desc && el.hasAttribute(DATA_DESC)) desc = el;
-//     if (!input && 'validity' in el) input = el; // Find both native form elements and form-associated custom elements
-//     if (!label && el instanceof HTMLLabelElement) label = el;
-//     if (!valid && el.hasAttribute(DATA_VALID)) valid = el;
-//   }
-
-// const [prevEl, prevValue] = elements[key] || [];
-// const nowValue = el.getAttribute(attr);
-
-// if (prevEl) {
-//   if (prevValue) prevEl.setAttribute(attr, prevValue);
-//   else prevEl.removeAttribute(attr);
-// }
-// if (el.parentNode) {
-//   elements[key] = [el, nowValue];
-//   el;
-// }
-
-// const desc = field?.querySelector('[data-field-description]');
-// const label = field?.querySelector('label');
-// const valid = field?.querySelector('[data-field-validation]');
-// const input = Array.from(field?.querySelectorAll('*') || []).find(
-//   (el) => 'validity' in el, // Find both native form elements and form-associated custom elements
-// );
-
-// if (input && !input.id) input.id = (++a11yFieldId).toString(32); // Must run first
-// if (desc && !desc.id) desc.id = `${input?.id}:desc`;
-// if (label && !label.htmlFor) label.htmlFor = input?.id || '';
-// if (valid && !valid.id) valid.id = `${input?.id}:valid`;
-
-// // Set aria-description, and make order is: validation, description, ...rest
-// const descs =
-//   `${valid?.id || ''} ${desc?.id || ''} ${input?.getAttribute(ARIA_DESC)?.trim() || ''}`
-//     .split(' ')
-//     .filter((id, index) => (index < 2 ? id : !id.startsWith(input?.id || '')))
-//     .join(' ');
-
-// if (descs) input?.setAttribute(ARIA_DESC, descs);
-// else input?.removeAttribute(ARIA_DESC);

From f6c130ec3508f4ee42a14ebd5bcab6d88f43856b Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 11 Oct 2024 15:17:46 +0200
Subject: [PATCH 13/23] fix: include css

---
 packages/css/field.css                                     | 4 ++++
 packages/css/index.css                                     | 1 +
 packages/react/src/components/form/Field/Field.stories.tsx | 5 ++++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/css/field.css b/packages/css/field.css
index eb6e32573a..14d1368623 100644
--- a/packages/css/field.css
+++ b/packages/css/field.css
@@ -1,3 +1,7 @@
 .ds-field {
   display: contents;
+
+  & > * + * {
+    margin-top: var(--ds-spacing-2);
+  }
 }
diff --git a/packages/css/index.css b/packages/css/index.css
index bc4c797265..207f938b6b 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -19,6 +19,7 @@
 @import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
+@import url('./field.css') layer(ds.components);
 @import url('./input.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
 @import url('./modal.css') layer(ds.components);
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index b7ab71a0f0..511b2f21a7 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -1,11 +1,13 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { useEffect } from 'react';
-import { createPortal } from 'react-dom';
 import { Label } from '../../Label';
 
 import { Field } from '.';
 import { ValidationMessage } from '../../ValidationMessage';
+import { Input } from '../Input';
+import { Select } from '../Select';
+import { Textarea } from '../Textarea';
 
 type Story = StoryFn<typeof Field>;
 
@@ -16,6 +18,7 @@ export default {
     type: {
       control: { type: 'radio' },
       options: ['textarea', 'input', 'select', false],
+      mapping: { textarea: Textarea, input: Input, select: Select },
     },
   },
 } as Meta;

From 24988654eccfc43b07fcc0c148267fe3c2d5b1fe Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 15 Oct 2024 16:41:24 +0200
Subject: [PATCH 14/23] fix: support changing attributes

---
 .../src/components/form/Field/fieldA11Y.ts    | 84 ++++++++++++-------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/components/form/Field/fieldA11Y.ts b/packages/react/src/components/form/Field/fieldA11Y.ts
index 2519050d71..3f6ef92913 100644
--- a/packages/react/src/components/form/Field/fieldA11Y.ts
+++ b/packages/react/src/components/form/Field/fieldA11Y.ts
@@ -1,40 +1,54 @@
 export const fieldA11Y = (fieldElement: HTMLElement | null) => {
   if (!fieldElement) return;
 
+  const elements = new Map<Element, string | null>();
   const uuid = `:${Math.round(Date.now() + Math.random() * 100).toString(36)}`;
-  const elements = fieldElement.getElementsByTagName("*"); // Speed up by using a live HTMLCollection instead of traversing MutationRecords
-  const connected = new Set<Element>();
   let input: Element | null = null;
 
-  const observer = createOptimizedMutationObserver(() => {
-    // Find elements
-    for (const el of elements) {
-      if ("validity" in el) input = el;
-      else if (el instanceof HTMLLabelElement || el.hasAttribute("data-field"))
-        connected.add(el);
+  const process = (mutations: Partial<MutationRecord>[]) => {
+    const changed: Node[] = [];
+    const removed: Node[] = [];
+
+    // Merge MutationRecords
+    for (const mutation of mutations) {
+      if (mutation.attributeName) changed.push(mutation.target ?? fieldElement);
+      changed.push(...(mutation.addedNodes || []));
+      removed.push(...(mutation.removedNodes || []));
     }
 
-    // Setup attributes
-    const describedby: string[] = [];
-    if (!fieldElement.contains(input)) input = null; // Reset if input is removed
-    if (input && !input.id) input.id = uuid; // Ensure input always has ID
-    for (const el of connected) {
-      if (!input || !fieldElement.contains(el)) {
-        connected.delete(el);
-        el.removeAttribute("for");
-        el.removeAttribute("id");
-      } else if (el instanceof HTMLLabelElement) el.htmlFor = input.id;
-      else {
-        el.id = `${input.id}:${el.getAttribute("data-field")}`;
-        describedby[el.hasAttribute("data-error") ? "unshift" : "push"](el.id); // Errors to the front
+    // Register elements
+    for (const el of changed)
+      if (isElement(el)) {
+        if (isLabel(el)) elements.set(el, el.htmlFor);
+        else if ("validity" in el) input = el;
+        else if (el.hasAttribute("data-field")) elements.set(el, el.id);
       }
+
+    // Reset removed elements
+    for (const el of removed)
+      if (isElement(el) && elements.has(el)) {
+        const attr = isLabel(el) ? "for" : "id";
+        setAttr(el, attr, elements.get(el));
+        elements.delete(el);
+      }
+
+    // Connect elements
+    const inputId = input?.id || uuid;
+    const describedby: string[] = [];
+    for (const [el, value] of elements) {
+      const attr = isLabel(el) ? "for" : "id";
+      const type = el.getAttribute("data-field");
+
+      if (!value) setAttr(el, attr, type ? `${inputId}:${type}` : inputId); // Ensure we have a value
+      if (type) describedby[type === "validation" ? "unshift" : "push"](el.id); // Validations to the front
     }
 
     // Set aria-describedby
-    if (!describedby.length) input?.removeAttribute("aria-describedby");
-    else input?.setAttribute("aria-describedby", describedby.join(" "));
-  });
+    setAttr(input, "id", inputId);
+    setAttr(input, "aria-describedby", describedby.join(" "));
+  };
 
+  const observer = createOptimizedMutationObserver(process);
   observer.observe(fieldElement, {
     attributeFilter: ["id", "for", "aria-describedby"],
     attributes: true,
@@ -42,22 +56,30 @@ export const fieldA11Y = (fieldElement: HTMLElement | null) => {
     subtree: true,
   });
 
+  process([{ addedNodes: fieldElement.querySelectorAll("*") }]); // Initial setup
+  observer.takeRecords(); // Clear initial setup queue
   return () => observer.disconnect();
 };
 
+// Utilities
+const isElement = (node: Node) => node instanceof Element;
+const isLabel = (node: Node) => node instanceof HTMLLabelElement;
+const setAttr = (el: Element | null, name: string, value?: string | null) =>
+  value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+
 // Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
-const createOptimizedMutationObserver = (callback: () => void) => {
-  let queue: ReturnType<typeof requestAnimationFrame> = 0;
-  const observer = new MutationObserver(() => {
-    cancelAnimationFrame(queue);
-    queue = requestAnimationFrame(process);
+const createOptimizedMutationObserver = (callback: MutationCallback) => {
+  const queue: MutationRecord[] = [];
+  const observer = new MutationObserver((mutations) => {
+    if (!queue.length) requestAnimationFrame(process);
+    queue.push(...mutations);
   });
 
   const process = () => {
-    callback();
+    callback(queue, observer);
+    queue.length = 0; // Reset queue
     observer.takeRecords(); // Clear queue due to DOM changes in callback
   };
 
-  requestAnimationFrame(process); // Initial setup
   return observer;
 };

From 2884b1882e084e955badcdfc6700f7750645a0e0 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 11:57:14 +0200
Subject: [PATCH 15/23] fix(Field): adjustments

---
 .../components/form/Field/Field.stories.tsx   | 14 +++++++-----
 .../form/Field/FieldDescription.tsx           | 11 ++++++++++
 .../src/components/form/Field/FieldHelp.tsx   | 10 ---------
 .../components/form/Field/fieldA11Y.test.tsx  | 22 +++++++++++++++++++
 .../src/components/form/Field/fieldA11Y.ts    | 16 +++++++-------
 .../react/src/components/form/Field/index.ts  | 12 +++++-----
 6 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 packages/react/src/components/form/Field/FieldDescription.tsx
 delete mode 100644 packages/react/src/components/form/Field/FieldHelp.tsx
 create mode 100644 packages/react/src/components/form/Field/fieldA11Y.test.tsx

diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 511b2f21a7..2819a5ed6c 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -29,8 +29,8 @@ const toggles = {
   inputId: '',
   label: true,
   labelFor: '',
-  help: true,
-  helpId: '',
+  description: true,
+  descriptionId: '',
   validation: true,
   validationId: '',
   moveToBody: false,
@@ -42,8 +42,8 @@ export const Preview: Story = (args) => {
     inputId,
     label,
     labelFor,
-    help,
-    helpId,
+    description,
+    descriptionId,
     validation,
     validationId,
     moveToBody,
@@ -62,7 +62,11 @@ export const Preview: Story = (args) => {
   return (
     <Field data-my-field>
       {label && <Label htmlFor={labelFor || undefined}>Kort beskrivelse</Label>}
-      {help && <Field.Help id={helpId || undefined}>Beskrivelse</Field.Help>}
+      {description && (
+        <Field.Description id={descriptionId || undefined}>
+          Beskrivelse
+        </Field.Description>
+      )}
       {type && <Component id={inputId || undefined} />}
       {validation && (
         <ValidationMessage data-my-validation id={validationId || undefined}>
diff --git a/packages/react/src/components/form/Field/FieldDescription.tsx b/packages/react/src/components/form/Field/FieldDescription.tsx
new file mode 100644
index 0000000000..b5a1c26592
--- /dev/null
+++ b/packages/react/src/components/form/Field/FieldDescription.tsx
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type FieldDescriptionProps = HTMLAttributes<HTMLDivElement>;
+
+export const FieldDescription = forwardRef<
+  HTMLDivElement,
+  FieldDescriptionProps
+>(function FieldDescription(rest, ref) {
+  return <div data-field='description' ref={ref} {...rest} />;
+});
diff --git a/packages/react/src/components/form/Field/FieldHelp.tsx b/packages/react/src/components/form/Field/FieldHelp.tsx
deleted file mode 100644
index e03292cdd4..0000000000
--- a/packages/react/src/components/form/Field/FieldHelp.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-export type FieldHelpProps = HTMLAttributes<HTMLDivElement>;
-
-export const FieldHelp = forwardRef<HTMLDivElement, FieldHelpProps>(
-  function FieldHelp(rest, ref) {
-    return <div data-field='help' ref={ref} {...rest} />;
-  },
-);
diff --git a/packages/react/src/components/form/Field/fieldA11Y.test.tsx b/packages/react/src/components/form/Field/fieldA11Y.test.tsx
new file mode 100644
index 0000000000..425922d229
--- /dev/null
+++ b/packages/react/src/components/form/Field/fieldA11Y.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import { Input, Label } from '../../';
+import { fieldA11Y } from './fieldA11Y';
+
+describe('fieldA11Y', () => {
+  it('connects input and label', () => {
+    const { container } = render(
+      <div>
+        <Label>Navn</Label>
+        <Input />
+      </div>,
+    );
+    fieldA11Y(container);
+
+    const label = screen.getByText('Navn');
+    const input = screen.getByLabelText('Navn');
+
+    expect(label).toHaveAttribute('for', input.id);
+  });
+});
diff --git a/packages/react/src/components/form/Field/fieldA11Y.ts b/packages/react/src/components/form/Field/fieldA11Y.ts
index 3f6ef92913..36353216b9 100644
--- a/packages/react/src/components/form/Field/fieldA11Y.ts
+++ b/packages/react/src/components/form/Field/fieldA11Y.ts
@@ -26,7 +26,8 @@ export const fieldA11Y = (fieldElement: HTMLElement | null) => {
 
     // Reset removed elements
     for (const el of removed)
-      if (isElement(el) && elements.has(el)) {
+      if (input === el) input = null;
+      else if (isElement(el) && elements.has(el)) {
         const attr = isLabel(el) ? "for" : "id";
         setAttr(el, attr, elements.get(el));
         elements.delete(el);
@@ -34,18 +35,17 @@ export const fieldA11Y = (fieldElement: HTMLElement | null) => {
 
     // Connect elements
     const inputId = input?.id || uuid;
-    const describedby: string[] = [];
+    const descs: string[] = [];
     for (const [el, value] of elements) {
-      const attr = isLabel(el) ? "for" : "id";
-      const type = el.getAttribute("data-field");
+      const desc = el.getAttribute("data-field");
+      const id = desc ? `${inputId}:${desc}` : inputId;
 
-      if (!value) setAttr(el, attr, type ? `${inputId}:${type}` : inputId); // Ensure we have a value
-      if (type) describedby[type === "validation" ? "unshift" : "push"](el.id); // Validations to the front
+      if (!value) setAttr(el, isLabel(el) ? "for" : "id", id); // Ensure we have a value
+      if (desc) descs[desc === "validation" ? "unshift" : "push"](el.id); // Validations to the front
     }
 
-    // Set aria-describedby
     setAttr(input, "id", inputId);
-    setAttr(input, "aria-describedby", describedby.join(" "));
+    setAttr(input, "aria-describedby", descs.join(" "));
   };
 
   const observer = createOptimizedMutationObserver(process);
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index f7c5522617..012cdadacf 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -1,5 +1,5 @@
 import { Field as FieldParent } from "./Field";
-import { FieldHelp } from "./FieldHelp";
+import { FieldDescription } from "./FieldDescription";
 
 /**
  * @example
@@ -7,15 +7,15 @@ import { FieldHelp } from "./FieldHelp";
  *  <Label>Label text</Label>
  *  <Field.Description>Description</Field.Description>
  *  <Input />
- *  <Field.Validation>Validation message</Field.Validation>
+ *  <ValidationMessage>Validation message</ValidationMessage>
  * </Field>
  */
 const Field = Object.assign(FieldParent, {
-  Help: FieldHelp,
+  Description: FieldDescription,
 });
 
-Field.Help.displayName = "Field.Help";
+Field.Description.displayName = "Field.Description";
 
 export type { FieldProps } from "./Field";
-export type { FieldHelpProps } from "./FieldHelp";
-export { Field, FieldHelp };
+export type { FieldDescriptionProps } from "./FieldDescription";
+export { Field, FieldDescription };

From f5176f2dc52e976188356ea2a440dde9ea76e141 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 12:05:25 +0200
Subject: [PATCH 16/23] chore(Field): lint

---
 .../src/components/form/Field/fieldA11Y.ts    | 20 +++++++++----------
 .../react/src/components/form/Field/index.ts  | 10 +++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/components/form/Field/fieldA11Y.ts b/packages/react/src/components/form/Field/fieldA11Y.ts
index 36353216b9..2b3c3786f1 100644
--- a/packages/react/src/components/form/Field/fieldA11Y.ts
+++ b/packages/react/src/components/form/Field/fieldA11Y.ts
@@ -20,15 +20,15 @@ export const fieldA11Y = (fieldElement: HTMLElement | null) => {
     for (const el of changed)
       if (isElement(el)) {
         if (isLabel(el)) elements.set(el, el.htmlFor);
-        else if ("validity" in el) input = el;
-        else if (el.hasAttribute("data-field")) elements.set(el, el.id);
+        else if ('validity' in el) input = el;
+        else if (el.hasAttribute('data-field')) elements.set(el, el.id);
       }
 
     // Reset removed elements
     for (const el of removed)
       if (input === el) input = null;
       else if (isElement(el) && elements.has(el)) {
-        const attr = isLabel(el) ? "for" : "id";
+        const attr = isLabel(el) ? 'for' : 'id';
         setAttr(el, attr, elements.get(el));
         elements.delete(el);
       }
@@ -37,26 +37,26 @@ export const fieldA11Y = (fieldElement: HTMLElement | null) => {
     const inputId = input?.id || uuid;
     const descs: string[] = [];
     for (const [el, value] of elements) {
-      const desc = el.getAttribute("data-field");
+      const desc = el.getAttribute('data-field');
       const id = desc ? `${inputId}:${desc}` : inputId;
 
-      if (!value) setAttr(el, isLabel(el) ? "for" : "id", id); // Ensure we have a value
-      if (desc) descs[desc === "validation" ? "unshift" : "push"](el.id); // Validations to the front
+      if (!value) setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+      if (desc) descs[desc === 'validation' ? 'unshift' : 'push'](el.id); // Validations to the front
     }
 
-    setAttr(input, "id", inputId);
-    setAttr(input, "aria-describedby", descs.join(" "));
+    setAttr(input, 'id', inputId);
+    setAttr(input, 'aria-describedby', descs.join(' '));
   };
 
   const observer = createOptimizedMutationObserver(process);
   observer.observe(fieldElement, {
-    attributeFilter: ["id", "for", "aria-describedby"],
+    attributeFilter: ['id', 'for', 'aria-describedby'],
     attributes: true,
     childList: true,
     subtree: true,
   });
 
-  process([{ addedNodes: fieldElement.querySelectorAll("*") }]); // Initial setup
+  process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
   observer.takeRecords(); // Clear initial setup queue
   return () => observer.disconnect();
 };
diff --git a/packages/react/src/components/form/Field/index.ts b/packages/react/src/components/form/Field/index.ts
index 012cdadacf..181a3c84bc 100644
--- a/packages/react/src/components/form/Field/index.ts
+++ b/packages/react/src/components/form/Field/index.ts
@@ -1,5 +1,5 @@
-import { Field as FieldParent } from "./Field";
-import { FieldDescription } from "./FieldDescription";
+import { Field as FieldParent } from './Field';
+import { FieldDescription } from './FieldDescription';
 
 /**
  * @example
@@ -14,8 +14,8 @@ const Field = Object.assign(FieldParent, {
   Description: FieldDescription,
 });
 
-Field.Description.displayName = "Field.Description";
+Field.Description.displayName = 'Field.Description';
 
-export type { FieldProps } from "./Field";
-export type { FieldDescriptionProps } from "./FieldDescription";
+export type { FieldProps } from './Field';
+export type { FieldDescriptionProps } from './FieldDescription';
 export { Field, FieldDescription };

From c68eeaccea24179f254eb39946608b74cc25395d Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 12:53:22 +0200
Subject: [PATCH 17/23] fix(Field): PR comments

---
 packages/css/index.css                                    | 2 +-
 .../react/src/components/form/Field/Field.stories.tsx     | 3 +--
 packages/react/src/components/form/Field/Field.tsx        | 4 ++--
 .../Field/{fieldA11Y.test.tsx => fieldObserver.test.tsx}  | 8 ++++----
 .../form/Field/{fieldA11Y.ts => fieldObserver.ts}         | 8 ++++----
 5 files changed, 12 insertions(+), 13 deletions(-)
 rename packages/react/src/components/form/Field/{fieldA11Y.test.tsx => fieldObserver.test.tsx} (72%)
 rename packages/react/src/components/form/Field/{fieldA11Y.ts => fieldObserver.ts} (95%)

diff --git a/packages/css/index.css b/packages/css/index.css
index 207f938b6b..8a7be7c55e 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -14,12 +14,12 @@
 @import url('./popover.css') layer(ds.components);
 @import url('./skiplink.css') layer(ds.components);
 @import url('./accordion.css') layer(ds.components);
+@import url('./field.css') layer(ds.components);
 @import url('./switch.css') layer(ds.components);
 @import url('./checkbox.css') layer(ds.components);
 @import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
-@import url('./field.css') layer(ds.components);
 @import url('./input.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
 @import url('./modal.css') layer(ds.components);
diff --git a/packages/react/src/components/form/Field/Field.stories.tsx b/packages/react/src/components/form/Field/Field.stories.tsx
index 2819a5ed6c..4ed156eb6d 100644
--- a/packages/react/src/components/form/Field/Field.stories.tsx
+++ b/packages/react/src/components/form/Field/Field.stories.tsx
@@ -73,10 +73,9 @@ export const Preview: Story = (args) => {
           Feilmelding
         </ValidationMessage>
       )}
-      {/* {createPortal(<div>Hei</div>, document.body)} */}
     </Field>
   );
 };
 
-// @ts-expect-error
+// @ts-expect-error ts2559: Preview.args uses more properties for testing than what is supported by <Field>
 Preview.args = toggles;
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
index ec72a69e70..f049723132 100644
--- a/packages/react/src/components/form/Field/Field.tsx
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -2,7 +2,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import { fieldA11Y } from './fieldA11Y';
+import { fieldObserver } from './fieldObserver';
 
 export type FieldProps = HTMLAttributes<HTMLDivElement>;
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
@@ -11,7 +11,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
 ) {
   const fieldRef = useRef<HTMLDivElement>(null);
   const mergedRefs = useMergeRefs([fieldRef, ref]);
-  useEffect(() => fieldA11Y(fieldRef.current), []);
+  useEffect(() => fieldObserver(fieldRef.current), []);
 
   return (
     <div className={cl('ds-field', className)} ref={mergedRefs} {...rest} />
diff --git a/packages/react/src/components/form/Field/fieldA11Y.test.tsx b/packages/react/src/components/form/Field/fieldObserver.test.tsx
similarity index 72%
rename from packages/react/src/components/form/Field/fieldA11Y.test.tsx
rename to packages/react/src/components/form/Field/fieldObserver.test.tsx
index 425922d229..14c3818926 100644
--- a/packages/react/src/components/form/Field/fieldA11Y.test.tsx
+++ b/packages/react/src/components/form/Field/fieldObserver.test.tsx
@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 
-import { Input, Label } from '../../';
-import { fieldA11Y } from './fieldA11Y';
+import { Input, Label } from '../..';
+import { fieldObserver } from './fieldObserver';
 
-describe('fieldA11Y', () => {
+describe('fieldObserver', () => {
   it('connects input and label', () => {
     const { container } = render(
       <div>
@@ -12,7 +12,7 @@ describe('fieldA11Y', () => {
         <Input />
       </div>,
     );
-    fieldA11Y(container);
+    fieldObserver(container);
 
     const label = screen.getByText('Navn');
     const input = screen.getByLabelText('Navn');
diff --git a/packages/react/src/components/form/Field/fieldA11Y.ts b/packages/react/src/components/form/Field/fieldObserver.ts
similarity index 95%
rename from packages/react/src/components/form/Field/fieldA11Y.ts
rename to packages/react/src/components/form/Field/fieldObserver.ts
index 2b3c3786f1..f6836ac791 100644
--- a/packages/react/src/components/form/Field/fieldA11Y.ts
+++ b/packages/react/src/components/form/Field/fieldObserver.ts
@@ -1,4 +1,4 @@
-export const fieldA11Y = (fieldElement: HTMLElement | null) => {
+export function fieldObserver(fieldElement: HTMLElement | null) {
   if (!fieldElement) return;
 
   const elements = new Map<Element, string | null>();
@@ -59,7 +59,7 @@ export const fieldA11Y = (fieldElement: HTMLElement | null) => {
   process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
   observer.takeRecords(); // Clear initial setup queue
   return () => observer.disconnect();
-};
+}
 
 // Utilities
 const isElement = (node: Node) => node instanceof Element;
@@ -68,7 +68,7 @@ const setAttr = (el: Element | null, name: string, value?: string | null) =>
   value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
 
 // Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
-const createOptimizedMutationObserver = (callback: MutationCallback) => {
+function createOptimizedMutationObserver(callback: MutationCallback) {
   const queue: MutationRecord[] = [];
   const observer = new MutationObserver((mutations) => {
     if (!queue.length) requestAnimationFrame(process);
@@ -82,4 +82,4 @@ const createOptimizedMutationObserver = (callback: MutationCallback) => {
   };
 
   return observer;
-};
+}

From 2c65b8786a945a9cf8eee0ddb48967ee06c5513a Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 13:07:42 +0200
Subject: [PATCH 18/23] fix(Field): isFormAssociated

---
 .../src/components/form/Field/fieldObserver.ts  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/form/Field/fieldObserver.ts b/packages/react/src/components/form/Field/fieldObserver.ts
index f6836ac791..e169a0ec72 100644
--- a/packages/react/src/components/form/Field/fieldObserver.ts
+++ b/packages/react/src/components/form/Field/fieldObserver.ts
@@ -17,19 +17,17 @@ export function fieldObserver(fieldElement: HTMLElement | null) {
     }
 
     // Register elements
-    for (const el of changed)
-      if (isElement(el)) {
-        if (isLabel(el)) elements.set(el, el.htmlFor);
-        else if ('validity' in el) input = el;
-        else if (el.hasAttribute('data-field')) elements.set(el, el.id);
-      }
+    for (const el of changed) {
+      if (isLabel(el)) elements.set(el, el.htmlFor);
+      else if (isElement(el) && el.hasAttribute('data-field')) elements.set(el as Element, el.id);
+      else if (isFormAssociated(el)) input = el;
+    }
 
     // Reset removed elements
     for (const el of removed)
       if (input === el) input = null;
       else if (isElement(el) && elements.has(el)) {
-        const attr = isLabel(el) ? 'for' : 'id';
-        setAttr(el, attr, elements.get(el));
+        setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
         elements.delete(el);
       }
 
@@ -64,6 +62,9 @@ export function fieldObserver(fieldElement: HTMLElement | null) {
 // Utilities
 const isElement = (node: Node) => node instanceof Element;
 const isLabel = (node: Node) => node instanceof HTMLLabelElement;
+const isFormAssociated = (node: Node): node is Element =>
+  'validity' in node && !(node instanceof HTMLButtonElement);
+
 const setAttr = (el: Element | null, name: string, value?: string | null) =>
   value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
 

From 6e38e9f4375c6126297d220e44d1acb728d9978e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 13:08:07 +0200
Subject: [PATCH 19/23] chore: lint

---
 packages/react/src/components/form/Field/fieldObserver.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/Field/fieldObserver.ts b/packages/react/src/components/form/Field/fieldObserver.ts
index e169a0ec72..f0a0fe10db 100644
--- a/packages/react/src/components/form/Field/fieldObserver.ts
+++ b/packages/react/src/components/form/Field/fieldObserver.ts
@@ -19,8 +19,9 @@ export function fieldObserver(fieldElement: HTMLElement | null) {
     // Register elements
     for (const el of changed) {
       if (isLabel(el)) elements.set(el, el.htmlFor);
-      else if (isElement(el) && el.hasAttribute('data-field')) elements.set(el as Element, el.id);
       else if (isFormAssociated(el)) input = el;
+      else if (isElement(el) && el.hasAttribute('data-field'))
+        elements.set(el as Element, el.id);
     }
 
     // Reset removed elements

From 30c4d6df85d5606f82d6ddaac4ad79d5d4fb3307 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Fri, 18 Oct 2024 13:12:57 +0200
Subject: [PATCH 20/23] Create plenty-singers-matter.md

---
 .changeset/plenty-singers-matter.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/plenty-singers-matter.md

diff --git a/.changeset/plenty-singers-matter.md b/.changeset/plenty-singers-matter.md
new file mode 100644
index 0000000000..68211250fe
--- /dev/null
+++ b/.changeset/plenty-singers-matter.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility

From a32cd1b77d6e094ec0562b25a16acf0eec50cd0c Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 13:20:31 +0200
Subject: [PATCH 21/23] fix(Field): early return in for of loop

---
 .../react/src/components/form/Field/fieldObserver.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/form/Field/fieldObserver.ts b/packages/react/src/components/form/Field/fieldObserver.ts
index f0a0fe10db..788c9275e1 100644
--- a/packages/react/src/components/form/Field/fieldObserver.ts
+++ b/packages/react/src/components/form/Field/fieldObserver.ts
@@ -18,19 +18,23 @@ export function fieldObserver(fieldElement: HTMLElement | null) {
 
     // Register elements
     for (const el of changed) {
+      if (!isElement(el)) continue;
+
       if (isLabel(el)) elements.set(el, el.htmlFor);
+      else if (el.hasAttribute('data-field')) elements.set(el, el.id);
       else if (isFormAssociated(el)) input = el;
-      else if (isElement(el) && el.hasAttribute('data-field'))
-        elements.set(el as Element, el.id);
     }
 
     // Reset removed elements
-    for (const el of removed)
+    for (const el of changed) {
+      if (!isElement(el)) continue;
+
       if (input === el) input = null;
-      else if (isElement(el) && elements.has(el)) {
+      if (elements.has(el)) {
         setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
         elements.delete(el);
       }
+    }
 
     // Connect elements
     const inputId = input?.id || uuid;

From fd946ae6f873b0846ba5dda1a16319132f47a005 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 13:32:53 +0200
Subject: [PATCH 22/23] fix: typo

---
 packages/react/src/components/form/Field/fieldObserver.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/Field/fieldObserver.ts b/packages/react/src/components/form/Field/fieldObserver.ts
index 788c9275e1..bfb882a50f 100644
--- a/packages/react/src/components/form/Field/fieldObserver.ts
+++ b/packages/react/src/components/form/Field/fieldObserver.ts
@@ -26,7 +26,7 @@ export function fieldObserver(fieldElement: HTMLElement | null) {
     }
 
     // Reset removed elements
-    for (const el of changed) {
+    for (const el of removed) {
       if (!isElement(el)) continue;
 
       if (input === el) input = null;

From c339c1bb4c6f3cdf5486df8bffc6b3222fd1fc80 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 18 Oct 2024 13:58:30 +0200
Subject: [PATCH 23/23] chore: readability

---
 .../react/src/components/form/Field/fieldObserver.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/form/Field/fieldObserver.ts b/packages/react/src/components/form/Field/fieldObserver.ts
index bfb882a50f..f2ff512e7f 100644
--- a/packages/react/src/components/form/Field/fieldObserver.ts
+++ b/packages/react/src/components/form/Field/fieldObserver.ts
@@ -38,17 +38,19 @@ export function fieldObserver(fieldElement: HTMLElement | null) {
 
     // Connect elements
     const inputId = input?.id || uuid;
-    const descs: string[] = [];
+    const describedbyIds: string[] = [];
     for (const [el, value] of elements) {
-      const desc = el.getAttribute('data-field');
-      const id = desc ? `${inputId}:${desc}` : inputId;
+      const descriptionType = el.getAttribute('data-field');
+      const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
 
       if (!value) setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-      if (desc) descs[desc === 'validation' ? 'unshift' : 'push'](el.id); // Validations to the front
+      if (descriptionType === 'validation')
+        describedbyIds.unshift(el.id); // Validations to the front
+      else if (descriptionType) describedbyIds.push(el.id); // Other descriptions to the back
     }
 
     setAttr(input, 'id', inputId);
-    setAttr(input, 'aria-describedby', descs.join(' '));
+    setAttr(input, 'aria-describedby', describedbyIds.join(' '));
   };
 
   const observer = createOptimizedMutationObserver(process);