Question

WordPress的重力形式有一个选项，其单选按钮集称为“启用”其他“选择”。此选项添加嵌套在选项内的文本输入。

GF的单选按钮是一个问题，因为它们没有字段集，但忽略了这一点，这另一个选择会导致键盘可访问性问题。当你选择单选按钮组时，你很好，但是一旦你再次选中，焦点转到“其他”文本输入，你的单选按钮选择会改变为那个，并且无法改变收音机按钮返回任何其他值。

其中一个怪物的代码是：

<li id='field_4_4' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
    <label class='gfield_label'  >
        Overall label that applies to all of the options
    </label>
    <div class='ginput_container ginput_container_radio'>
        <ul class='gfield_radio' id='input_4_4'>
            <li class='gchoice_4_4_0'>
                <input name='input_4' type='radio' value='First option'  id='choice_4_4_0' tabindex='14'    />
                <label for='choice_4_4_0' id='label_4_4_0'>
                First option</label>
            </li>
            <li class='gchoice_4_4_1'>
                <input name='input_4' type='radio' value='Second option'  id='choice_4_4_1' tabindex='15'    />
                <label for='choice_4_4_1' id='label_4_4_1'>
                Second option</label>
            </li>
            <li class='gchoice_4_4_2'>
                <input name='input_4' type='radio' value='Third option'  id='choice_4_4_2' tabindex='16'    />
                <label for='choice_4_4_2' id='label_4_4_2'>
                Third option</label>
            </li>
            <li class='gchoice_4_4_3'>
                <input name='input_4' type='radio' value='gf_other_choice'  id='choice_4_4_3' tabindex='17'   onfocus="jQuery(this).next('input').focus();" />
                <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'   />
            </li>
        </ul>
    </div>
</li>

有没有办法让这个单选按钮组可以访问？我知道我可以取消选中“启用”其他“选择”并创建“其他”作为普通单选按钮，然后添加一个单独的文本输入，这是一个条件字段来解决这个问题。问题是它是在一个有多个编辑器的网站上添加和编辑表单的，而且他们是非技术用户，他们有时可能会自己使用这个选项 - 所以我想找到一种方法让它工作，如果它甚至可能。

Answer 1

花了3个步骤： 1.在单选按钮上添加标签 2.删除tabindexes 3.添加CSS

这是更新后的HTML：

<li class='gchoice_4_4_3'>
    <!-- no more tabindex -->
    <input name='input_4' type='radio' value='gf_other_choice'  id='choice_4_4_3' onfocus="jQuery(this).next('input').focus();" />
    <!-- new label -->
    <label for='choice_4_4_3'>Other</label>
    <!-- no more tabindex -->
<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"); }'  />
</li>

CSS，默认隐藏文本输入，但在＆＃34;其他＆＃34;单选按钮被选中：

.gfield_radio li input[type="text"] { display:none; }
.gfield_radio li input:checked + label + input[type="text"] { display:block; }

CSS进入我的自定义主题，更改HTML的过滤器是：

add_filter('gform_tabindex', function($tabindex, $form) {
    return false;
}, 10, 2);

如果Gravity Forms会随着时间的推移而变得很好，并将<fieldset>中的所有内容设置为它应该如此，但至少在这些变化中，＆＃34;其他＆＃34;单选按钮现在可以通过键盘访问。

单选按钮内的文本输入？

1 个答案: