feat: add reset functionality to radio

components/radio/apiExamples/resetState.html

@@ -0,0 +1,9 @@
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+
+<auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>

components/radio/apiExamples/resetState.js

@@ -0,0 +1,7 @@
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}

components/radio/demo/api.html

@@ -46,5 +46,6 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
   </body>
 </html>

components/radio/demo/api.js

@@ -1,11 +1,13 @@
 import { dynamicExample } from "../apiExamples/dynamic";
+import { resetStateExample } from "../apiExamples/resetState";
 import './index.js';
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
     dynamicExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

components/radio/docs/api.md

@@ -18,9 +18,9 @@
 
 ## Methods
 
-| Method  | Type       | Description                                    |
-|---------|------------|------------------------------------------------|
-| `reset` | `(): void` | Method for a total reset of the radio element. |
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| `reset` | `(): void` | Resets component to initial state. |
 
 ## Events
 
@@ -59,6 +59,12 @@
 | `tabIndex` | `tabIndex` | `number`  | -1      |                                                  |
 | `value`    | `value`    | `string`  |         |                                                  |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| `reset` | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                | Type               | Description                                      |

components/radio/docs/partials/api.md

@@ -141,6 +141,26 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 
 </auro-accordion>
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ### Dynamic Example
 
 This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.

components/radio/src/auro-radio-group.js

@@ -216,20 +216,20 @@ export class AuroRadioGroup extends LitElement {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

components/radio/src/auro-radio.js

@@ -151,6 +151,15 @@ export class AuroRadio extends LitElement {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {

components/radio/test/auro-radio.test.js

@@ -80,7 +80,7 @@ describe('auro-radio', () => {
 
   it('handles resetting all radio buttons', async () => {
     const el = await fixture(html`
-      <auro-radio-group>
+      <auro-radio-group id="resetGroupTest" required>
         <span slot="legend">Form label goes here</span>
         <auro-radio id="radio1" label="Yes" name="radioDemo" value="yes" checked></auro-radio>
         <auro-radio id="radio2" label="No" name="radioDemo" value="no" checked></auro-radio>
@@ -96,6 +96,10 @@ describe('auro-radio', () => {
 
     await expect(radioButtonOne.hasAttribute('checked')).to.be.false;
     await expect(radioButtonTwo.hasAttribute('checked')).to.be.false;
+
+    await expect(el.value).to.equal(undefined);
+    await expect(el.optionSelected).to.equal(undefined);
+    await expect(el.hasAttribute('validity')).to.be.false;
   });
 
   it('selects radio button by keyboard', async () => {