DropDown Accessibility Issue: Scrollable region must have keyboard access

[HellinSunWTW]

Describe the bug

Click the dropdown to open the list -> Scan the page using Axe Dev Tools with dropdown menu open

The Axe Dev Tools for Accessibility is reporting the following issue: Scrollable region must have keyboard access

Potential solution: Adding a tabindex="0" might fix this issue

Environment

Windows 10

Reproducer

No response

Angular version

17.2.1

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Edge

Steps to reproduce the behavior

1. Install the Axe Dev Tools for Accessibility plug-in.

2. Visit the PrimeNG dropdown page (https://primeng.org/dropdown) on Chrome/Edge browser.

3. Click to open any dropdown menu

4. Scan the page with Axe

Expected behavior

No response

[cetincakiroglu]

Hi,

Thanks for raising the issue.

Unfortunately, adding tabindex to the element with the .p-dropdown-items-wrapper class does not solve the problem and disrupts the component's current accessibility behavior, leading to a breaking change. We also use the same accessibility features in PrimeVue and PrimeReact. To avoid affecting our other Prime UI Libraries (PrimeVue & PrimeReact) and UIKit, the team will discuss this issue and make improvements accordingly. I am moving this issue to the next milestone until a decision is made.

[cetincakiroglu]

Hi,

After considering and discussing the issue you shared as a team, we have found that the reason for Axe Devtools reporting an error here is due to our focus operation in the component using visual focus. In fact, focus is being applied to the elements within the area where the error occurs, but this focus is applied from within the component using our custom logic rather than giving tabindex to the elements. In this case, accessibility tools like Axe cannot find focusable elements in the area because the elements do not have a tabindex, leading to the error you are seeing.

Making the mentioned area focusable allows the tests to pass with tools, but it disrupts the keyboard support logic we have implemented for accessibility, the component becomes unusable with the keyboard. Accessibility tools cannot detect visual focus yet. Unfortunately, in this situation, we are unable to intervene in the issue. However, to make the test pass, you can use the templating option to add a hidden focusable element to the first element.

Closing the issue, thanks for reporting.