🐛 fix(bal-input): Duplicate id's and unable to set own id's (#1569)

* Create PR for #1506

* fix(bal-field): id assignment of children

* chore: fix format

* fix(bal-field): id assignment of children

* fix(a11y): current state

* fix(a11y): prevent object manipulation of ariaForm to not introduce issues with id generations of components

* fix(a11y): reformat

* fix(a11y): add changeset

* update base images

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yannick Holzenkamp <yannick@holzenkamp.me>
Co-authored-by: Marco Zirkenbach <marco.zirkenbach@baloise.ch>
Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>

.changeset/short-seals-poke.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**field**: fix id generation to prevent duplicate ids in a form

.changeset/thick-lies-search.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**core**: Fix id assignment of bal-field children

packages/core/src/components/bal-field/bal-field.tsx

@@ -184,7 +184,7 @@ export class Field implements ComponentInterface, BalMutationObserver {
       'bal-field-control bal-file-upload',
     ])
 
-    const ariaForm = defaultBalAriaForm
+    const ariaForm = { ...defaultBalAriaForm }
 
     if (label) {
       ariaForm.labelId = `${this.fieldId}-lbl`

packages/core/src/components/bal-select/test/bal-select-multiple.visual.html

@@ -17,27 +17,45 @@
     <bal-doc-app>
       <main class="container py-medium">
         <section data-testid="basic">
-          <bal-select multiple data-testid="basic-input" placeholder="Placeholder">
-            <bal-select-option label="Option 1" value="opt-1">Option 1</bal-select-option>
-            <bal-select-option label="Option 2" value="opt-2">Option 2</bal-select-option>
-            <bal-select-option label="Option 3" value="opt-3">Option 3</bal-select-option>
-            <bal-select-option label="Option 4" value="opt-4">Option 4</bal-select-option>
-            <bal-select-option label="Option 5" value="opt-5">Option 5</bal-select-option>
-            <bal-select-option label="Option 6" value="opt-6">Option 6</bal-select-option>
-            <bal-select-option label="Option 7" value="opt-7">Option 7</bal-select-option>
-          </bal-select>
+          <bal-field>
+            <bal-field-label>Label</bal-field-label>
+            <bal-field-control>
+              <bal-select multiple data-testid="basic-input" placeholder="Placeholder">
+                <bal-select-option label="Option 1" value="opt-1">Option 1</bal-select-option>
+                <bal-select-option label="Option 2" value="opt-2">Option 2</bal-select-option>
+                <bal-select-option label="Option 3" value="opt-3">Option 3</bal-select-option>
+                <bal-select-option label="Option 4" value="opt-4">Option 4</bal-select-option>
+                <bal-select-option label="Option 5" value="opt-5">Option 5</bal-select-option>
+                <bal-select-option label="Option 6" value="opt-6">Option 6</bal-select-option>
+                <bal-select-option label="Option 7" value="opt-7">Option 7</bal-select-option>
+              </bal-select>
+            </bal-field-control>
+            <bal-field-message>Message</bal-field-message>
+          </bal-field>
         </section>
         <section data-testid="disabled">
-          <bal-select multiple disabled value="opt-1,opt-2">
-            <bal-select-option label="Option 1" value="opt-1">Option 1</bal-select-option>
-            <bal-select-option label="Option 2" value="opt-2">Option 2</bal-select-option>
-          </bal-select>
+          <bal-field>
+            <bal-field-label>Label</bal-field-label>
+            <bal-field-control>
+              <bal-select multiple disabled value="opt-1,opt-2">
+                <bal-select-option label="Option 1" value="opt-1">Option 1</bal-select-option>
+                <bal-select-option label="Option 2" value="opt-2">Option 2</bal-select-option>
+              </bal-select>
+            </bal-field-control>
+            <bal-field-message>Message</bal-field-message>
+          </bal-field>
         </section>
         <section data-testid="invalid">
-          <bal-select multiple invalid value="opt-1,opt-2">
-            <bal-select-option label="Option 1" value="opt-1">Option 1</bal-select-option>
-            <bal-select-option label="Option 2" value="opt-2">Option 2</bal-select-option>
-          </bal-select>
+          <bal-field>
+            <bal-field-label>Label</bal-field-label>
+            <bal-field-control>
+              <bal-select multiple invalid value="opt-1,opt-2">
+                <bal-select-option label="Option 1" value="opt-1">Option 1</bal-select-option>
+                <bal-select-option label="Option 2" value="opt-2">Option 2</bal-select-option>
+              </bal-select>
+            </bal-field-control>
+            <bal-field-message>Message</bal-field-message>
+          </bal-field>
         </section>
         <section data-testid="field">
           <bal-field>

packages/core/src/utils/form.ts

@@ -31,8 +31,8 @@ export interface BalAriaFormLinking {
   setAriaForm(ariaForm: BalAriaForm): Promise<void>
 }
 
-export const defaultBalAriaForm: BalAriaForm = {
+export const defaultBalAriaForm: BalAriaForm = Object.freeze({
   controlId: undefined,
   labelId: undefined,
   messageId: undefined,
-}
+})