Primefaces: Spinner gets wrong role attribute

user_9901515 0
Viewed 107

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?

primefaces wai-aria accessibility
2 Answers
user_8806190

As Jasper de Vries mentions in his answer, this is a bug, which is fixed in PrimeFaces 12.

Workaround with Primefaces 11

I found a "hacky" workaround for this. If you are using Primefaces 11, follow these 3 steps:

  1. Create a copy from the actual spinner.js file
  2. Add it to the resources of the webapp (path in my case: .../webapp/resources/script/spinner.js)
  3. Add the added script to the bottom of the page where the spinner is used (see example below)
<?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>
user_99015150
Related