Skip to content

fix(theme): remove invalid role and tabindex from VPSidebarItem wrapper - #5371

Open
jibin7jose wants to merge 1 commit into
vuejs:mainfrom
jibin7jose:fix-vpsidebaritem-html
Open

fix(theme): remove invalid role and tabindex from VPSidebarItem wrapper#5371
jibin7jose wants to merge 1 commit into
vuejs:mainfrom
jibin7jose:fix-vpsidebaritem-html

Conversation

@jibin7jose

@jibin7jose jibin7jose commented Aug 13, 2026

Copy link
Copy Markdown

Description

This PR fixes an issue where the VPSidebarItem component generated invalid HTML, which caused W3C validation errors and created an improper accessibility tree.

Specifically, the outer wrapper <div class="item"> was being assigned role="button" and tabindex="0". Because this wrapper contains the heading (h2-h6) and the caret toggle button (<div class="caret" role="button">), it resulted in:

  1. An h2 element being illegally nested inside a button.
  2. A focusable button (caret) being illegally nested inside another button.

This PR removes the role and tabindex attributes from the outer .item wrapper (and cleans up the unused itemRole computed property).

Linked Issues

fixes #5366

Additional Context

  • Mouse functionality is fully preserved (clicking anywhere on the item still bubbles up and toggles the section).
  • Keyboard functionality is preserved (the .caret button remains the accessible, focusable element for screen readers to toggle the section).
  • The HTML perfectly passes the W3C Nu Html Checker without any nested button or heading errors.

Tip

The author can publish a preview release by commenting /publish after creating the PR.

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.

VPSidebarItem creates invalid HTML

1 participant