Skip to content

docs: show useId with aria-labelledby#3393

Open
MukundaKatta wants to merge 1 commit into
vuejs:mainfrom
MukundaKatta:codex/docs-useid-aria-labelledby
Open

docs: show useId with aria-labelledby#3393
MukundaKatta wants to merge 1 commit into
vuejs:mainfrom
MukundaKatta:codex/docs-useid-aria-labelledby

Conversation

@MukundaKatta
Copy link
Copy Markdown

Description of Problem

The accessibility guide shows aria-labelledby with hard-coded id values. That works for a single page example, but reusable Vue components can be rendered multiple times and would then duplicate IDs.

Proposed Solution

Add a short note and component example that uses useId() to generate stable, per-instance IDs for aria-labelledby.

Fixes #1510

Additional Information

Verification:

  • pnpm build
  • git diff --check

Attempted:

  • pnpm type currently fails in .vitepress/config.ts with TS2352 for an existing plugin tuple cast unrelated to this page.
  • pnpm exec prettier --check src/guide/best-practices/accessibility.md could not run because Prettier is not installed as a project dependency.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 15, 2026

Deploy Preview for vuejs ready!

Name Link
🔨 Latest commit c544834
🔍 Latest deploy log https://app.netlify.com/projects/vuejs/deploys/6a06d781be19b30007cdb456
😎 Deploy Preview https://deploy-preview-3393--vuejs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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.

aria-labelledby example with id and components

1 participant