I am using Primefaces 11.0.0 and try to include a Spinner Component.
A requirement for my task is to get a WCAG 2.0 Level A. This is why the rendered input-element must have the role spinbutton.
This role should be added by spinner.js
(line 371), but everytime I run my application the role of the input-element is set to textbox, and I cannot figure out why this is happening.
Even if i have a simple .xhtml-File with only the Spinner the role is 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>
Rendered output (role="textbox"
instead of 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>
Does anyone know why the role is not set correctly or where I can find a solution for this?
The role="textbox"
is set by PrimeFaces.skinInput(this.input)
which is executed after the right ARIA role was set. This is fixed in PrimeFaces 12 by https://github.com/primefaces/primefaces/pull/8397
See also: