AccordionPanel: accessibility violation

[semicolon-1796]

Describe the bug

p:accordionPanel doesn't follow WAI-ARIA Specs. It is generating elements with [role=tablist] and [role=tabpanel] elements inside [role=tablist]. As per ARIA specs elements [role=tablist] should only allow elements with [role=tab] as a children.

Reproducer

Steps to reproduce the behavior:

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

Expected behavior

Every div with [role=tablist] shouldn't have children elements other than elements having [role=tab].Other than role=tab children are not allowed in role=tablist.

tab role Required Owned Elements. Every tablist must have one or more tab children.

https://dequeuniversity.com/rules/axe/4.9/aria-required-children

Example XHTML

<div class="card">
                <p:accordionPanel>
                    <p:tab title="Title">
                        <ul>
                            <li>
                                <a name="genInfo" class="namedAnchor">
                                    <strong>Tab Content</strong>
                                </a>
                                                         </li>
                        </ul>
                    </p:tab>
                </p:accordionPanel>
</div>

generates

<div class="card">
                <div id="j_idt23" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" role="tablist" data-widget="widget_j_idt23">
                <div id="j_idt23:j_idt24_header" class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                        Title
                </div>
                <div id="j_idt23:j_idt24" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false">
                    <ul>
                        <li>
                            <a name="genInfo" class="namedAnchor">
                                <strong>Tab Content</strong>
                            </a>
                        </li>
                    </ul>
                </div>
                <input id="j_idt23_active" name="j_idt23_active" type="hidden" autocomplete="off" aria-hidden="true" value="0">
                </div>
            </div>

Expected

<div class="card">
                <div id="j_idt23" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" role="tablist" data-widget="widget_j_idt23">
                <div id="j_idt23:j_idt24_header" class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                        Title
                </div>
                </div>
                <div id="j_idt23:j_idt24" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false">
                    <ul>
                        <li>
                            <a name="genInfo" class="namedAnchor">
                                <strong>Tab Content</strong>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

PrimeFaces edition

Community

PrimeFaces version

11.0.0

Theme

No response

JSF implementation

MyFaces

JSF version

2.2

Java version

8

Browser(s)

All

[melloware]

actually it looks like the ARIA is all wrong for accordion and should be like this: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/