Angular material radio button group - screen reader not reading properly

.html

<label id="example-radio-group-label">Pick your favorite season</label>
<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>

.ts

import {Component} from '@angular/core';

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
  favoriteSeason: string;
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}

It seems that you want to display the checked value, try to refer to the following code and use Model to get the checked value.

<mat-radio-group [(ngModel)]="rdoSeason" aria-label="Select an option">
  <mat-radio-button [value]="1">Option 1</mat-radio-button>
  <mat-radio-button [value]="2">Option 2</mat-radio-button>
  <mat-radio-button [value]="3">Option 3</mat-radio-button>
</mat-radio-group>
<div>You select Option: {{rdoSeason}}</div>

Code in the .ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-material-radiobutton',
  templateUrl: './material-radiobutton.component.html',
  styleUrls: ['./material-radiobutton.component.css']
})
export class MaterialRadiobuttonComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  rdoSeason:string;
}

the result as below:

More details about using the radio-button label, check this article.