title: Text input inside a radio button?
body: <p>Gravity Forms for WordPress has an option for its radio button sets called 'Enable "other" choice'. This option adds a text input nested inside the option.</p>
  
  <p>GF's radio buttons are a problem to begin with since they have no fieldset, but ignoring that, this other choice causes problems with keyboard accessibility. When you tab to the group of radio buttons, you're fine, but as soon as you tab again the focus goes to the "Other" text input, your radio button selection changes to that, and there is no way to change the radio button back to any other value.</p>
  
  <p>The code for one of these monsters is:</p>
  
  <pre><code>&lt;li id='field_4_4' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' &gt;
      &lt;label class='gfield_label'  &gt;
          Overall label that applies to all of the options
      &lt;/label&gt;
      &lt;div class='ginput_container ginput_container_radio'&gt;
          &lt;ul class='gfield_radio' id='input_4_4'&gt;
              &lt;li class='gchoice_4_4_0'&gt;
                  &lt;input name='input_4' type='radio' value='First option'  id='choice_4_4_0' tabindex='14'    /&gt;
                  &lt;label for='choice_4_4_0' id='label_4_4_0'&gt;
                  First option&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class='gchoice_4_4_1'&gt;
                  &lt;input name='input_4' type='radio' value='Second option'  id='choice_4_4_1' tabindex='15'    /&gt;
                  &lt;label for='choice_4_4_1' id='label_4_4_1'&gt;
                  Second option&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class='gchoice_4_4_2'&gt;
                  &lt;input name='input_4' type='radio' value='Third option'  id='choice_4_4_2' tabindex='16'    /&gt;
                  &lt;label for='choice_4_4_2' id='label_4_4_2'&gt;
                  Third option&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class='gchoice_4_4_3'&gt;
                  &lt;input name='input_4' type='radio' value='gf_other_choice'  id='choice_4_4_3' tabindex='17'   onfocus="jQuery(this).next('input').focus();" /&gt;
                  &lt;input id='input_4_4_other' name='input_4_other' type='text' value='Other' aria-label='Other' onfocus='jQuery(this).prev("input")[0].click(); if(jQuery(this).val() == "Other") { jQuery(this).val(""); }' onblur='if(jQuery(this).val().replace(" ", "") == "") { jQuery(this).val("Other"); }' tabindex='17'   /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Is there any way to make this radio button group accessible? I know I could un-check 'Enable "other" choice' and create "Other" as a normal radio button, then add a separate text input that is a conditional field to get around this. The problem is it's on a site with multiple editors who add and edit forms, and they're nontechnical users who may use this option themselves sometimes - so I'd like to find a way to make it work if it's even possible.</p>