Search code examples
primefacesaccessibilitywai-aria

Primefaces: Spinner gets wrong role attribute


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?


Solution

  • 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: