@vaadin/radio-group 25.3.0-alpha8 → 25.3.0-alpha9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/custom-elements.json +60 -8
  2. package/package.json +10 -10
  3. package/src/vaadin-radio-group-mixin.js +10 -17
  4. package/web-types.json +23 -5
  5. package/web-types.lit.json +10 -3
package/custom-elements.json CHANGED
@@ -484,6 +484,20 @@
484
484
  "description": "A mixin providing common radio-group functionality.",
485
485
  "name": "RadioGroupMixin",
486
486
  "members": [
487
+ {
488
+ "kind": "field",
489
+ "name": "accessibleDescriptionRef",
490
+ "privacy": "public",
491
+ "type": {
492
+ "text": "string"
493
+ },
494
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
495
+ "attribute": "accessible-description-ref",
496
+ "inheritedFrom": {
497
+ "name": "FieldMixin",
498
+ "package": "@vaadin/field-base/src/field-mixin.js"
499
+ }
500
+ },
487
501
  {
488
502
  "kind": "field",
489
503
  "name": "accessibleName",
@@ -491,7 +505,7 @@
491
505
  "type": {
492
506
  "text": "string"
493
507
  },
494
- "description": "String used to label the component to screen reader users.",
508
+ "description": "String used to label the component for screen reader users.",
495
509
  "attribute": "accessible-name",
496
510
  "inheritedFrom": {
497
511
  "name": "FieldMixin",
@@ -505,7 +519,7 @@
505
519
  "type": {
506
520
  "text": "string"
507
521
  },
508
- "description": "Id of the element used as label of the component to screen reader users.",
522
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
509
523
  "attribute": "accessible-name-ref",
510
524
  "inheritedFrom": {
511
525
  "name": "FieldMixin",
@@ -670,12 +684,24 @@
670
684
  }
671
685
  ],
672
686
  "attributes": [
687
+ {
688
+ "name": "accessible-description-ref",
689
+ "type": {
690
+ "text": "string"
691
+ },
692
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
693
+ "fieldName": "accessibleDescriptionRef",
694
+ "inheritedFrom": {
695
+ "name": "FieldMixin",
696
+ "package": "@vaadin/field-base/src/field-mixin.js"
697
+ }
698
+ },
673
699
  {
674
700
  "name": "accessible-name",
675
701
  "type": {
676
702
  "text": "string"
677
703
  },
678
- "description": "String used to label the component to screen reader users.",
704
+ "description": "String used to label the component for screen reader users.",
679
705
  "fieldName": "accessibleName",
680
706
  "inheritedFrom": {
681
707
  "name": "FieldMixin",
@@ -687,7 +713,7 @@
687
713
  "type": {
688
714
  "text": "string"
689
715
  },
690
- "description": "Id of the element used as label of the component to screen reader users.",
716
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
691
717
  "fieldName": "accessibleNameRef",
692
718
  "inheritedFrom": {
693
719
  "name": "FieldMixin",
@@ -860,6 +886,20 @@
860
886
  "description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The radio button elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
861
887
  "name": "RadioGroup",
862
888
  "members": [
889
+ {
890
+ "kind": "field",
891
+ "name": "accessibleDescriptionRef",
892
+ "privacy": "public",
893
+ "type": {
894
+ "text": "string"
895
+ },
896
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
897
+ "attribute": "accessible-description-ref",
898
+ "inheritedFrom": {
899
+ "name": "FieldMixin",
900
+ "package": "@vaadin/field-base/src/field-mixin.js"
901
+ }
902
+ },
863
903
  {
864
904
  "kind": "field",
865
905
  "name": "accessibleName",
@@ -867,7 +907,7 @@
867
907
  "type": {
868
908
  "text": "string"
869
909
  },
870
- "description": "String used to label the component to screen reader users.",
910
+ "description": "String used to label the component for screen reader users.",
871
911
  "attribute": "accessible-name",
872
912
  "inheritedFrom": {
873
913
  "name": "FieldMixin",
@@ -881,7 +921,7 @@
881
921
  "type": {
882
922
  "text": "string"
883
923
  },
884
- "description": "Id of the element used as label of the component to screen reader users.",
924
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
885
925
  "attribute": "accessible-name-ref",
886
926
  "inheritedFrom": {
887
927
  "name": "FieldMixin",
@@ -1081,12 +1121,24 @@
1081
1121
  }
1082
1122
  ],
1083
1123
  "attributes": [
1124
+ {
1125
+ "name": "accessible-description-ref",
1126
+ "type": {
1127
+ "text": "string"
1128
+ },
1129
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
1130
+ "fieldName": "accessibleDescriptionRef",
1131
+ "inheritedFrom": {
1132
+ "name": "FieldMixin",
1133
+ "package": "@vaadin/field-base/src/field-mixin.js"
1134
+ }
1135
+ },
1084
1136
  {
1085
1137
  "name": "accessible-name",
1086
1138
  "type": {
1087
1139
  "text": "string"
1088
1140
  },
1089
- "description": "String used to label the component to screen reader users.",
1141
+ "description": "String used to label the component for screen reader users.",
1090
1142
  "fieldName": "accessibleName",
1091
1143
  "inheritedFrom": {
1092
1144
  "name": "FieldMixin",
@@ -1098,7 +1150,7 @@
1098
1150
  "type": {
1099
1151
  "text": "string"
1100
1152
  },
1101
- "description": "Id of the element used as label of the component to screen reader users.",
1153
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
1102
1154
  "fieldName": "accessibleNameRef",
1103
1155
  "inheritedFrom": {
1104
1156
  "name": "FieldMixin",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/radio-group",
3
- "version": "25.3.0-alpha8",
3
+ "version": "25.3.0-alpha9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,18 +37,18 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/a11y-base": "25.3.0-alpha8",
41
- "@vaadin/component-base": "25.3.0-alpha8",
42
- "@vaadin/field-base": "25.3.0-alpha8",
43
- "@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
40
+ "@vaadin/a11y-base": "25.3.0-alpha9",
41
+ "@vaadin/component-base": "25.3.0-alpha9",
42
+ "@vaadin/field-base": "25.3.0-alpha9",
43
+ "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/aura": "25.3.0-alpha8",
48
- "@vaadin/chai-plugins": "25.3.0-alpha8",
49
- "@vaadin/test-runner-commands": "25.3.0-alpha8",
47
+ "@vaadin/aura": "25.3.0-alpha9",
48
+ "@vaadin/chai-plugins": "25.3.0-alpha9",
49
+ "@vaadin/test-runner-commands": "25.3.0-alpha9",
50
50
  "@vaadin/testing-helpers": "^2.0.0",
51
- "@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
51
+ "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
52
52
  "sinon": "^22.0.0"
53
53
  },
54
54
  "customElements": "custom-elements.json",
@@ -56,5 +56,5 @@
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
59
+ "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
60
60
  }
package/src/vaadin-radio-group-mixin.js CHANGED
@@ -6,6 +6,7 @@
6
6
  import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
7
7
  import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
8
8
  import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
9
+ import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
9
10
  import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
10
11
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
11
12
  import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -137,6 +138,15 @@ export const RadioGroupMixin = (superclass) =>
137
138
  this.addController(this._tooltipController);
138
139
  }
139
140
 
141
+ /** @protected */
142
+ updated(props) {
143
+ super.updated(props);
144
+
145
+ if (props.has('invalid')) {
146
+ setOrRemoveAttribute(this, 'aria-invalid', this.invalid);
147
+ }
148
+ }
149
+
140
150
  /**
141
151
  * @param {!Array<!Node>} nodes
142
152
  * @return {!Array<!RadioButton>}
@@ -173,23 +183,6 @@ export const RadioGroupMixin = (superclass) =>
173
183
  }
174
184
  }
175
185
 
176
- /**
177
- * Override an observer from `FieldMixin`.
178
- *
179
- * @param {boolean} invalid
180
- * @protected
181
- * @override
182
- */
183
- _invalidChanged(invalid) {
184
- super._invalidChanged(invalid);
185
-
186
- if (invalid) {
187
- this.setAttribute('aria-invalid', 'true');
188
- } else {
189
- this.removeAttribute('aria-invalid');
190
- }
191
- }
192
-
193
186
  /** @private */
194
187
  __nameChanged(name) {
195
188
  this.__radioButtons.forEach((radioButton) => {
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/radio-group",
4
- "version": "25.3.0-alpha8",
4
+ "version": "25.3.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -143,9 +143,18 @@
143
143
  "name": "vaadin-radio-group",
144
144
  "description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The radio button elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
145
145
  "attributes": [
146
+ {
147
+ "name": "accessible-description-ref",
148
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
149
+ "value": {
150
+ "type": [
151
+ "string"
152
+ ]
153
+ }
154
+ },
146
155
  {
147
156
  "name": "accessible-name",
148
- "description": "String used to label the component to screen reader users.",
157
+ "description": "String used to label the component for screen reader users.",
149
158
  "value": {
150
159
  "type": [
151
160
  "string"
@@ -154,7 +163,7 @@
154
163
  },
155
164
  {
156
165
  "name": "accessible-name-ref",
157
- "description": "Id of the element used as label of the component to screen reader users.",
166
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
158
167
  "value": {
159
168
  "type": [
160
169
  "string"
@@ -263,9 +272,18 @@
263
272
  ],
264
273
  "js": {
265
274
  "properties": [
275
+ {
276
+ "name": "accessibleDescriptionRef",
277
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
278
+ "value": {
279
+ "type": [
280
+ "string"
281
+ ]
282
+ }
283
+ },
266
284
  {
267
285
  "name": "accessibleName",
268
- "description": "String used to label the component to screen reader users.",
286
+ "description": "String used to label the component for screen reader users.",
269
287
  "value": {
270
288
  "type": [
271
289
  "string"
@@ -274,7 +292,7 @@
274
292
  },
275
293
  {
276
294
  "name": "accessibleNameRef",
277
- "description": "Id of the element used as label of the component to screen reader users.",
295
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
278
296
  "value": {
279
297
  "type": [
280
298
  "string"
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/radio-group",
4
- "version": "25.3.0-alpha8",
4
+ "version": "25.3.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -75,16 +75,23 @@
75
75
  "description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The radio button elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
76
76
  "extension": true,
77
77
  "attributes": [
78
+ {
79
+ "name": ".accessibleDescriptionRef",
80
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
78
85
  {
79
86
  "name": ".accessibleName",
80
- "description": "String used to label the component to screen reader users.",
87
+ "description": "String used to label the component for screen reader users.",
81
88
  "value": {
82
89
  "kind": "expression"
83
90
  }
84
91
  },
85
92
  {
86
93
  "name": ".accessibleNameRef",
87
- "description": "Id of the element used as label of the component to screen reader users.",
94
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
88
95
  "value": {
89
96
  "kind": "expression"
90
97
  }