@momentum-design/components 0.133.7 → 0.133.8
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.
- package/dist/browser/index.js +2 -2
- package/dist/browser/index.js.map +2 -2
- package/dist/components/formfieldgroup/formfieldgroup.component.js +8 -1
- package/dist/components/radiogroup/radiogroup.component.d.ts +1 -0
- package/dist/components/radiogroup/radiogroup.component.js +7 -1
- package/dist/custom-elements.json +2 -1
- package/package.json +1 -1
|
@@ -67,13 +67,20 @@ class FormfieldGroup extends FormfieldWrapper {
|
|
|
67
67
|
this.disabled = undefined;
|
|
68
68
|
this.role = this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP;
|
|
69
69
|
this.ariaDescription = (_a = this.helpText) !== null && _a !== void 0 ? _a : '';
|
|
70
|
-
|
|
70
|
+
// Add aria-label if not provided by the consumer, to make it accessible.
|
|
71
|
+
// It will use the label property for the aria-label if aria-label is not provided.
|
|
72
|
+
if (!this.hasAttribute('aria-label')) {
|
|
73
|
+
this.setAttribute('aria-label', this.label || '');
|
|
74
|
+
}
|
|
71
75
|
}
|
|
72
76
|
update(changedProperties) {
|
|
73
77
|
super.update(changedProperties);
|
|
74
78
|
if (changedProperties.has('label') && !this.ariaLabel) {
|
|
75
79
|
this.ariaLabel = this.label || '';
|
|
76
80
|
}
|
|
81
|
+
if (changedProperties.has('helpText') && !this.ariaDescription) {
|
|
82
|
+
this.ariaDescription = this.helpText || '';
|
|
83
|
+
}
|
|
77
84
|
}
|
|
78
85
|
render() {
|
|
79
86
|
return html `
|
|
@@ -16,6 +16,7 @@ declare class RadioGroup extends FormfieldGroup {
|
|
|
16
16
|
*/
|
|
17
17
|
name: string;
|
|
18
18
|
constructor();
|
|
19
|
+
connectedCallback(): void;
|
|
19
20
|
/**
|
|
20
21
|
* Using name property to group the radio buttons together.
|
|
21
22
|
* If the name is not set, it will be set to the name of the radio group.
|
|
@@ -32,6 +32,12 @@ class RadioGroup extends FormfieldGroup {
|
|
|
32
32
|
// This is used to set the role of the component as `radiogroup`.
|
|
33
33
|
this.isRadio = true;
|
|
34
34
|
}
|
|
35
|
+
connectedCallback() {
|
|
36
|
+
super.connectedCallback();
|
|
37
|
+
// toggletipPlacement and toggletipStrategy are set to undefined as they are not used by radiogroup.
|
|
38
|
+
this.toggletipPlacement = undefined;
|
|
39
|
+
this.toggletipStrategy = undefined;
|
|
40
|
+
}
|
|
35
41
|
/**
|
|
36
42
|
* Using name property to group the radio buttons together.
|
|
37
43
|
* If the name is not set, it will be set to the name of the radio group.
|
|
@@ -51,7 +57,7 @@ class RadioGroup extends FormfieldGroup {
|
|
|
51
57
|
}
|
|
52
58
|
RadioGroup.styles = [...FormfieldGroup.styles];
|
|
53
59
|
__decorate([
|
|
54
|
-
property({ type: String }),
|
|
60
|
+
property({ type: String, reflect: true }),
|
|
55
61
|
__metadata("design:type", Object)
|
|
56
62
|
], RadioGroup.prototype, "name", void 0);
|
|
57
63
|
export default RadioGroup;
|
|
@@ -37321,7 +37321,8 @@
|
|
|
37321
37321
|
},
|
|
37322
37322
|
"default": "''",
|
|
37323
37323
|
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
|
37324
|
-
"attribute": "name"
|
|
37324
|
+
"attribute": "name",
|
|
37325
|
+
"reflects": true
|
|
37325
37326
|
},
|
|
37326
37327
|
{
|
|
37327
37328
|
"kind": "field",
|