search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.41k stars 1.22k forks source link

Select: ARIA hidden element must not be focusable or contain focusable elements #6103

Open Josef-Reichardt opened 3 months ago

Josef-Reichardt commented 3 months ago

Describe the bug

The Select componen (former Dropdown) contains a static <span> element in the dropdown list which breaks accessibility: grafik

Reproducer

https://primevue.org/select/

PrimeVue version

3 & 4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox, Chrome, ... all

Steps to reproduce the behavior

  1. Install Axe browser plugin (unfortunatelly Google Chrome only): https://www.deque.com/axe/
  2. Go to https://primevue.org/select/
  3. Open the browser dev tool and go to the tab "axe DevTools"
  4. Open a dropdown on the primevue demo page
  5. Click on "Full Page Scan" in the axe panel (while the dropdown is still open)

Expected behavior

The expected behavior is that axe doesn't find any issue on the primevue demo page.

LanFeusT23 commented 2 months ago

This happens on Menu buttons too fyi

bonniegrubbs commented 2 months ago

Agreed, I'm seeing this on the menu component as well. To replicate, see the Primevue example here

I think this is the issue