角度材质对话框中的单选按钮焦点答案

【问题标题】：Radio button focus in angular material dialog角度材质对话框中的单选按钮焦点
【发布时间】：2020-03-20 07:36:11
【问题描述】：

我将 Angular 8 与 Angular Material 组件一起使用，并且在对话框中遇到焦点指示器的问题。当有一个单选组作为对话框内的第一个控件时，当您在对话框周围进行选项卡时，组中的第一个选项将被选中 - 即使选择了另一个选项。即在表单中向前跳动时，如果选择了第二个选项，则焦点转到第一个选项，然后是选定的选项，然后是按钮。

我在这里创建了一个堆栈闪电战：https://stackblitz.com/edit/angular-2nkqr3，它显示了问题。

是否有人对如何停止/解决它有任何想法，始终将重点放在第一个选项上？（除了先放别的东西——不幸的是它是对话框中唯一的东西）。

提前感谢您的任何建议，

马特

【问题讨论】：

您应该始终共享打开编辑器的 stackblitz 链接，而不是全屏应用演示。
啊，是的，对不起。刚刚复制了分享链接。现在已经解决了。

标签： angular-material2

【解决方案1】：

当你调用对话框时它的简单设置autoFocus:false

 openDialog()() {
    const dialogRef = this.dialog.open(PopupComponent, {
      panelClass: 'modal-medium',
      data: { dialogueName: "Name" },
      autoFocus: false, //disable auto focus in dialog
    });
  }

【讨论】：

是的，这有点好，但是当您在对话框中使用选项卡时，它看起来仍然有点奇怪，即选项卡从最后一个按钮转到第一个单选选项，即使是不同的单选选项选择。虽然反向标签工作正常。
我不明白你在对话框周围的标签是什么意思。（你能更新你上面的最新代码）而且在你当前的例子中它工作正常
我已经更新了 stackblitz。大多数情况下都可以，但是如果我选择一个选项（比如“Badger”），然后通过 Tab 键转到“Ok”按钮，当我点击选项卡时，它会转到第一个（未选择的）单选选项，然后下一个选项卡会转到选择的选项。
亲爱的@MattHarrison 本质上，radio button 是group，它作为单个元素起作用，因为它只保留一个值。切换到广播组会将您带到first item，然后使用arrow keys 在组内导航。您可以引用W3C 作为您的来源，w3.org/TR/wai-aria-practices 和w3.org/wiki/RadioButton。
嗨，是的，我查看了 W3C 的内容，但是在第 4 点的单选按钮中，它说如果在选择了一个选项的单选组中切换，它应该转到该选项。在此示例中，我还添加了另一个对话框：stackblitz.com/edit/angular-2nkqr3-znajkf，其中输入框位于单选组上方（数字 3 旁边的按钮）。在这种情况下，当切换到组时，焦点会转到选定的选项。