我可以使用制表符来聚焦 p:inplace 组件以便屏幕阅读器可以读取该元素吗？

Question

在我的 JSF 页面上，我在 panelGrid 之后有 p:inplace。使用键盘导航页面时，Tab 键会完全跳过 p:inplace 组件。如何以屏幕阅读器可以在 panelGrid?

之后以分层方式阅读的方式正确地将焦点放在组件上

来自元素的代码片段：

              <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>

尝试使用@Jasper de Vries 的解决方案：

         <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>

仍然没有骰子。 Tab 键不关注 p:inplace 组件。

Answer 1

PrimeFaces 10 及以下版本

直到 PrimeFaces 11，这不是开箱即用的支持。如果您在 PrimeFaces 10 及以下版本中需要此功能，您可以在 output 方面添加一个具有 tabindex="0" 属性的节点，并注册一个按键监听器以触发对 display 节点的点击, 比如:

<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 及更高版本

在 PrimeFaces 11 中，display 节点默认可通过键盘访问。

另请参阅：

我可以使用制表符来聚焦 p:inplace 组件以便屏幕阅读器可以读取该元素吗？

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

html

jsf

accessibility

primefaces

PrimeFaces 10 及以下版本

PrimeFaces 11 及更高版本