@aurodesignsystem-dev/auro-formkit 0.0.0-pr741.0 → 0.0.0-pr750.0

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 (92) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.html +16 -10
  4. package/components/checkbox/demo/api.min.js +11 -11
  5. package/components/checkbox/demo/index.html +16 -10
  6. package/components/checkbox/demo/index.min.js +11 -11
  7. package/components/checkbox/demo/readme.html +16 -9
  8. package/components/checkbox/dist/index.js +11 -11
  9. package/components/checkbox/dist/registered.js +11 -11
  10. package/components/combobox/demo/api.html +16 -10
  11. package/components/combobox/demo/api.md +12 -6
  12. package/components/combobox/demo/api.min.js +411 -103
  13. package/components/combobox/demo/index.html +16 -10
  14. package/components/combobox/demo/index.min.js +411 -103
  15. package/components/combobox/demo/readme.html +16 -9
  16. package/components/combobox/dist/index.js +374 -91
  17. package/components/combobox/dist/registered.js +374 -91
  18. package/components/counter/demo/api.html +16 -10
  19. package/components/counter/demo/api.md +140 -7
  20. package/components/counter/demo/api.min.js +1145 -987
  21. package/components/counter/demo/index.html +16 -10
  22. package/components/counter/demo/index.md +82 -0
  23. package/components/counter/demo/index.min.js +1145 -987
  24. package/components/counter/demo/readme.html +16 -9
  25. package/components/counter/dist/auro-counter-group.d.ts +64 -23
  26. package/components/counter/dist/auro-counter.d.ts +10 -0
  27. package/components/counter/dist/index.js +1145 -987
  28. package/components/counter/dist/registered.js +1145 -987
  29. package/components/datepicker/demo/api.html +16 -10
  30. package/components/datepicker/demo/api.min.js +374 -91
  31. package/components/datepicker/demo/index.html +16 -10
  32. package/components/datepicker/demo/index.min.js +374 -91
  33. package/components/datepicker/demo/readme.html +16 -9
  34. package/components/datepicker/dist/auro-datepicker.d.ts +6 -0
  35. package/components/datepicker/dist/index.js +374 -91
  36. package/components/datepicker/dist/registered.js +374 -91
  37. package/components/dropdown/demo/api.html +16 -10
  38. package/components/dropdown/demo/api.md +77 -267
  39. package/components/dropdown/demo/api.min.js +331 -64
  40. package/components/dropdown/demo/index.html +16 -10
  41. package/components/dropdown/demo/index.md +45 -363
  42. package/components/dropdown/demo/index.min.js +331 -64
  43. package/components/dropdown/demo/readme.html +16 -9
  44. package/components/dropdown/dist/auro-dropdown.d.ts +35 -67
  45. package/components/dropdown/dist/index.js +331 -64
  46. package/components/dropdown/dist/registered.js +331 -64
  47. package/components/form/demo/api.html +16 -9
  48. package/components/form/demo/autocomplete.html +19 -3
  49. package/components/form/demo/index.html +16 -9
  50. package/components/form/demo/readme.html +16 -9
  51. package/components/form/demo/working.html +19 -13
  52. package/components/helptext/dist/index.js +1 -1
  53. package/components/helptext/dist/registered.js +1 -1
  54. package/components/input/demo/api.html +16 -10
  55. package/components/input/demo/api.md +1 -1
  56. package/components/input/demo/api.min.js +14 -14
  57. package/components/input/demo/index.html +16 -10
  58. package/components/input/demo/index.min.js +14 -14
  59. package/components/input/demo/readme.html +16 -9
  60. package/components/input/dist/base-input.d.ts +1 -1
  61. package/components/input/dist/index.js +14 -14
  62. package/components/input/dist/registered.js +14 -14
  63. package/components/menu/demo/api.html +16 -32
  64. package/components/menu/demo/api.md +1 -1
  65. package/components/menu/demo/api.min.js +37 -12
  66. package/components/menu/demo/index.html +16 -10
  67. package/components/menu/demo/index.min.js +37 -12
  68. package/components/menu/demo/readme.html +16 -9
  69. package/components/menu/dist/auro-menu.d.ts +13 -2
  70. package/components/menu/dist/index.js +37 -12
  71. package/components/menu/dist/registered.js +37 -12
  72. package/components/radio/demo/api.html +16 -10
  73. package/components/radio/demo/api.md +0 -1
  74. package/components/radio/demo/api.min.js +61 -76
  75. package/components/radio/demo/index.html +16 -10
  76. package/components/radio/demo/index.min.js +61 -76
  77. package/components/radio/demo/readme.html +16 -9
  78. package/components/radio/dist/auro-radio.d.ts +8 -11
  79. package/components/radio/dist/index.js +61 -76
  80. package/components/radio/dist/registered.js +61 -76
  81. package/components/select/demo/api.html +16 -10
  82. package/components/select/demo/api.js +0 -2
  83. package/components/select/demo/api.md +53 -51
  84. package/components/select/demo/api.min.js +491 -326
  85. package/components/select/demo/index.html +16 -11
  86. package/components/select/demo/index.md +6 -158
  87. package/components/select/demo/index.min.js +491 -314
  88. package/components/select/demo/readme.html +16 -9
  89. package/components/select/dist/auro-select.d.ts +33 -8
  90. package/components/select/dist/index.js +454 -302
  91. package/components/select/dist/registered.js +454 -302
  92. package/package.json +26 -25
package/components/radio/demo/readme.html CHANGED
@@ -16,17 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-radio custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-radio</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
package/components/radio/dist/auro-radio.d.ts CHANGED
@@ -50,10 +50,6 @@ export class AuroRadio extends LitElement {
50
50
  value: {
51
51
  type: StringConstructor;
52
52
  };
53
- tabIndex: {
54
- type: NumberConstructor;
55
- reflect: boolean;
56
- };
57
53
  /**
58
54
  * Whether or not the radio button has been touched by the user.
59
55
  * @private
@@ -72,6 +68,14 @@ export class AuroRadio extends LitElement {
72
68
  reflect: boolean;
73
69
  attribute: boolean;
74
70
  };
71
+ /**
72
+ * Do not add to api doc since changing of this can easily break a11y.
73
+ * @private
74
+ */
75
+ role: {
76
+ type: StringConstructor;
77
+ reflect: boolean;
78
+ };
75
79
  };
76
80
  /**
77
81
  * This will register this element with the browser.
@@ -126,13 +130,6 @@ export class AuroRadio extends LitElement {
126
130
  */
127
131
  reset(): void;
128
132
  updated(changedProperties: any): void;
129
- /**
130
- * Method for handling content when it is invalid accessibility wise.
131
- * @private
132
- * @param {Boolean} error - The element's error attribute.
133
- * @returns {void}
134
- */
135
- private invalid;
136
133
  /**
137
134
  * Method for handling passing the required status to aria.
138
135
  * @private
package/components/radio/dist/index.js CHANGED
@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
81
81
  }
82
82
  };
83
83
 
84
+ /* eslint-disable max-lines */
84
85
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
85
86
  // See LICENSE in the project root for license information.
86
87
 
@@ -115,8 +116,8 @@ class AuroRadio extends LitElement {
115
116
  this.required = false;
116
117
  this.error = false;
117
118
  this.onDark = false;
118
- this.tabIndex = -1;
119
119
  this.touched = false;
120
+ this.role = 'radio';
120
121
 
121
122
  /**
122
123
  * @private
@@ -158,10 +159,6 @@ class AuroRadio extends LitElement {
158
159
  label: { type: String },
159
160
  name: { type: String },
160
161
  value: { type: String },
161
- tabIndex: {
162
- type: Number,
163
- reflect: true
164
- },
165
162
 
166
163
  /**
167
164
  * Whether or not the radio button has been touched by the user.
@@ -181,6 +178,15 @@ class AuroRadio extends LitElement {
181
178
  type: String,
182
179
  reflect: false,
183
180
  attribute: false
181
+ },
182
+
183
+ /**
184
+ * Do not add to api doc since changing of this can easily break a11y.
185
+ * @private
186
+ */
187
+ role: {
188
+ type: String,
189
+ reflect: true
184
190
  }
185
191
  };
186
192
  }
@@ -206,7 +212,6 @@ class AuroRadio extends LitElement {
206
212
  handleChange(event) {
207
213
  this.checked = event.target.checked;
208
214
  const customEvent = new CustomEvent(event.type, event);
209
-
210
215
  this.dispatchEvent(customEvent);
211
216
  }
212
217
 
@@ -265,7 +270,27 @@ class AuroRadio extends LitElement {
265
270
  }
266
271
 
267
272
  updated(changedProperties) {
273
+ if (changedProperties.has('error') || changedProperties.has('validity')) {
274
+ this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
275
+ }
276
+
277
+ if (changedProperties.has('required')) {
278
+ this.setAttribute('aria-required', this.isRequired(this.required));
279
+ }
280
+
281
+ if (changedProperties.has('disabled')) {
282
+ if (this.disabled) {
283
+ this.setAttribute('aria-disabled', '');
284
+ } else {
285
+ this.removeAttribute('aria-disabled');
286
+ }
287
+ }
288
+
268
289
  if (changedProperties.has('checked')) {
290
+ this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
291
+ // eslint-disable-next-line no-magic-numbers
292
+ this.setAttribute('tabindex', this.checked ? 0 : -1);
293
+
269
294
  this.dispatchEvent(new CustomEvent('resetRadio', {
270
295
  bubbles: true,
271
296
  composed: true
@@ -280,20 +305,6 @@ class AuroRadio extends LitElement {
280
305
  }
281
306
  }
282
307
 
283
- /**
284
- * Method for handling content when it is invalid accessibility wise.
285
- * @private
286
- * @param {Boolean} error - The element's error attribute.
287
- * @returns {void}
288
- */
289
- invalid(error) {
290
- if (error) {
291
- return 'true';
292
- }
293
-
294
- return 'false';
295
- }
296
-
297
308
  /**
298
309
  * Method for handling passing the required status to aria.
299
310
  * @private
@@ -312,6 +323,7 @@ class AuroRadio extends LitElement {
312
323
  // Add the tag name as an attribute if it is different than the component name
313
324
  this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
314
325
 
326
+ this.addEventListener('focus', this.handleFocus);
315
327
  this.addEventListener('blur', this.handleBlur);
316
328
 
317
329
  this.input = this.shadowRoot.querySelector('input');
@@ -336,27 +348,21 @@ class AuroRadio extends LitElement {
336
348
  return html`
337
349
  <div class="ods-inputGroup rdoGroup" part="radio">
338
350
  <input
339
- class="util_displayHiddenVisually ods-inputOption rdo--input"
351
+ class="util_displayHidden ods-inputOption rdo--input"
340
352
  part="radio-input"
341
- @focus="${this.handleFocus}"
342
353
  @input="${this.handleInput}"
343
354
  @change="${this.handleChange}"
344
355
  ?disabled="${this.disabled}"
345
- aria-invalid="${this.invalid(this.error)}"
346
- aria-required="${this.isRequired(this.required)}"
347
356
  .checked="${this.checked}"
348
357
  id="${this.inputId}"
349
358
  name="${ifDefined(this.name)}"
350
359
  type="radio"
351
360
  .value="${this.value}"
361
+ aria-hidden="true"
352
362
  tabindex="-1"
353
363
  />
354
364
 
355
- <label
356
- for="${this.inputId}"
357
- class="${classMap(labelClasses)}"
358
- part="radio-label"
359
- >
365
+ <label for="${this.inputId}" class="${classMap(labelClasses)}" part="radio-label">
360
366
  <slot>${this.label}</slot>
361
367
  </label>
362
368
  </div>
@@ -365,7 +371,7 @@ class AuroRadio extends LitElement {
365
371
  }
366
372
  }
367
373
 
368
- var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
374
+ var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
369
375
 
370
376
  var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
371
377
 
@@ -845,19 +851,19 @@ class AuroFormValidation {
845
851
  {
846
852
  check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
847
853
  validity: 'tooShort',
848
- message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
854
+ message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
849
855
  },
850
856
  {
851
857
  check: (e) => e.value?.length > e.maxLength,
852
858
  validity: 'tooLong',
853
- message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
859
+ message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
854
860
  }
855
861
  ],
856
862
  pattern: [
857
863
  {
858
864
  check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
859
865
  validity: 'patternMismatch',
860
- message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
866
+ message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
861
867
  }
862
868
  ]
863
869
  },
@@ -1052,10 +1058,10 @@ class AuroFormValidation {
1052
1058
  if (!hasValue && elem.required && elem.touched) {
1053
1059
  elem.validity = 'valueMissing';
1054
1060
  elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
1055
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1061
+ } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1056
1062
  this.validateType(elem);
1057
1063
  this.validateElementAttributes(elem);
1058
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
1064
+ } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
1059
1065
  this.validateElementAttributes(elem);
1060
1066
  }
1061
1067
  }
@@ -1188,7 +1194,7 @@ class AuroDependencyVersioning {
1188
1194
 
1189
1195
  var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
1190
1196
 
1191
- var styleCss = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
1197
+ var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
1192
1198
 
1193
1199
  var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
1194
1200
 
@@ -1669,15 +1675,6 @@ class AuroRadioGroup extends LitElement {
1669
1675
  if (this.items.length === 0) {
1670
1676
  this.handleItems();
1671
1677
  }
1672
-
1673
- // handle tab index
1674
- this.items.forEach((item) => {
1675
- item.tabIndex = -1;
1676
- });
1677
-
1678
- if (!this.disabled) {
1679
- this.items[this.index].tabIndex = 0;
1680
- }
1681
1678
  }
1682
1679
 
1683
1680
  /**
@@ -1721,10 +1718,7 @@ class AuroRadioGroup extends LitElement {
1721
1718
  const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
1722
1719
 
1723
1720
  this.index = index >= 0 ? index : nextEnabledIndex;
1724
-
1725
- if (this.index >= 0) {
1726
- this.items[this.index].tabIndex = 0;
1727
- }
1721
+ this.items[this.index].setAttribute('tabindex', 0);
1728
1722
  }
1729
1723
  }
1730
1724
 
@@ -1738,20 +1732,10 @@ class AuroRadioGroup extends LitElement {
1738
1732
  this.index = this.items.indexOf(event.target);
1739
1733
 
1740
1734
  this.items.forEach((item) => {
1741
- if (item === event.target) {
1742
- item.tabIndex = 0;
1743
- if (event.target.value) {
1744
- this.value = event.target.value;
1745
- }
1746
- } else {
1747
- const sdInput = item.shadowRoot.querySelector('input');
1748
-
1749
- sdInput.checked = false;
1750
- item.checked = false;
1751
- item.tabIndex = -1;
1752
- }
1735
+ item.checked = item === event.target;
1753
1736
  });
1754
1737
 
1738
+ this.value = event.target.value;
1755
1739
  this.optionSelected = event.target;
1756
1740
 
1757
1741
  this.validation.validate(this);
@@ -1764,7 +1748,7 @@ class AuroRadioGroup extends LitElement {
1764
1748
  * @returns {void}
1765
1749
  */
1766
1750
  selectItem(index) {
1767
- const sdItem = this.items[index].shadowRoot.querySelector('input');
1751
+ const sdItem = this.items[index];
1768
1752
 
1769
1753
  sdItem.click();
1770
1754
  sdItem.focus();
@@ -1783,17 +1767,18 @@ class AuroRadioGroup extends LitElement {
1783
1767
 
1784
1768
  for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
1785
1769
  currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
1786
- const sdItem = this.items[currIndex].shadowRoot.querySelector('input');
1787
-
1788
- if (this.disabled || this.items.every((item) => item.disabled === true)) {
1789
- sdItem.focus();
1790
- break;
1791
- }
1792
- if (!sdItem.disabled) {
1793
- sdItem.click();
1794
- sdItem.focus();
1795
- this.index = currIndex;
1796
- break;
1770
+ const sdItem = this.items[currIndex];
1771
+ if (sdItem) {
1772
+ if (this.disabled || this.items.every((item) => item.disabled === true)) {
1773
+ sdItem.focus();
1774
+ break;
1775
+ }
1776
+ if (!sdItem.disabled) {
1777
+ sdItem.click();
1778
+ sdItem.focus();
1779
+ this.index = currIndex;
1780
+ break;
1781
+ }
1797
1782
  }
1798
1783
  }
1799
1784
  }
@@ -1836,7 +1821,7 @@ class AuroRadioGroup extends LitElement {
1836
1821
  };
1837
1822
 
1838
1823
  return html$1`
1839
- <fieldset class="${classMap(groupClasses)}" part="radio-group">
1824
+ <fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
1840
1825
  <legend>
1841
1826
  <slot name="legend"></slot>
1842
1827
  ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1846,11 +1831,11 @@ class AuroRadioGroup extends LitElement {
1846
1831
 
1847
1832
  ${!this.validity || this.validity === undefined || this.validity === 'valid'
1848
1833
  ? html$1`
1849
- <${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
1834
+ <${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
1850
1835
  <slot name="helpText"></slot>
1851
1836
  </${this.helpTextTag}>`
1852
1837
  : html$1`
1853
- <${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
1838
+ <${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
1854
1839
  ${this.errorMessage}
1855
1840
  </${this.helpTextTag}>`
1856
1841
  }
package/components/radio/dist/registered.js CHANGED
@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
81
81
  }
82
82
  };
83
83
 
84
+ /* eslint-disable max-lines */
84
85
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
85
86
  // See LICENSE in the project root for license information.
86
87
 
@@ -115,8 +116,8 @@ class AuroRadio extends LitElement {
115
116
  this.required = false;
116
117
  this.error = false;
117
118
  this.onDark = false;
118
- this.tabIndex = -1;
119
119
  this.touched = false;
120
+ this.role = 'radio';
120
121
 
121
122
  /**
122
123
  * @private
@@ -158,10 +159,6 @@ class AuroRadio extends LitElement {
158
159
  label: { type: String },
159
160
  name: { type: String },
160
161
  value: { type: String },
161
- tabIndex: {
162
- type: Number,
163
- reflect: true
164
- },
165
162
 
166
163
  /**
167
164
  * Whether or not the radio button has been touched by the user.
@@ -181,6 +178,15 @@ class AuroRadio extends LitElement {
181
178
  type: String,
182
179
  reflect: false,
183
180
  attribute: false
181
+ },
182
+
183
+ /**
184
+ * Do not add to api doc since changing of this can easily break a11y.
185
+ * @private
186
+ */
187
+ role: {
188
+ type: String,
189
+ reflect: true
184
190
  }
185
191
  };
186
192
  }
@@ -206,7 +212,6 @@ class AuroRadio extends LitElement {
206
212
  handleChange(event) {
207
213
  this.checked = event.target.checked;
208
214
  const customEvent = new CustomEvent(event.type, event);
209
-
210
215
  this.dispatchEvent(customEvent);
211
216
  }
212
217
 
@@ -265,7 +270,27 @@ class AuroRadio extends LitElement {
265
270
  }
266
271
 
267
272
  updated(changedProperties) {
273
+ if (changedProperties.has('error') || changedProperties.has('validity')) {
274
+ this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
275
+ }
276
+
277
+ if (changedProperties.has('required')) {
278
+ this.setAttribute('aria-required', this.isRequired(this.required));
279
+ }
280
+
281
+ if (changedProperties.has('disabled')) {
282
+ if (this.disabled) {
283
+ this.setAttribute('aria-disabled', '');
284
+ } else {
285
+ this.removeAttribute('aria-disabled');
286
+ }
287
+ }
288
+
268
289
  if (changedProperties.has('checked')) {
290
+ this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
291
+ // eslint-disable-next-line no-magic-numbers
292
+ this.setAttribute('tabindex', this.checked ? 0 : -1);
293
+
269
294
  this.dispatchEvent(new CustomEvent('resetRadio', {
270
295
  bubbles: true,
271
296
  composed: true
@@ -280,20 +305,6 @@ class AuroRadio extends LitElement {
280
305
  }
281
306
  }
282
307
 
283
- /**
284
- * Method for handling content when it is invalid accessibility wise.
285
- * @private
286
- * @param {Boolean} error - The element's error attribute.
287
- * @returns {void}
288
- */
289
- invalid(error) {
290
- if (error) {
291
- return 'true';
292
- }
293
-
294
- return 'false';
295
- }
296
-
297
308
  /**
298
309
  * Method for handling passing the required status to aria.
299
310
  * @private
@@ -312,6 +323,7 @@ class AuroRadio extends LitElement {
312
323
  // Add the tag name as an attribute if it is different than the component name
313
324
  this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
314
325
 
326
+ this.addEventListener('focus', this.handleFocus);
315
327
  this.addEventListener('blur', this.handleBlur);
316
328
 
317
329
  this.input = this.shadowRoot.querySelector('input');
@@ -336,27 +348,21 @@ class AuroRadio extends LitElement {
336
348
  return html`
337
349
  <div class="ods-inputGroup rdoGroup" part="radio">
338
350
  <input
339
- class="util_displayHiddenVisually ods-inputOption rdo--input"
351
+ class="util_displayHidden ods-inputOption rdo--input"
340
352
  part="radio-input"
341
- @focus="${this.handleFocus}"
342
353
  @input="${this.handleInput}"
343
354
  @change="${this.handleChange}"
344
355
  ?disabled="${this.disabled}"
345
- aria-invalid="${this.invalid(this.error)}"
346
- aria-required="${this.isRequired(this.required)}"
347
356
  .checked="${this.checked}"
348
357
  id="${this.inputId}"
349
358
  name="${ifDefined(this.name)}"
350
359
  type="radio"
351
360
  .value="${this.value}"
361
+ aria-hidden="true"
352
362
  tabindex="-1"
353
363
  />
354
364
 
355
- <label
356
- for="${this.inputId}"
357
- class="${classMap(labelClasses)}"
358
- part="radio-label"
359
- >
365
+ <label for="${this.inputId}" class="${classMap(labelClasses)}" part="radio-label">
360
366
  <slot>${this.label}</slot>
361
367
  </label>
362
368
  </div>
@@ -365,7 +371,7 @@ class AuroRadio extends LitElement {
365
371
  }
366
372
  }
367
373
 
368
- var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
374
+ var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
369
375
 
370
376
  var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
371
377
 
@@ -845,19 +851,19 @@ class AuroFormValidation {
845
851
  {
846
852
  check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
847
853
  validity: 'tooShort',
848
- message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
854
+ message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
849
855
  },
850
856
  {
851
857
  check: (e) => e.value?.length > e.maxLength,
852
858
  validity: 'tooLong',
853
- message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
859
+ message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
854
860
  }
855
861
  ],
856
862
  pattern: [
857
863
  {
858
864
  check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
859
865
  validity: 'patternMismatch',
860
- message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
866
+ message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
861
867
  }
862
868
  ]
863
869
  },
@@ -1052,10 +1058,10 @@ class AuroFormValidation {
1052
1058
  if (!hasValue && elem.required && elem.touched) {
1053
1059
  elem.validity = 'valueMissing';
1054
1060
  elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
1055
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1061
+ } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1056
1062
  this.validateType(elem);
1057
1063
  this.validateElementAttributes(elem);
1058
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
1064
+ } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
1059
1065
  this.validateElementAttributes(elem);
1060
1066
  }
1061
1067
  }
@@ -1188,7 +1194,7 @@ class AuroDependencyVersioning {
1188
1194
 
1189
1195
  var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
1190
1196
 
1191
- var styleCss = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
1197
+ var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
1192
1198
 
1193
1199
  var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
1194
1200
 
@@ -1669,15 +1675,6 @@ class AuroRadioGroup extends LitElement {
1669
1675
  if (this.items.length === 0) {
1670
1676
  this.handleItems();
1671
1677
  }
1672
-
1673
- // handle tab index
1674
- this.items.forEach((item) => {
1675
- item.tabIndex = -1;
1676
- });
1677
-
1678
- if (!this.disabled) {
1679
- this.items[this.index].tabIndex = 0;
1680
- }
1681
1678
  }
1682
1679
 
1683
1680
  /**
@@ -1721,10 +1718,7 @@ class AuroRadioGroup extends LitElement {
1721
1718
  const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
1722
1719
 
1723
1720
  this.index = index >= 0 ? index : nextEnabledIndex;
1724
-
1725
- if (this.index >= 0) {
1726
- this.items[this.index].tabIndex = 0;
1727
- }
1721
+ this.items[this.index].setAttribute('tabindex', 0);
1728
1722
  }
1729
1723
  }
1730
1724
 
@@ -1738,20 +1732,10 @@ class AuroRadioGroup extends LitElement {
1738
1732
  this.index = this.items.indexOf(event.target);
1739
1733
 
1740
1734
  this.items.forEach((item) => {
1741
- if (item === event.target) {
1742
- item.tabIndex = 0;
1743
- if (event.target.value) {
1744
- this.value = event.target.value;
1745
- }
1746
- } else {
1747
- const sdInput = item.shadowRoot.querySelector('input');
1748
-
1749
- sdInput.checked = false;
1750
- item.checked = false;
1751
- item.tabIndex = -1;
1752
- }
1735
+ item.checked = item === event.target;
1753
1736
  });
1754
1737
 
1738
+ this.value = event.target.value;
1755
1739
  this.optionSelected = event.target;
1756
1740
 
1757
1741
  this.validation.validate(this);
@@ -1764,7 +1748,7 @@ class AuroRadioGroup extends LitElement {
1764
1748
  * @returns {void}
1765
1749
  */
1766
1750
  selectItem(index) {
1767
- const sdItem = this.items[index].shadowRoot.querySelector('input');
1751
+ const sdItem = this.items[index];
1768
1752
 
1769
1753
  sdItem.click();
1770
1754
  sdItem.focus();
@@ -1783,17 +1767,18 @@ class AuroRadioGroup extends LitElement {
1783
1767
 
1784
1768
  for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
1785
1769
  currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
1786
- const sdItem = this.items[currIndex].shadowRoot.querySelector('input');
1787
-
1788
- if (this.disabled || this.items.every((item) => item.disabled === true)) {
1789
- sdItem.focus();
1790
- break;
1791
- }
1792
- if (!sdItem.disabled) {
1793
- sdItem.click();
1794
- sdItem.focus();
1795
- this.index = currIndex;
1796
- break;
1770
+ const sdItem = this.items[currIndex];
1771
+ if (sdItem) {
1772
+ if (this.disabled || this.items.every((item) => item.disabled === true)) {
1773
+ sdItem.focus();
1774
+ break;
1775
+ }
1776
+ if (!sdItem.disabled) {
1777
+ sdItem.click();
1778
+ sdItem.focus();
1779
+ this.index = currIndex;
1780
+ break;
1781
+ }
1797
1782
  }
1798
1783
  }
1799
1784
  }
@@ -1836,7 +1821,7 @@ class AuroRadioGroup extends LitElement {
1836
1821
  };
1837
1822
 
1838
1823
  return html$1`
1839
- <fieldset class="${classMap(groupClasses)}" part="radio-group">
1824
+ <fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
1840
1825
  <legend>
1841
1826
  <slot name="legend"></slot>
1842
1827
  ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1846,11 +1831,11 @@ class AuroRadioGroup extends LitElement {
1846
1831
 
1847
1832
  ${!this.validity || this.validity === undefined || this.validity === 'valid'
1848
1833
  ? html$1`
1849
- <${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
1834
+ <${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
1850
1835
  <slot name="helpText"></slot>
1851
1836
  </${this.helpTextTag}>`
1852
1837
  : html$1`
1853
- <${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
1838
+ <${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
1854
1839
  ${this.errorMessage}
1855
1840
  </${this.helpTextTag}>`
1856
1841
  }