我可以使用 tab 来聚焦 p:inplace 组件，以便屏幕阅读器可以读取元素吗？答案

【问题标题】：Can I use tab to focus a p:inplace component so screenreader can read the element?我可以使用 tab 来聚焦 p:inplace 组件，以便屏幕阅读器可以读取元素吗？
【发布时间】：2021-08-26 07:46:10
【问题描述】：

在我的 JSF 页面上，panelGrid 后面有 p:inplace。使用键盘导航页面时，Tab 键完全跳过 p:inplace 组件。如何正确关注组件，以使屏幕阅读器可以在panelGrid 之后以分层方式阅读它？

来自元素的代码sn-p：

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

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

【问题讨论】：

这个运气好吗？
不走运。决定彻底抛弃p:inplace。
这很奇怪.. 我已经使用 primefaces-test repo 测试了发布的解决方案，它对我有用。你遇到了什么错误？
没有错误。选项卡焦点不会显示在 p:inplace 组件上。
解决方案中发布的代码？你用的是什么浏览器？

标签： html jsf primefaces accessibility

【解决方案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 节点默认可以通过键盘访问。

另见：

【讨论】：