angular-material - 角材料单选按钮组 - 屏幕阅读器无法正确阅读

Question

我在我的应用程序中使用单选按钮组，它有 3 个可能的值。每当用户选择一个值时，屏幕阅读器都会读取“1 of 1”而不是“1 of 3”。

我还检查了 Angular 网站上的行为，它的行为相同。

示例代码：Stackblitz

浏览器：Microsoft Edge 屏幕阅读器：讲述人

Answer 1

好像是想显示checked的值，尝试参考下面的代码，使用Model来获取checked的值。

<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>

.ts 文件中的代码：

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;
}

结果如下：

有关使用单选按钮标签的更多详细信息，请查看本文。

Answer 2

.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'];
}