Skip to content

fix(components): [autocomplete] fix incorrect aria-controls value#23350

Merged
btea merged 1 commit into
element-plus:devfrom
E66Crisp:patch-3
Jan 8, 2026
Merged

fix(components): [autocomplete] fix incorrect aria-controls value#23350
btea merged 1 commit into
element-plus:devfrom
E66Crisp:patch-3

Conversation

@E66Crisp
Copy link
Copy Markdown
Contributor

@E66Crisp E66Crisp commented Jan 8, 2026 •
edited by coderabbitai Bot
Loading

The aria-controls attribute was incorrectly set to the literal string 'id' instead of the actual listbox ID, breaking screen reader association.

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

Summary by CodeRabbit

Release Notes

  • Bug Fixes
    • Fixed autocomplete component's accessibility by ensuring the input field correctly references the listbox dropdown, improving screen reader compatibility and keyboard navigation.

✏️ Tip: You can customize this high-level summary in your review settings.

@E66Crisp
fix(components): [autocomplete] fix incorrect aria-controls value
1ed726e 
The aria-controls attribute was incorrectly set to the literal string 'id'
instead of the actual listbox ID, breaking screen reader association.
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 8, 2026 •
edited
Loading

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 8, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

The autocomplete component's onMounted hook has been modified to dynamically bind the aria-controls attribute to the generated listbox ID instead of using a static string value, ensuring the input element correctly references its associated listbox for accessibility.

Changes

Cohort / File(s) Summary
Accessibility Update
packages/components/autocomplete/src/autocomplete.vue		 Modified aria-controls attribute in onMounted lifecycle to reference dynamic listboxId.value instead of hardcoded 'id' string, improving ARIA accessibility binding to the listbox

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A whisper through the autocomplete flow,
Where aria-controls now dances just so,
From hardcoded strings to dynamic delight,
The listbox blooms bright with accessibility's light!
✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: fixing an incorrect aria-controls attribute value in the autocomplete component, which directly matches the changeset.
Description check ✅ Passed The description clearly explains the bug fix (aria-controls using literal 'id' string instead of actual ID) but includes only the template checklist without additional context, implementation details, or issue references.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 09e157c and 1ed726e.

📒 Files selected for processing (1)
  • packages/components/autocomplete/src/autocomplete.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
  • GitHub Check: Build windows-latest LTS
  • GitHub Check: Build ubuntu-latest LTS
  • GitHub Check: Lint
  • GitHub Check: SSR rendering test
  • GitHub Check: Unit Test (Current)
  • GitHub Check: Coverage
  • GitHub Check: Unit Test (New)
  • GitHub Check: Unit Test (LTS)
  • GitHub Check: build
  • GitHub Check: size-report
🔇 Additional comments (1)
packages/components/autocomplete/src/autocomplete.vue (1)

440-454: LGTM! Accessibility fix correctly implemented.

The change from a static 'id' string to the dynamic listboxId.value properly associates the input element with its listbox, fixing the screen reader relationship. The fix is correct and ensures WCAG compliance for the aria-controls attribute.

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jan 8, 2026

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23350

npm i https://pkg.pr.new/element-plus/element-plus@23350

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 1ed726e

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 8, 2026

🧪 Playground Preview: https://element-plus.run/?pr=23350
Please comment the example via this playground if needed.

rzzf
rzzf approved these changes Jan 8, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@rzzf rzzf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me, thanks for fixing it.

@btea btea merged commit 9765e8c into element-plus:dev Jan 8, 2026
20 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 8, 2026

@E66Crisp Thanks for your contribution! ❤️

@element-bot element-bot mentioned this pull request Jan 9, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@btea btea btea approved these changes

@rzzf rzzf rzzf approved these changes

Assignees

@E66Crisp E66Crisp

Labels

Contribution::Community Needs Review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@E66Crisp @btea @rzzf