Skip to content

fix(VListItem): only attach onClick when item is clickable#22967

Open
sridhar-3009 wants to merge 6 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/list-item-a11y-clickable-22854
Open

fix(VListItem): only attach onClick when item is clickable#22967
sridhar-3009 wants to merge 6 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/list-item-a11y-clickable-22854

Conversation

@sridhar-3009

Copy link
Copy Markdown

Closes #22854

Problem

NVDA and other screen readers detect VListItem as "clickable" even when the item has no interactive functionality. This happens because onClick={ onClick } was always attached unconditionally to every VListItem, causing screen readers to announce all list items as interactive/clickable.

Fix

Made the onClick listener conditional:

// Before
onClick={ onClick }

// After  
onClick={ (isClickable.value || attrs.onClick) ? onClick : undefined }

The listener is now only attached when:

  1. The item is actually clickable (isClickable.value — has a link, is selectable, etc.)
  2. OR a parent component has explicitly passed an @click handler (attrs.onClick)

The emit('click', e) still fires in both cases since it's inside the onClick function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][4.0.7] (a11y) NVDA detects VList and VListItem as 'clickable', even when no clickable elements exist

1 participant