fix radio button validation (#912)

docs/docs/resources/changelog.md

@@ -19,6 +19,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
 - Fixed a bug in `<wa-select>` that caused incorrect spacing of icons
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control
+- Fixed a bug in `<wa-radio-group>` that prevented radio buttons from validating
 - Improved native radio alignment
 - Improved the `.wa-cloak` utility class so all FOUCE-related solutions are 100% opt-in
 

src/components/radio-group/radio-group.ts

@@ -228,9 +228,18 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
    * the first radio element.
    */
   get validationTarget() {
-    return isServer
-      ? undefined
-      : this.querySelector<WaRadio | WaRadioButton>(':is(wa-radio, wa-radio-button):not([disabled])') || undefined;
+    if (isServer) return undefined;
+
+    const radio = this.querySelector<WaRadio | WaRadioButton>(':is(wa-radio, wa-radio-button):not([disabled])');
+    if (!radio) return undefined;
+
+    // If it's a radio button, return the internal button element
+    if (radio.localName === 'wa-radio-button') {
+      return radio.input || radio;
+    }
+
+    // Otherwise return the radio itself
+    return radio;
   }
 
   @watch('value')