SelectOneMenu: accessibility violation

Describe the defect p:selectOneMenu doesn’t follow WAI-ARIA Specs

Environment:

• PF Version: 6.2.27
• JSF + version: Mojarra N.D.
• Affected browsers: ALL

To Reproduce Steps to reproduce the behavior:

1. Load xhtml page
2. Primefaces generates incorrect html element

Expected behavior

Every Input with id myid_focus shouldn’t have an aria-expanded attribute

When ARIA attributes are used on HTML elements that are not in accordance with WAI-ARIA 1.1, they conflict with the semantics of the elements which can cause assistive technology products report nonsensical user interface (UI) information that does not represent the actual UI of the document.

https://dequeuniversity.com/rules/axe/3.5/aria-allowed-attr?application=AxeChrome

Example XHTML

<h:form id="frmTest">
    <p:selectOneMenu id="myid" value="#{bean.variable}">
        <f:selectItems value="#{bean.variables}" />
    </p:selectOneMenu>
</h:form>

generates

<form id="frmTest" name="frmTest" method="post" action="/tributi/utente/welcome.xhtml" enctype="application/x-www-form-urlencoded">
	<input type="hidden" name="frmTest" value="frmTest">
	<div id="frmTest:myid" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-state-hover" role="combobox" aria-haspopup="true" aria-expanded="true" aria-owns="frmTest:myid_items" style="min-width: 24px;">
		<div class="ui-helper-hidden-accessible">
			<input id="frmTest:myid_focus" name="frmTest:myid_focus" type="text" autocomplete="off" aria-expanded="true" aria-autocomplete="list" aria-disabled="false">
		</div>
		<div class="ui-helper-hidden-accessible">
			<select id="frmTest:myid_input" name="frmTest:myid_input" tabindex="-1" aria-hidden="true"/>
		</div>
		<label id="frmTest:myid_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
		<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right ui-state-hover">
			<span class="ui-icon ui-icon-triangle-1-s ui-c"/>
		</div>
	</div>
	<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:1" value="-856014644197753318:920539168267910855" autocomplete="off">
</form>

Current workaround

<h:form id="frmTest">
    <p:selectOneMenu id="myid" value="#{bean.variable}">
        <f:selectItems value="#{bean.variables}" />
    </p:selectOneMenu>
    <script>
        document.getElementById("frmtest:myid_focus").removeAttribute("aria-expanded");
    </script>
</h:form>

[tandraschko]

it’s a bit complicated 😄 (I’m not a member of PrimeTek!)

This here is the community issue tracker. Bugs are fixed here in the github master and partly backported to the elite releases from PrimeTek, which are maintained in a private PrimeTek repository. Which issues are packported is the decision by PrimeTek. PRO users can directly influence issues to be packported in elite releases. The current supported versions are 7.0.x and 8.0.x.

So it’s actually a required information for us, the community, to check if its already fixed in trunk.

And yes, please try to upgrade 😃 It contains sooo many improvements.

[kukel]

sooo is an understatement… soooooooo is better 😉