PrimeFaces使禁用的单选按钮成为选项卡

Question

我们对SelectOneRadio元素使用修改后的渲染器。此渲染器不会为禁用的selectItems设置基础<input />上的disabled属性。这是由于无障碍要求。每个元素(还有禁用的单选按钮(都必须可以通过键盘高亮显示和选项卡显示。

问题：单击项目标签时，表单参数将更新为禁用选项的值。禁用的元素也可以通过键盘进行检查。

知道如何在<input />上设置disabled属性，同时保持元素可切换吗？

Answer 1

恐怕简单地更改渲染器是不行的。与键盘导航相关的许多功能可以在SelectOneRadio组件的窗口小部件代码中找到：

https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectoneradio.js

您可能需要覆盖那里的许多函数。

Answer 2

每个元素(以及禁用的单选按钮(都必须可以通过键盘高亮显示和选项卡显示。

根据定义，这是一个无法满足的矛盾需求。被禁用的元素无法聚焦，这是完全正常的。两者总是在一起。因此，基本上没有好的解决方案，因为需求是错误的。

然而，这里有一个有趣的事实：

onclick事件也是在聚焦单选按钮时触发的。您可以使用event.preventDefault()，这将阻止单选按钮被选中。

使用箭头键时，收音机保持可聚焦状态。当使用箭头键聚焦单选按钮时，它不会变为选中状态。

然而，它不再可以使用选项卡进行聚焦，更糟糕的是，选项卡导航似乎完全被破坏了。甚至不再可能从"；一个"；两个"；三个"；或返回。

因此，我不会再次承诺，但这是错误的要求，错误的解决方案。

Windows 10下的Chrome、Firefox和Internet Explorer似乎都同意同样的行为，很难！

<form action="">
<p><label for="a1">One</label>
<input type="radio" name="a" id="a1"/></p>
<p><label for="a2">Two</label>
<input type="radio" name="a" id="a2"/></p>
<p><label for="a3">Three</label>
<input type="radio" name="a" id="a3"/></p>
</form>
<script type="text/javascript">
function f(e) {
e.preventDefault();
}
var a2 = document.getElementById('a2');
a2.addEventListener('click', f, true);
</script>