angular / angular/components

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

未关闭
#30,399 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Accessibility area: material/radio P2
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
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):

贡献指南

打开贡献指南

调研方向

从 radio.ts 中应用 required 属性的相关行附近开始,检查附近的单选按钮组处理逻辑。验证分组和独立单选按钮的行为,然后运行相关的单选按钮组件测试;当 required 组在其 wrapper 上暴露 aria-required,而不对每个子控件应用 required 或 aria-required 时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。