Can I use tab to focus a p:inplace component so screenreader can read the element?

Viewed 93

On my JSF page I have p:inplace after panelGrid. When using keyboard to navigate the page, tabbing completely skips the p:inplace component. How to get focus correctly on the component in such a way that a screenreader can read it in hierarchal way after a panelGrid?

Code snippet from the element:

              <h:panelGrid columns="2">
                <p:outputLabel value="username"/> 
                <p:inputText label="username" value="#{sessVar.cust.username}" pt:aria-label="#{ss.username}" /> 
                 ...
              </h:panelGrid>
       
         <p:inplace editor="true" label="Change password" cancelLabel="Cancel">
                    <p:password id="oldpassword"
                                value="#{myBean.cust.oldPwd}"
                                placeholder="#{ss.oldPwd}"/>
                    <p:password id="password" 
                                value="#{sessVar.cust.newPwd}"
                                match="passwordconfirmation"
                                placeholder="#{ss.salasana}"/>
                    <p:password id="passwordconfirmation" 
                                value="#{sessVar.cust.conPwd}" 
                                placeholder="#{ss.confirmationPwd}"/>
                  </p:inplace>     

Tried with @Jasper de Vries's solution:

         <p:inplace editor="true" label="Change password" cancelLabel="Cancel">
                <span tabindex="0"
                      onkeydown="if (event.key === 'Enter') {
                            PF('myInplace').display.trigger('click');
                            event.preventDefault()
                          }">
                  <h:panelGrid columns="2">
                    <p:password .../>
                    <p:password ...>
                    </p:password> 
                    <p:password .../>
                  </h:panelGrid>
                </span>
          </p:inplace>  

Still no dice. Tabbing doesn't focus on p:inplace component.

1 Answers

PrimeFaces 10 and below

Up to PrimeFaces 11, this was not supported out of the box. You could add a node in the output facet with a tabindex="0" attribute and a register a key down listener to trigger a click on the display node if you need this functionality in PrimeFaces 10 and below, like:

<p:inplace widgetVar="myInplace">
  <f:facet name="output">
    <span tabindex="0"
          onkeydown="if(event.key==='Enter'){PF('myInplace').display.trigger('click');event.preventDefault()}">
      Output
    </span>
  </f:facet>
  <f:facet name="input">Input</f:facet>
</p:inplace>

PrimeFaces 11 and up

In PrimeFaces 11 the display node will be keyboard accessible by default.

See also:

Related