Question

我尝试将标签标签与我的下拉菜单相关联，以使屏幕阅读器可以访问它。我注意到在使用p时：selectOneMenu primefaces会生成一个不应该存在的输入元素。当应用p：outputLabel时，它似乎工作正常（即你点击标签文本，焦点移动到下拉菜单）。然而事实证明，焦点实际上是移动到input元素而select元素不是键盘可访问的（tabindex =＆＃34; -1＆＃34;）。以下是来自primefaces网站的示例： http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml

<h:form>
<p:messages autoUpdate="true" />

<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
    <p:outputLabel for="console" value="Basic:" />
    <p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="width:125px">
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </p:selectOneMenu>

    <p:outputLabel for="car" value="Grouping: " />
    <p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItems value="#{selectOneMenuView.cars}" />
    </p:selectOneMenu>

    <p:outputLabel for="city" value="Editable: " />
    <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItems value="#{selectOneMenuView.cities}" />
    </p:selectOneMenu>

    <p:outputLabel for="advanced" value="Advanced:"  />
    <p:selectOneMenu id="advanced" value="#{selectOneMenuView.theme}" converter="themeConverter" panelStyle="width:180px"
                     effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
        <f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />

        <p:column style="width:10%">
            <h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
        </p:column>

        <p:column>
            <h:outputText value="#{t.displayName}" />
        </p:column>
    </p:selectOneMenu>
</h:panelGrid>

<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-check" />

<p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
    <p:panelGrid columns="2" id="display" columnClasses="label,value">
        <h:outputText value="Basic:" />
        <h:outputText value="#{selectOneMenuView.console}" />

        <h:outputText value="Grouping:" />
        <h:outputText value="#{selectOneMenuView.car}" />

        <h:outputText value="Editable" />
        <h:outputText value="#{selectOneMenuView.city}" />

        <h:outputText value="Advanced:" />
        <h:outputText value="#{selectOneMenuView.theme.displayName}" />
    </p:panelGrid>
</p:dialog>

当您只看到加载了html的页面时，您可以看到每个p：selectOneMenu生成输入和选择。

<td>
    <label id="j_idt88:j_idt91" class="ui-outputlabel ui-widget" for="j_idt88:console_focus">Basic:</label>
</td>
<div id="j_idt88:console" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width:125px">
<div class="ui-helper-hidden-accessible">
    <input id="j_idt88:console_focus" name="j_idt88:console_focus" type="text" autocomplete="off">
</div>
<div class="ui-helper-hidden-accessible">
<select id="j_idt88:console_input" name="j_idt88:console_input" tabindex="-1" data-p-label="Basic" data-p-hl="onemenu">
<option value="">Select One</option><option value="Xbox One">Xbox One</option>
<option value="PS4">PS4</option>
<option value="Wii U">Wii U</option>
</select>
</div>
<label id="j_idt88:console_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">Select One</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
</div>

我希望让下拉菜单的行为与JSF一样h：selectOneMenu（就可访问性而言）。具体到这个例子，我想要＆＃34;基本：＆＃34;标签与其关联的下拉菜单，以便在您点击＆＃34;基本＆＃34;焦点移动到下拉菜单。我还希望屏幕阅读器实际上将其视为选择元素而不是输入元素。到目前为止，由于生成的输入元素，我找不到这样做的方法。我目前正在使用Primefaces 5.2。有没有人知道一种方法来阻止生成这个输入元素？

Answer 1

I gave up on the p:selectOneMenu for two reasons : it is not accessible and it is a pain to use on a mobile device because it doesn't bring the native control picker (the "spinning wheel" on the iPad for instance). Instead I use the h:selectOneMenu customized with something like : <h:selectOneMenu styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all #{component.valid ? '' : 'ui-state-error'}" onmouseover="$(this).addClass('ui-state-active')" onmouseout="$(this).removeClass('ui-state-active')" onfocus="$(this).addClass('ui-state-active ui-state-focus')" onblur="$(this).removeClass('ui-state-active ui-state-focus')"/> It doesn't look that bad, it is accessible and it works well with mobile device.

<p：selectonemenu>在选择框后面生成输入字段

1 个答案: