Fix an issue with uncheckable radio buttons.

[drgrice1]

When clicking back and forth between radio buttons in a radio group a radio button can be unexpectedly still unchecked when it should become checked. For example, in a radio group with at least two radio buttons, click on the first radio button. It will now be checked. Now click on the second radio button, and it will now be checked. Now click on the first radio button again. This time it will remain unchecked and the second radio button will also now be unchecked.

Another manifestation of this is with keyboard controls. Again with a radio group containing at least two radios. Click on the first radio button (or for a pure keyboard approach navigate to the radio group with tab, and hit the spacebar when the first radio button is focused), and it will now be checked. Now use the down arrow repeatedly. As focus cycles through the radio group buttons on each subsequent full cycle the radios will be all checked, and then all unchecked on the next cycle.

The way that the uncheckable radio code works is that javascript adds a data attribute to a radio button when it is checked which indicates that the radio is checked. The problem is that when another radio in the group is checked that second radio now has the data attribute added, but the first does not have the data attribute removed. So if that first radio button is now clicked again the javascript sees the data attribute, deletes it, and undoes the effect of the click and unchecks the radio when in this case it should let the effect of the click occur.

To fix the issue, radio groups need to be managed instead of single radio buttons. When the data attribute is added to a radio button, the code needs to ensure the data attribute is removed from the other radio buttons in the group that have it.

Of course when a second click occurs on an already checked radio button, that works as before, and the radio is unchecked (and the data attribute removed).

[drgrice1]

Here is a MWE for testing:

DOCUMENT();
loadMacros('PGstandard.pl', 'PGML.pl', 'parserRadioButtons.pl', 'PGcourse.pl');
$radio = RadioButtons([ 'first', 'second' ], 0, uncheckable => 1);
BEGIN_PGML
[_]{$radio}
END_PGML
ENDDOCUMENT();

[drdrew42]

👍