angular-material - Angular マテリアル ラジオ ボタン グループ - スクリーン リーダーが正しく読み取れない

Question

アプリケーションでラジオ ボタン グループを使用していますが、3 つの可能な値があります。ユーザーが値を選択するたびに、スクリーン リーダーは「1 of 3」ではなく「1 of 1」と読み上げます。

Angular Web サイトでも動作を確認しましたが、動作は同じです。

サンプルコード : Stackblitz

ブラウザー: Microsoft Edge スクリーン リーダー: ナレーター

Answer 1

チェックした値を表示したいようで、以下のコードを参考に Model を使ってチェックした値を取得してみてください。

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

以下のような結果：

ラジオボタン ラベルの使用の詳細については、この記事を参照してください。