Primefaces：Spinner 获取错误的角色属性

Question

我正在使用 Primefaces 11.0.0 并尝试包含一个 Spinner Component。

我的任务要求是获得 WCAG 2.0 A 级。这就是为什么渲染的输入元素必须具有 spinbutton.

角色的原因

这个角色应该由 spinner.js (line 371) 添加，但每次我运行我的应用程序将输入元素的角色设置为文本框，我无法弄清楚为什么会这样。

即使我有一个只有 Spinner 的简单 .xhtml 文件，角色也是 textbox。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Title</title>
</h:head>
<h:body>
    <p:spinner/>
</h:body>
</html>

渲染输出（role="textbox" 而不是 role="spinbutton"）：

<span id="j_idt5" class="ui-spinner ui-widget ui-corner-all ui-spinner-stacked">
    <input id="j_idt5_input"
           name="j_idt5_input"
           type="text"
           class="ui-spinner-input ui-inputfield ui-state-default ui-corner-all"
           autocomplete="off"
           role="textbox"
           aria-multiline="false"
           aria-readonly="false"
           aria-disabled="false"/>
    <a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only">
        <span class="ui-button-text">
            <span class="ui-icon ui-c ui-icon-triangle-1-n"></span>
        </span>
    </a>
    <a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only">
        <span class="ui-button-text"><span class="ui-icon ui-c ui-icon-triangle-1-s"></span>
        </span>
    </a>
</span>
<div id="textarea_simulator" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>

有谁知道为什么角色设置不正确或在哪里可以找到解决方案？

Answer 1

role="textbox" 由 PrimeFaces.skinInput(this.input) 设置，在设置正确的 ARIA 角色后执行。 https://github.com/primefaces/primefaces/pull/8397

在 PrimeFaces 12 中修复了此问题

另请参阅：

https://github.com/primefaces/primefaces/blob/38c62b7eb8acf8aa5663be43b19e8a14c16f7bae/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.js#L312

Answer 2

正如 Jasper de Vries 在他的中提到的，这是一个错误，已在 PrimeFaces 12 中修复。

Primefaces 11 的解决方法

我找到了一个“hacky”解决方法。如果您使用的是 Primefaces 11，请按照以下 3 个步骤操作：

从实际的 spinner.js 文件创建一个副本
将其添加到 webapp 的资源中（我的路径是：.../webapp/resources/script/spinner.js）
将添加的脚本添加到使用微调器的页面底部（参见下面的示例）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Title</title>
</h:head>
<h:body>
    <p:spinner/>

    <h:outputScript name="script/spinner.js"/>
</h:body>
</html>

Primefaces：Spinner 获取错误的角色属性

Primefaces: Spinner gets wrong role attribute

accessibility

primefaces

wai-aria