MultiSelect: accessibility - "Form field missing a label" and "Container element is empty" violated

[markuczy]

Describe the bug

Hi, I am working on a component which uses MultiSelect component. Acessibility cheker tools are reporting an issue with an input element, which is a child of p-multiSelect.

The following line is what is causing the issue: <input type="text" readonly="readonly" aria-haspopup="listbox" role="listbox">. The violated rules are:

• https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
• https://www.w3.org/TR/wai-aria-1.1/#mustContain

Environment

Ubuntu 22.04, WSL 2, Windows 11 PRO

Reproducer

https://stackblitz.com/edit/github-nkcodq

Angular version

15.2.10

PrimeNG version

15.2.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Chrome 121

Steps to reproduce the behavior

1. Use multiSelect component component
2. Validate accessibility with lighthouse/siteImprove/axa
3. Expect "Form field missing a label" and "Container element is empty"

Expected behavior

When using multiSelect accessibility tests are not reporting any issues.

[markuczy]

Additionaly, accessibility checkers are reporting "ARIA attribute unsupported or prohibited" regarding aria-haspopup usage on input element.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!