如何自定义PrimeFaces 6.2版本PickList组件的选择按钮文本

PrimeFaces 6.2版本未提供原生配置项修改PickList的按钮文本，目前有两种经过实测可行的实现方案，可满足无障碍适配需求： #

方案1：前端JavaScript动态修改（轻量便捷，无需后端改动） #

页面加载完成后直接替换对应按钮的内容，可保留原有功能和图标，示例代码如下：

$(function() {
    // 单条添加按钮
    $('.ui-picklist-button-add').html('<span class="ui-icon ui-icon-arrowthick-1-e"></span> 添加')
        .attr('aria-label', '将选中项移动到右侧列表');
    // 单条移除按钮
    $('.ui-picklist-button-remove').html('<span class="ui-icon ui-icon-arrowthick-1-w"></span> 移除')
        .attr('aria-label', '将选中项移动到左侧列表');
    // 全部添加按钮
    $('.ui-picklist-button-add-all').html('<span class="ui-icon ui-icon-arrowthickstop-1-e"></span> 全部添加')
        .attr('aria-label', '将左侧所有项移动到右侧列表');
    // 全部移除按钮
    $('.ui-picklist-button-remove-all').html('<span class="ui-icon ui-icon-arrowthickstop-1-w"></span> 全部移除')
        .attr('aria-label', '将右侧所有项移动到左侧列表');
    // 上下移动按钮可参照上述逻辑按需修改
});

注：直接给按钮添加aria-label属性可进一步提升无障碍适配效果，符合屏幕阅读器的识别要求。

方案2：自定义组件渲染器（全项目全局生效，适合统一规范需求） #

通过重写PickList的渲染逻辑实现全局生效，不需要每个页面单独写JS，步骤如下：

• 新建自定义渲染器类，继承org.primefaces.component.picklist.PickListRenderer
• 重写encodeButton方法，在原有图标的渲染逻辑后追加需要展示的文本内容
• 在项目的faces-config.xml中注册自定义渲染器，覆盖原生实现：

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.PickListRenderer</renderer-type>
        <renderer-class>你的自定义渲染器全类名</renderer-class>
    </renderer>
</render-kit>

以上两种方案均不会影响PickList原有的选中、提交、校验等核心功能，可正常使用。

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