<p: selectOneMenu> генерирует поле ввода за поле выбора

Question

Я пытаюсь связать ярлык с моим выпадающим меню, чтобы сделать его доступным для чтения с экрана. Я заметил, что при использовании p: selectOneMenu primefaces генерирует входной элемент, которого не должно быть. При применении p: outputLabel он работает нормально (т. Е. Вы нажимаете на текст ярлыка, а фокус переходит в раскрывающееся меню). Однако оказывается, что фокус фактически переходит к входному элементу, а элемент выбора не доступен для клавиатуры (tabindex = "- 1"). Вот пример, взятый с сайта 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 загружен, вы можете видеть каждый р: 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 один час: selectOneMenu (когда речь идет о доступности). Для примера я хочу, чтобы метка «Basic:» ассоциировалась с выпадающим меню, так что, когда вы нажимаете «Basic», фокус переходит в раскрывающееся меню. Я также хочу, чтобы экранный ридер фактически рассматривал его как элемент выбора, а не элемент ввода. До сих пор я не могу найти способ сделать это из-за этого элемента ввода, который сгенерирован. В настоящее время я использую Primefaces 5.2. Кто-нибудь знает способ предотвратить создание этого элемента ввода?

Answer 1

Я отказался от p:selectOneMenu по двум причинам: он недоступен, и это боль для использования на мобильном устройстве, потому что он не приносит нативный контроллер управления (например, «вращающееся колесо» на iPad).

Вместо этого я использовать h:selectOneMenu настроить что-то вроде:

<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')"/> 

Это не выглядит так уж плохо, он доступен, и это хорошо работает с мобильным устройством.