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.