如何在EL中引用ui:repeat当前索引以关联aria-describedby

问题分析 #

在<ui:repeat>动态生成输入字段时，直接使用pt:aria-describedby="personalForm:names:{index}:errName"无法生效——JSF的passthrough属性会把{index}当作纯字符串传递，不会解析为循环索引，导致无法关联到实际渲染的错误提示元素ID（比如personalForm:names:0:errName）。

解决方案 #

方法1：用EL表达式替换{index} #

passthrough属性支持JSF表达式语言（EL），直接将{index}替换为#{index}即可让JSF解析循环索引，生成正确的ID路径：

<h:form id="personalForm">
    <div class="form-fields">
        <ui:repeat value="#{testView.list}" var="item" id="names">
            <div class="field-container">
                <span class="ui-float-label">
                    <p:inputText value="#{item.name}"
                                 pt:aria-describedby="personalForm:names:#{index}:errName">
                    </p:inputText>
                    <p:outputLabel for="@previous" value="Name" />
                </span>
            </div>
            <p:fragment id="errName">
                <small class="block ui-state-error">Username is not available.</small>
            </p:fragment>
        </ui:repeat>
    </div>
</h:form>

渲染后aria-describedby的值会自动替换为personalForm:names:0:errName、personalForm:names:1:errName等正确格式。

方法2：通过组件绑定动态获取客户端ID #

如果不想硬编码表单和repeat的ID（避免结构变更后需要修改代码），可以给错误提示的<p:fragment>绑定一个EL变量，直接使用它的clientId属性：

<h:form id="personalForm">
    <div class="form-fields">
        <ui:repeat value="#{testView.list}" var="item" id="names">
            <div class="field-container">
                <span class="ui-float-label">
                    <p:inputText value="#{item.name}"
                                 pt:aria-describedby="#{errFragment.clientId}">
                    </p:inputText>
                    <p:outputLabel for="@previous" value="Name" />
                </span>
            </div>
            <p:fragment id="errName" binding="#{errFragment}">
                <small class="block ui-state-error">Username is not available.</small>
            </p:fragment>
        </ui:repeat>
    </div>
</h:form>

这种方式完全依赖JSF组件的客户端ID生成逻辑，无需手动拼接路径，灵活性更高。

方法3：利用PrimeFaces原生无障碍支持 #

PrimeFaces的<p:message>组件本身就支持自动关联输入框并处理无障碍属性，无需手动设置aria-describedby。将自定义的错误提示替换为<p:message>：

<h:form id="personalForm">
    <div class="form-fields">
        <ui:repeat value="#{testView.list}" var="item" id="names">
            <div class="field-container">
                <span class="ui-float-label">
                    <p:inputText value="#{item.name}" id="nameInput">
                    </p:inputText>
                    <p:outputLabel for="@previous" value="Name" />
                </span>
            </div>
            <p:message for="nameInput" id="errName" display="text" styleClass="block ui-state-error" />
        </ui:repeat>
    </div>
</h:form>

<p:message>会自动为输入框添加正确的aria-describedby属性，同时自带验证错误展示逻辑，适合结合PrimeFaces的验证框架使用。

内容的提问来源于stack exchange，提问作者yangsunny