fix: fix type of form associated controls

src/elements/checkbox/common/checkbox-common.spec.ts

@@ -216,6 +216,7 @@ describe(`checkbox common behaviors`, () => {
       })) as unknown as CheckboxAccessibilitySnapshot;
 
       expect(snapshot.role).to.equal('checkbox');
+      expect(element.type).to.be.equal('checkbox');
 
       expect(snapshot.checked, `ariaChecked in ${JSON.stringify(snapshot)}`).to.be.equal(
         isFirefox && assertions.ariaChecked === false ? undefined : assertions.ariaChecked,

src/elements/core/mixins/form-associated-checkbox-mixin.ts

@@ -88,6 +88,11 @@ export const SbbFormAssociatedCheckboxMixin = <T extends Constructor<LitElement>
     }
     private _checked: boolean = false;
 
+    /** @internal */
+    public override get type(): string {
+      return 'checkbox';
+    }
+
     protected constructor() {
       super();
       /** @internal */

src/elements/core/mixins/form-associated-radio-button-mixin.ts

@@ -68,6 +68,11 @@ export const SbbFormAssociatedRadioButtonMixin = <T extends Constructor<LitEleme
     @property({ type: Boolean })
     public accessor checked: boolean = false;
 
+    /** @internal */
+    public override get type(): string {
+      return 'radio';
+    }
+
     protected abort = new SbbConnectedAbortController(this);
 
     /**

src/elements/file-selector/common/file-selector-common.spec.ts

@@ -99,6 +99,9 @@ describe('sbb-file-selector common', () => {
           expect(e.lastModified, `file - lastModified - ${i}`).to.be.equal(
             Array.from(input.files!)[i].lastModified,
           );
+
+          expect(element.role, 'compare to native role').to.be.equal(input.role);
+          expect(element.type, 'compare to native type').to.be.equal(input.type);
         });
 
         // Compare formData

src/elements/file-selector/common/file-selector-common.ts

@@ -110,6 +110,11 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
     }
     private _files: Readonly<File>[] = [];
 
+    /** @internal */
+    public override get type(): string {
+      return 'file';
+    }
+
     /** An event which is emitted each time the file list changes. */
     private _fileChangedEvent: EventEmitter<Readonly<File>[]> = new EventEmitter(
       this,

src/elements/radio-button/common/radio-button-common.spec.ts

@@ -13,7 +13,7 @@ import type { SbbRadioButtonElement } from '../radio-button.js';
 import '../radio-button.js';
 import '../radio-button-panel.js';
 
-interface CheckboxAccessibilitySnapshot {
+interface RadioButtonAccessibilitySnapshot {
   checked: boolean;
   role: string;
   disabled: boolean;
@@ -81,7 +81,7 @@ describe(`radio-button common behaviors`, () => {
       it('should reflect aria-required false', async () => {
         const snapshot = (await a11ySnapshot({
           selector: selector,
-        })) as unknown as CheckboxAccessibilitySnapshot;
+        })) as unknown as RadioButtonAccessibilitySnapshot;
 
         expect(snapshot.required).to.be.undefined;
       });
@@ -95,7 +95,7 @@ describe(`radio-button common behaviors`, () => {
 
         const snapshot = (await a11ySnapshot({
           selector: selector,
-        })) as unknown as CheckboxAccessibilitySnapshot;
+        })) as unknown as RadioButtonAccessibilitySnapshot;
 
         // TODO: Recheck if it is working in Chromium
         if (!isChromium) {
@@ -115,7 +115,7 @@ describe(`radio-button common behaviors`, () => {
 
         const snapshot = (await a11ySnapshot({
           selector: selector,
-        })) as unknown as CheckboxAccessibilitySnapshot;
+        })) as unknown as RadioButtonAccessibilitySnapshot;
 
         expect(snapshot.required).not.to.be.ok;
       });
@@ -129,7 +129,7 @@ describe(`radio-button common behaviors`, () => {
 
         const snapshot = (await a11ySnapshot({
           selector: selector,
-        })) as unknown as CheckboxAccessibilitySnapshot;
+        })) as unknown as RadioButtonAccessibilitySnapshot;
 
         // TODO: Recheck if it is working in Chromium
         if (!isChromium) {
@@ -149,7 +149,7 @@ describe(`radio-button common behaviors`, () => {
 
         const snapshot = (await a11ySnapshot({
           selector: selector,
-        })) as unknown as CheckboxAccessibilitySnapshot;
+        })) as unknown as RadioButtonAccessibilitySnapshot;
 
         expect(snapshot.required).not.to.be.ok;
       });
@@ -202,6 +202,10 @@ describe(`radio-button common behaviors`, () => {
         );
       });
 
+      // General form configuration
+      expect(elements[0].type, 'radio type').to.be.equal(nativeElements[0].type);
+      expect(elements[0].role, 'radio role').to.be.equal(nativeElements[0].role);
+
       // Events
       expect(inputSpy.count, `'input' event`).to.be.equal(nativeInputSpy.count);
       expect(changeSpy.count, `'change' event`).to.be.equal(nativeChangeSpy.count);

src/elements/select/select.spec.ts

@@ -460,6 +460,7 @@ describe(`sbb-select`, () => {
       expect(elemInputEvent.count, 'compare to native - input counts').to.be.equal(
         nativeInputEvent.count,
       );
+      expect(element.type, 'compare to native - type').to.be.equal(nativeSelect.type);
     }
 
     it('should set default value', async () => {

src/elements/select/select.ts

@@ -102,6 +102,11 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin(
   @property({ type: Boolean })
   public accessor readonly: boolean = false;
 
+  /** @internal */
+  public override get type(): string {
+    return this.multiple ? 'select-multiple' : 'select-one';
+  }
+
   /** The value displayed by the component. */
   @state() private accessor _displayValue: string | null = null;
 

src/elements/slider/slider.spec.ts

@@ -70,6 +70,9 @@ describe(`sbb-slider`, () => {
     expect(elemInputEvent.count, 'compare to native - input counts').to.be.equal(
       nativeInputEvent.count,
     );
+
+    expect(element.type, 'compare to native - type').to.be.equal(input.type);
+    expect(element.role, 'compare to native - role').to.be.equal(input.role);
   }
 
   it('renders', async () => {

src/elements/slider/slider.ts

@@ -111,6 +111,11 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen
   @property({ attribute: 'end-icon' })
   public accessor endIcon: string = '';
 
+  /** @internal */
+  public override get type(): string {
+    return 'range';
+  }
+
   /**
    * The ratio between the absolute value and the validity interval.
    * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`