Stepper a11y issue

[razilein]

Describe the bug

Axe Devtools is reporting two violations

Violation found at $('#pn_id_1')
        <p-stepper id="pn_id_1" ng-reflect-value="0" role="tablist" class="p-stepper p-component" pc1="">
        Received:
        Certain ARIA roles must contain particular children (aria-required-children)
        Fix any of the following:
          Element has children which are not allowed: [role=presentation], [role=tabpanel]
        You can find more information on this issue here: 
        https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI

and

        Violation found at $('#pn_id_1_steppanel_0')
        <p-step-panel role="tabpanel" class="ng-tns-c1365826031-0 p-steppanel p-component p-steppanel-active ng-star-inserted" id="pn_id_1_steppanel_0" ng-reflect-value="0" aria-controls="pn_id_1_step_0" data-p-active="true" data-pc-name="steppanel" pc6="">
        Received:
        ARIA attributes must conform to valid values (aria-valid-attr-value)
        Fix all of the following:
          Invalid ARIA attribute value: aria-controls="pn_id_1_step_0"
        You can find more information on this issue here: 
        https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI

Pull Request Link

No response

Reason for not contributing a PR

• [x] Lack of time
• [ ] Unsure how to implement the fix/feature
• [ ] Difficulty understanding the codebase
• [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/vhjecgcb?file=package.json

Environment

no response

Angular version

19.1.4

PrimeNG version

v19

Node version

v20.18.1

Browser(s)

all

Steps to reproduce the behavior

Install Axe DevTools free chrome extension: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US Navigate to https://localhost:4200 Go to browser dev tools, click the double chevrons in the upper right (>>), choose 'axe DevTools' Click the button "scan all of my page" Find the issues reported, should be the first two.

Expected behavior

Axe DevTools should not report a accessibility problem.

[github-actions[bot]]

Due to PrimeTek's demanding roadmap for PrimeNG, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[priyankc]

@cagataycivici @razilein Raised a PR that address the a11y issues.

To be transaparent, I'm building a tool to resolve a11y issues and used the tool to create the PR. I've also manually tested the PR and attached the Axe report screenshots confirming the resolution.

Would love for your feedback on the PR.

If you are interested, here is the original report: https://workback.ai/primefaces/primeng/issues/17669