我正在使用 Primefaces 11.0.0 并尝试包含 Spinner Component .
我的任务的要求是获得 WCAG 2.0 A 级。这就是为什么渲染的输入元素必须具有 spinbutton 角色。
此角色应由 spinner.js (line 371) 添加，但是每次我运行应用程序时，输入元素的角色都会设置为文本框，并且我无法弄清楚为什么会发生这种情况。
即使我有一个简单的 .xhtml 文件，只有 Spinner，角色也是文本框。
<?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>
有谁知道为什么角色设置不正确或者我可以在哪里找到解决方案？
最佳答案
role="textbox" 由 PrimeFaces.skinInput(this.input) 设置，该设置在设置正确的 ARIA 角色后执行。此问题已在 PrimeFaces 12 中由 https://github.com/primefaces/primefaces/pull/8397 修复。
另请参阅:
关于Primefaces:旋转器获得错误的角色属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70991580/