From 0db9d33c4e570b2bc80f810fdf631f252a0195e0 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 25 Nov 2024 16:10:38 +0100 Subject: [PATCH] fix: fix type of form associated controls --- .../checkbox/common/checkbox-common.spec.ts | 1 + .../mixins/form-associated-checkbox-mixin.ts | 5 +++++ .../mixins/form-associated-radio-button-mixin.ts | 5 +++++ .../common/file-selector-common.spec.ts | 3 +++ .../file-selector/common/file-selector-common.ts | 5 +++++ .../common/radio-button-common.spec.ts | 16 ++++++++++------ src/elements/select/select.spec.ts | 1 + src/elements/select/select.ts | 5 +++++ src/elements/slider/slider.spec.ts | 3 +++ src/elements/slider/slider.ts | 5 +++++ 10 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/elements/checkbox/common/checkbox-common.spec.ts b/src/elements/checkbox/common/checkbox-common.spec.ts index f28e10ec79..cbd6660f8c 100644 --- a/src/elements/checkbox/common/checkbox-common.spec.ts +++ b/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, diff --git a/src/elements/core/mixins/form-associated-checkbox-mixin.ts b/src/elements/core/mixins/form-associated-checkbox-mixin.ts index 0d2166cc97..5a3d8ad8e8 100644 --- a/src/elements/core/mixins/form-associated-checkbox-mixin.ts +++ b/src/elements/core/mixins/form-associated-checkbox-mixin.ts @@ -88,6 +88,11 @@ export const SbbFormAssociatedCheckboxMixin = } private _checked: boolean = false; + /** @internal */ + public override get type(): string { + return 'checkbox'; + } + protected constructor() { super(); /** @internal */ diff --git a/src/elements/core/mixins/form-associated-radio-button-mixin.ts b/src/elements/core/mixins/form-associated-radio-button-mixin.ts index 3fd0d1d3ee..b33d256b9b 100644 --- a/src/elements/core/mixins/form-associated-radio-button-mixin.ts +++ b/src/elements/core/mixins/form-associated-radio-button-mixin.ts @@ -68,6 +68,11 @@ export const SbbFormAssociatedRadioButtonMixin = { 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 diff --git a/src/elements/file-selector/common/file-selector-common.ts b/src/elements/file-selector/common/file-selector-common.ts index 96951e24c9..7721922f17 100644 --- a/src/elements/file-selector/common/file-selector-common.ts +++ b/src/elements/file-selector/common/file-selector-common.ts @@ -110,6 +110,11 @@ export const SbbFileSelectorCommonElementMixin = [] = []; + /** @internal */ + public override get type(): string { + return 'file'; + } + /** An event which is emitted each time the file list changes. */ private _fileChangedEvent: EventEmitter[]> = new EventEmitter( this, diff --git a/src/elements/radio-button/common/radio-button-common.spec.ts b/src/elements/radio-button/common/radio-button-common.spec.ts index fedd394ef3..5f001d33b0 100644 --- a/src/elements/radio-button/common/radio-button-common.spec.ts +++ b/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); diff --git a/src/elements/select/select.spec.ts b/src/elements/select/select.spec.ts index 24475a6474..f1539b73e5 100644 --- a/src/elements/select/select.spec.ts +++ b/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 () => { diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index 231b093d9b..a8279a53bb 100644 --- a/src/elements/select/select.ts +++ b/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; diff --git a/src/elements/slider/slider.spec.ts b/src/elements/slider/slider.spec.ts index 3d0e138430..5302d427a2 100644 --- a/src/elements/slider/slider.spec.ts +++ b/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 () => { diff --git a/src/elements/slider/slider.ts b/src/elements/slider/slider.ts index 705a334cba..a39aeba2f7 100644 --- a/src/elements/slider/slider.ts +++ b/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`