PrimeFaces make disabled Radiobutton tabbable - html

Question

We use a modified renderer for SelectOneRadio elements. This renderer does not set the disabled attribute on the underlying <input /> for disabled selectItems.
This is due to an accessibility requirement. Every element (also the disabled radio buttons) must highlightable and tabbable via keyboard.
Problem: when the items label is clicked, the form parameter is updated to the value of the disabled option. The disabled element is also checkable via keyboard.
Any idea how I can set the disabled attribute on the <input /> while keeping the elements tabbable?

Answer 1

Simply changing the renderer won't do I'm afraid. Much of the functionality related to keyboard navigation can be found in the widget code of the SelectOneRadio component:
https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectoneradio.js
You will probably need to override a lot of functions there.

Answer 2

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>