@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.4 → 0.0.0-pr624.40

package/components/radio/demo/api.min.js

@@ -146,6 +146,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
+/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -180,8 +181,8 @@ class AuroRadio extends i$2 {
     this.required = false;
     this.error = false;
     this.onDark = false;
-    this.tabIndex = -1;
     this.touched = false;
+    this.role = 'radio';
 
     /**
      * @private
@@ -223,10 +224,6 @@ class AuroRadio extends i$2 {
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
-      tabIndex: {
-        type: Number,
-        reflect: true
-      },
 
       /**
        * Whether or not the radio button has been touched by the user.
@@ -239,13 +236,22 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * @private
+       * not to add to api.md since changing of this can easily break a11y.
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -271,7 +277,6 @@ class AuroRadio extends i$2 {
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
-
     this.dispatchEvent(customEvent);
   }
 
@@ -330,7 +335,27 @@ class AuroRadio extends i$2 {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('error') || changedProperties.has('validity')) {
+      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('required')) {
+      this.setAttribute('aria-required', this.isRequired(this.required));
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', '');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+
     if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+      // eslint-disable-next-line no-magic-numbers
+      this.setAttribute('tabindex', this.checked ? 0 : -1);
+
       this.dispatchEvent(new CustomEvent('resetRadio', {
         bubbles: true,
         composed: true
@@ -345,20 +370,6 @@ class AuroRadio extends i$2 {
     }
   }
 
-  /**
-   * Method for handling content when it is invalid accessibility wise.
-   * @private
-   * @param {Boolean} error - The element's error attribute.
-   * @returns {void}
-   */
-  invalid(error) {
-    if (error) {
-      return 'true';
-    }
-
-    return 'false';
-  }
-
   /**
    * Method for handling passing the required status to aria.
    * @private
@@ -377,6 +388,7 @@ class AuroRadio extends i$2 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
 
+    this.addEventListener('focus', this.handleFocus);
     this.addEventListener('blur', this.handleBlur);
 
     this.input = this.shadowRoot.querySelector('input');
@@ -401,27 +413,21 @@ class AuroRadio extends i$2 {
     return x`
       <div class="ods-inputGroup rdoGroup" part="radio">
         <input
-          class="util_displayHiddenVisually ods-inputOption rdo--input"
+          class="util_displayHidden ods-inputOption rdo--input"
           part="radio-input"
-          @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          aria-invalid="${this.invalid(this.error)}"
-          aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
           id="${this.inputId}"
           name="${o$1(this.name)}"
           type="radio"
           .value="${this.value}"
+          aria-hidden="true"
           tabindex="-1"
         />
 
-        <label
-          for="${this.inputId}"
-          class="${e(labelClasses)}"
-          part="radio-label"
-        >
+        <label for="${this.inputId}" class="${e(labelClasses)}" part="radio-label">
           <slot>${this.label}</slot>
         </label>
       </div>
@@ -497,9 +503,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -691,7 +698,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {
@@ -1135,7 +1142,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -1255,9 +1264,9 @@ class AuroDependencyVersioning {
   }
 }
 
-var colorCss = i$5`: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-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = i$5`: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)}`;
 
-var styleCss = i$5`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-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}`;
+var styleCss = i$5`.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}`;
 
 var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -1483,7 +1492,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1639,7 +1648,7 @@ class AuroRadioGroup extends i$2 {
 
     this.optionSelected = event.target;
 
-    this.validation.validate(this);
+    this.validation.validate(this, this.optionSelected !== undefined);
   }
 
   /**
@@ -1738,15 +1747,6 @@ class AuroRadioGroup extends i$2 {
     if (this.items.length === 0) {
       this.handleItems();
     }
-
-    // handle tab index
-    this.items.forEach((item) => {
-      item.tabIndex = -1;
-    });
-
-    if (!this.disabled) {
-      this.items[this.index].tabIndex = 0;
-    }
   }
 
   /**
@@ -1790,10 +1790,7 @@ class AuroRadioGroup extends i$2 {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-
-      if (this.index >= 0) {
-        this.items[this.index].tabIndex = 0;
-      }
+      this.items[this.index].setAttribute('tabindex', 0);
     }
   }
 
@@ -1807,20 +1804,10 @@ class AuroRadioGroup extends i$2 {
     this.index = this.items.indexOf(event.target);
 
     this.items.forEach((item) => {
-      if (item === event.target) {
-        item.tabIndex = 0;
-        if (event.target.value) {
-          this.value = event.target.value;
-        }
-      } else {
-        const sdInput = item.shadowRoot.querySelector('input');
-
-        sdInput.checked = false;
-        item.checked = false;
-        item.tabIndex = -1;
-      }
+      item.checked = item === event.target;
     });
 
+    this.value = event.target.value;
     this.optionSelected = event.target;
 
     this.validation.validate(this);
@@ -1833,7 +1820,7 @@ class AuroRadioGroup extends i$2 {
    * @returns {void}
    */
   selectItem(index) {
-    const sdItem = this.items[index].shadowRoot.querySelector('input');
+    const sdItem = this.items[index];
 
     sdItem.click();
     sdItem.focus();
@@ -1852,17 +1839,18 @@ class AuroRadioGroup extends i$2 {
 
     for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
       currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
-      const sdItem = this.items[currIndex].shadowRoot.querySelector('input');
-
-      if (this.disabled || this.items.every((item) => item.disabled === true)) {
-        sdItem.focus();
-        break;
-      }
-      if (!sdItem.disabled) {
-        sdItem.click();
-        sdItem.focus();
-        this.index = currIndex;
-        break;
+      const sdItem = this.items[currIndex];
+      if (sdItem) {
+        if (this.disabled || this.items.every((item) => item.disabled === true)) {
+          sdItem.focus();
+          break;
+        }
+        if (!sdItem.disabled) {
+          sdItem.click();
+          sdItem.focus();
+          this.index = currIndex;
+          break;
+        }
       }
     }
   }
@@ -1905,11 +1893,11 @@ class AuroRadioGroup extends i$2 {
     };
 
     return u`
-      <fieldset class="${e(groupClasses)}" part="radio-group">
-        ${this.required
-        ? u`<legend><slot name="legend"></slot></legend>`
-        : u`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+      <fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 

package/components/radio/demo/index.min.js

@@ -121,6 +121,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
+/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -155,8 +156,8 @@ class AuroRadio extends i$2 {
     this.required = false;
     this.error = false;
     this.onDark = false;
-    this.tabIndex = -1;
     this.touched = false;
+    this.role = 'radio';
 
     /**
      * @private
@@ -198,10 +199,6 @@ class AuroRadio extends i$2 {
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
-      tabIndex: {
-        type: Number,
-        reflect: true
-      },
 
       /**
        * Whether or not the radio button has been touched by the user.
@@ -214,13 +211,22 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * @private
+       * not to add to api.md since changing of this can easily break a11y.
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -246,7 +252,6 @@ class AuroRadio extends i$2 {
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
-
     this.dispatchEvent(customEvent);
   }
 
@@ -305,7 +310,27 @@ class AuroRadio extends i$2 {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('error') || changedProperties.has('validity')) {
+      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('required')) {
+      this.setAttribute('aria-required', this.isRequired(this.required));
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', '');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+
     if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+      // eslint-disable-next-line no-magic-numbers
+      this.setAttribute('tabindex', this.checked ? 0 : -1);
+
       this.dispatchEvent(new CustomEvent('resetRadio', {
         bubbles: true,
         composed: true
@@ -320,20 +345,6 @@ class AuroRadio extends i$2 {
     }
   }
 
-  /**
-   * Method for handling content when it is invalid accessibility wise.
-   * @private
-   * @param {Boolean} error - The element's error attribute.
-   * @returns {void}
-   */
-  invalid(error) {
-    if (error) {
-      return 'true';
-    }
-
-    return 'false';
-  }
-
   /**
    * Method for handling passing the required status to aria.
    * @private
@@ -352,6 +363,7 @@ class AuroRadio extends i$2 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
 
+    this.addEventListener('focus', this.handleFocus);
     this.addEventListener('blur', this.handleBlur);
 
     this.input = this.shadowRoot.querySelector('input');
@@ -376,27 +388,21 @@ class AuroRadio extends i$2 {
     return x`
       <div class="ods-inputGroup rdoGroup" part="radio">
         <input
-          class="util_displayHiddenVisually ods-inputOption rdo--input"
+          class="util_displayHidden ods-inputOption rdo--input"
           part="radio-input"
-          @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          aria-invalid="${this.invalid(this.error)}"
-          aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
           id="${this.inputId}"
           name="${o$1(this.name)}"
           type="radio"
           .value="${this.value}"
+          aria-hidden="true"
           tabindex="-1"
         />
 
-        <label
-          for="${this.inputId}"
-          class="${e(labelClasses)}"
-          part="radio-label"
-        >
+        <label for="${this.inputId}" class="${e(labelClasses)}" part="radio-label">
           <slot>${this.label}</slot>
         </label>
       </div>
@@ -472,9 +478,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -666,7 +673,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {
@@ -1110,7 +1117,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -1230,9 +1239,9 @@ class AuroDependencyVersioning {
   }
 }
 
-var colorCss = i$5`: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-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = i$5`: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)}`;
 
-var styleCss = i$5`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-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}`;
+var styleCss = i$5`.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}`;
 
 var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -1458,7 +1467,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1614,7 +1623,7 @@ class AuroRadioGroup extends i$2 {
 
     this.optionSelected = event.target;
 
-    this.validation.validate(this);
+    this.validation.validate(this, this.optionSelected !== undefined);
   }
 
   /**
@@ -1713,15 +1722,6 @@ class AuroRadioGroup extends i$2 {
     if (this.items.length === 0) {
       this.handleItems();
     }
-
-    // handle tab index
-    this.items.forEach((item) => {
-      item.tabIndex = -1;
-    });
-
-    if (!this.disabled) {
-      this.items[this.index].tabIndex = 0;
-    }
   }
 
   /**
@@ -1765,10 +1765,7 @@ class AuroRadioGroup extends i$2 {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-
-      if (this.index >= 0) {
-        this.items[this.index].tabIndex = 0;
-      }
+      this.items[this.index].setAttribute('tabindex', 0);
     }
   }
 
@@ -1782,20 +1779,10 @@ class AuroRadioGroup extends i$2 {
     this.index = this.items.indexOf(event.target);
 
     this.items.forEach((item) => {
-      if (item === event.target) {
-        item.tabIndex = 0;
-        if (event.target.value) {
-          this.value = event.target.value;
-        }
-      } else {
-        const sdInput = item.shadowRoot.querySelector('input');
-
-        sdInput.checked = false;
-        item.checked = false;
-        item.tabIndex = -1;
-      }
+      item.checked = item === event.target;
     });
 
+    this.value = event.target.value;
     this.optionSelected = event.target;
 
     this.validation.validate(this);
@@ -1808,7 +1795,7 @@ class AuroRadioGroup extends i$2 {
    * @returns {void}
    */
   selectItem(index) {
-    const sdItem = this.items[index].shadowRoot.querySelector('input');
+    const sdItem = this.items[index];
 
     sdItem.click();
     sdItem.focus();
@@ -1827,17 +1814,18 @@ class AuroRadioGroup extends i$2 {
 
     for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
       currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
-      const sdItem = this.items[currIndex].shadowRoot.querySelector('input');
-
-      if (this.disabled || this.items.every((item) => item.disabled === true)) {
-        sdItem.focus();
-        break;
-      }
-      if (!sdItem.disabled) {
-        sdItem.click();
-        sdItem.focus();
-        this.index = currIndex;
-        break;
+      const sdItem = this.items[currIndex];
+      if (sdItem) {
+        if (this.disabled || this.items.every((item) => item.disabled === true)) {
+          sdItem.focus();
+          break;
+        }
+        if (!sdItem.disabled) {
+          sdItem.click();
+          sdItem.focus();
+          this.index = currIndex;
+          break;
+        }
       }
     }
   }
@@ -1880,11 +1868,11 @@ class AuroRadioGroup extends i$2 {
     };
 
     return u`
-      <fieldset class="${e(groupClasses)}" part="radio-group">
-        ${this.required
-        ? u`<legend><slot name="legend"></slot></legend>`
-        : u`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+      <fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 

package/components/radio/dist/auro-radio-group.d.ts

@@ -10,7 +10,7 @@
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.

package/components/radio/dist/auro-radio.d.ts

@@ -50,10 +50,6 @@ export class AuroRadio extends LitElement {
         value: {
             type: StringConstructor;
         };
-        tabIndex: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
         /**
          * Whether or not the radio button has been touched by the user.
          * @private
@@ -64,14 +60,22 @@ export class AuroRadio extends LitElement {
             attribute: boolean;
         };
         /**
+         * ID for input node.
          * @private
-         * id for input node
          */
         inputId: {
             type: StringConstructor;
             reflect: boolean;
             attribute: boolean;
         };
+        /**
+         * @private
+         * not to add to api.md since changing of this can easily break a11y.
+         */
+        role: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     /**
      * This will register this element with the browser.
@@ -126,13 +130,6 @@ export class AuroRadio extends LitElement {
      */
     reset(): void;
     updated(changedProperties: any): void;
-    /**
-     * Method for handling content when it is invalid accessibility wise.
-     * @private
-     * @param {Boolean} error - The element's error attribute.
-     * @returns {void}
-     */
-    private invalid;
     /**
      * Method for handling passing the required status to aria.
      * @private