From c925c6432f605348a01a2be4b0c0a1d15467e9fd Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Mon, 25 Nov 2024 17:25:39 +0100 Subject: [PATCH] fix: fix type of form associated controls (#3242) Closes #3238 (cherry picked from commit cbf839c3701b33326f576814a376ece46966594e) --- .../checkbox/checkbox-panel/readme.md | 27 ++++++++++--------- src/elements/checkbox/checkbox/readme.md | 27 ++++++++++--------- .../checkbox/common/checkbox-common.spec.ts | 1 + .../mixins/form-associated-checkbox-mixin.ts | 8 ++++++ .../file-selector/file-selector.spec.ts | 3 +++ src/elements/file-selector/file-selector.ts | 8 ++++++ src/elements/file-selector/readme.md | 1 + src/elements/select/readme.md | 25 ++++++++--------- src/elements/select/select.spec.ts | 1 + src/elements/select/select.ts | 8 ++++++ src/elements/slider/readme.md | 25 ++++++++--------- src/elements/slider/slider.spec.ts | 3 +++ src/elements/slider/slider.ts | 8 ++++++ src/elements/toggle-check/readme.md | 1 + 14 files changed, 96 insertions(+), 50 deletions(-) diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md index a2a542115b..774ba72acc 100644 --- a/src/elements/checkbox/checkbox-panel/readme.md +++ b/src/elements/checkbox/checkbox-panel/readme.md @@ -75,19 +75,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | --------------- | ------- | --------------------------------- | --------- | -------------------------------------------------------------- | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | --------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md index 6280437e87..fd0d8e8de9 100644 --- a/src/elements/checkbox/checkbox/readme.md +++ b/src/elements/checkbox/checkbox/readme.md @@ -81,19 +81,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events 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..fb7aa4911f 100644 --- a/src/elements/core/mixins/form-associated-checkbox-mixin.ts +++ b/src/elements/core/mixins/form-associated-checkbox-mixin.ts @@ -88,6 +88,14 @@ export const SbbFormAssociatedCheckboxMixin = } private _checked: boolean = false; + /** + * Form type of element. + * @default 'checkbox' + */ + public override get type(): string { + return 'checkbox'; + } + protected constructor() { super(); /** @internal */ diff --git a/src/elements/file-selector/file-selector.spec.ts b/src/elements/file-selector/file-selector.spec.ts index 9358788a46..b6d9acb990 100644 --- a/src/elements/file-selector/file-selector.spec.ts +++ b/src/elements/file-selector/file-selector.spec.ts @@ -90,6 +90,9 @@ describe(`sbb-file-selector`, () => { ); }); + 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 const formData = new FormData(form); const fileSelectorFormData = formData.getAll('fs'); diff --git a/src/elements/file-selector/file-selector.ts b/src/elements/file-selector/file-selector.ts index 3736a5e156..685a2dc0ed 100644 --- a/src/elements/file-selector/file-selector.ts +++ b/src/elements/file-selector/file-selector.ts @@ -109,6 +109,14 @@ class SbbFileSelectorElement extends SbbDisabledMixin(SbbFormAssociatedMixin(Lit } private _files: File[] = []; + /** + * Form type of element. + * @default 'file' + */ + 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/file-selector/readme.md b/src/elements/file-selector/readme.md index c6842e925d..d3a33b6cb2 100644 --- a/src/elements/file-selector/readme.md +++ b/src/elements/file-selector/readme.md @@ -100,6 +100,7 @@ It's suggested to have a different value for each variant, e.g.: | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | | `titleContent` | `title-content` | public | `string` | `''` | The title displayed in `dropzone` variant. | +| `type` | - | public | `string` | `'file'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | | `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | diff --git a/src/elements/select/readme.md b/src/elements/select/readme.md index 8d50c861d8..3ab77cdccd 100644 --- a/src/elements/select/readme.md +++ b/src/elements/select/readme.md @@ -139,18 +139,19 @@ Opened panel: ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------- | ------------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `isOpen` | - | public | `boolean` | | Whether the element is open. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `placeholder` | `placeholder` | public | `string` | `''` | The placeholder used if no value has been selected. | -| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------- | ------------- | ------- | ---------------------------- | -------------------------------- | -------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `isOpen` | - | public | `boolean` | | Whether the element is open. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `placeholder` | `placeholder` | public | `string` | `''` | The placeholder used if no value has been selected. | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `type` | - | public | `string` | `'select-one / select-multiple'` | Form type of element. | +| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the form element. | ## Methods 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..3ce7b3932e 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -102,6 +102,14 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( @property({ type: Boolean }) public accessor readonly: boolean = false; + /** + * Form type of element. + * @default 'select-one / select-multiple' + */ + 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/readme.md b/src/elements/slider/readme.md index 8011ad5322..74863391a6 100644 --- a/src/elements/slider/readme.md +++ b/src/elements/slider/readme.md @@ -70,18 +70,19 @@ The `sbb-slider` has the following behaviour on keypress when focused: ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ----------------- | ------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `endIcon` | `end-icon` | public | `string` | `''` | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `max` | `max` | public | `string` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | -| `min` | `min` | public | `string` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `readonly` | `readonly` | public | `boolean` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | -| `startIcon` | `start-icon` | public | `string` | `''` | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. If no value is provided, default is the middle point between min and max. | -| `valueAsNumber` | `value-as-number` | public | `number \| null` | | Numeric value for the inner HTMLInputElement. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ----------------- | ------- | ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `endIcon` | `end-icon` | public | `string` | `''` | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `max` | `max` | public | `string` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | +| `min` | `min` | public | `string` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `readonly` | `readonly` | public | `boolean` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | +| `startIcon` | `start-icon` | public | `string` | `''` | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | +| `type` | - | public | `string` | `'range'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. If no value is provided, default is the middle point between min and max. | +| `valueAsNumber` | `value-as-number` | public | `number \| null` | | Numeric value for the inner HTMLInputElement. | ## Events 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 3a2ec4a045..601401ef99 100644 --- a/src/elements/slider/slider.ts +++ b/src/elements/slider/slider.ts @@ -112,6 +112,14 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen @property({ attribute: 'end-icon' }) public accessor endIcon: string = ''; + /** + * Form type of element. + * @default 'range' + */ + 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` diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md index 532d0a7978..734c4f79b1 100644 --- a/src/elements/toggle-check/readme.md +++ b/src/elements/toggle-check/readme.md @@ -74,6 +74,7 @@ you can not provide it and then use `aria-label` to specify an appropriate label | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | | `size` | `size` | public | `'xs' \| 's' \| 'm'` | `'s'` | Size variant, either m, s or xs. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events