fix(material/radio): clear selected radio button from group

In  #18081 the radio group was changed so that deselected buttons receive `tabindex="-1"` when there's a selected button. The problem is that we weren't clearing the reference to the selected button so it gets removed, the deselected buttons become unfocusable using the keyboard.

These changes clear the selected radio button on destroy.

Fixes #27461.

Author: crisbeto

src/material/radio/radio.spec.ts

@@ -471,6 +471,19 @@ describe('MDC-based MatRadio', () => {
         }),
       ).toEqual(['-1', '-1', '0']);
     });
+
+    it('should clear the selected radio button but preserve the value on destroy', () => {
+      radioLabelElements[0].click();
+      fixture.detectChanges();
+      expect(groupInstance.selected).toBe(radioInstances[0]);
+      expect(groupInstance.value).toBe('fire');
+
+      fixture.componentInstance.isFirstShown = false;
+      fixture.detectChanges();
+
+      expect(groupInstance.selected).toBe(null);
+      expect(groupInstance.value).toBe('fire');
+    });
   });
 
   describe('group with ngModel', () => {
@@ -995,7 +1008,7 @@ describe('MatRadioDefaultOverrides', () => {
                   [value]="groupValue"
                   name="test-name">
     <mat-radio-button value="fire" [disableRipple]="disableRipple" [disabled]="isFirstDisabled"
-                     [color]="color">
+                     [color]="color" *ngIf="isFirstShown">
       Charmander
     </mat-radio-button>
     <mat-radio-button value="water" [disableRipple]="disableRipple" [color]="color">
@@ -1009,12 +1022,13 @@ describe('MatRadioDefaultOverrides', () => {
 })
 class RadiosInsideRadioGroup {
   labelPos: 'before' | 'after';
-  isFirstDisabled: boolean = false;
-  isGroupDisabled: boolean = false;
-  isGroupRequired: boolean = false;
+  isFirstDisabled = false;
+  isGroupDisabled = false;
+  isGroupRequired = false;
   groupValue: string | null = null;
-  disableRipple: boolean = false;
+  disableRipple = false;
   color: string | null;
+  isFirstShown = true;
 }
 
 @Component({

src/material/radio/radio.ts

@@ -568,6 +568,15 @@ export abstract class _MatRadioButtonBase
   ngOnDestroy() {
     this._focusMonitor.stopMonitoring(this._elementRef);
     this._removeUniqueSelectionListener();
+
+    // Clear the button from the `selected` state since it determines the `tabindex` of the
+    // remaining radio buttons. Note that we preserve the old value, because there are some
+    // internal tests that depend on it.
+    if (this.radioGroup?.selected === this) {
+      const oldValue = this.radioGroup.value;
+      this.radioGroup.selected = null;
+      this.radioGroup.value = oldValue;
+    }
   }
 
   /** Dispatch change event with current value. */