angular / angular/components

bug(MatRadioButton): The `required` attribute is used on a radio button

オープン
#30,399 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
Accessibility area: material/radio P2
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When used in a radio group, the `required` attribute is used on a radio button. All the radio buttons under the group have `required` attributes. This attribute should not be used on individual radio buttons, because that creates illogical meta-data, which may be confusing for assistive technology users. It's not the individual controls that are required, it's the group as a whole that must have one choice made from it.

Code reference: https://source.corp.google.com/piper///depot/google3/third_party/javascript/angular_components/src/material/radio/radio.ts;l=250-257;bpv=1;bpt=1

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

When a radio button is used inside a radio group, if the group is required and does not have a default selection, then add `aria-required="true"` to the wrapping element, not `aria-required/required` to the individual controls. We can leave it unchanged when a radio button is used outside a radio group, though I am unsure if that is a valid use case.

### Actual Behavior

The `required` attribute is applied to each radio button in a group.

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

required 属性が適用されている参照先の行付近から radio.ts の調査を始め、近くにあるラジオグループの処理を確認します。グループ化されたラジオボタンと単独のラジオボタンの動作を検証し、関連するラジオコンポーネントのテストを実行してください。required グループの wrapper に aria-required が設定され、各子コントロールには required も aria-required も適用されなければ完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。