当前位置：文江博客话题详情

PrimeFaces 使禁用的单选按钮可选项卡化

发布于 2025-01-09 06:56:22 字数 284 浏览 0 评论 0原文

我们对 SelectOneRadio 元素使用修改后的渲染器。此呈现器不会在底层上为禁用的 selectItem 设置 disabled 属性。这是由于可访问性要求。每个元素（以及禁用的单选按钮）都必须可通过键盘突出显示和选项卡。

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

知道如何在上设置 disabled 属性，同时保持元素可选项吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清醇 2025-01-16 06:56:22

恐怕仅仅改变渲染器是不行的。与键盘导航相关的大部分功能都可以在 SelectOneRadio 组件的小部件代码中找到：

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

您可能需要重写那里的很多功能。

回复收藏 0 原文

柒夜笙歌凉 2025-01-16 06:56:22

每个元素（以及禁用的单选按钮）都必须可通过键盘突出显示和选项卡。

从定义上来说，这是一个无法满足的矛盾要求。禁用的元素不可聚焦，这是完全正常的。两者总是在一起。
所以基本上没有什么好的解决办法，因为需求是错误的。

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

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>

Every element (also the disabled radio buttons) must highlightable and tabbable via keyboard.

This is by definition a contradicting requirement that can't be satisfied. A disabled element isn't focusable and it's perfectly normal. Both always go together.
So there is basicly no good solution, as the requirement is wrong.

However, here's a little fun fact:

The onclick event is triggered upon focusing the radio button, too. You may use event.preventDefault() and this will prevent the radio button from being selected.

The radio stays focusable when using arrow keys.
When the radio button is focused with arrow keys, then it doesn't become selected.

However, it iss no longer focusable using tab, and worse, tab navigation seem to be completely broken. It is even no longer possible to go from "One" two "Three" or back.

I would therefore not recommand it, but well, wrong requirement, wrong solution.

Chrome, Firefox and Internet Explorer under Windows 10 seem to all agree on that same behavior, tough !

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

回复收藏 0 原文

~没有更多了~