Skip to content

fix(components): [rate] avoid capturing focus when disabled#23589

Merged
rzzf merged 2 commits into
element-plus:devfrom
snowbitx:fix/rate-disabled
Feb 5, 2026
Merged

fix(components): [rate] avoid capturing focus when disabled#23589
rzzf merged 2 commits into
element-plus:devfrom
snowbitx:fix/rate-disabled

Conversation

@snowbitx
Copy link
Copy Markdown
Contributor

@snowbitx snowbitx commented Feb 2, 2026 •
edited by coderabbitai Bot
Loading

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.

Refer to this PR

Summary by CodeRabbit

  • Accessibility Improvements
    • Rating control now removes focus when disabled, preventing accidental keyboard focus.
    • Added explicit aria-disabled state so assistive technologies recognize the disabled status.
    • Existing keyboard handling remains intact to avoid unexpected behavior changes.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 2, 2026 •
edited
Loading

@snowbitx snowbitx changed the title fix(components): [select] avoid capturing focus when disabled fix(components): [rate] avoid capturing focus when disabled Feb 2, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Feb 2, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

The rate component now sets tabindex dynamically based on rateDisabled and adds an aria-disabled binding; the keyboard handler/gate logic was not changed.

Changes

Cohort / File(s) Summary
Rate Component Accessibility
packages/components/rate/src/rate.vue		 Changed tabindex="0" to :tabindex="rateDisabled ? undefined : 0" and added :aria-disabled="rateDisabled". No changes to key handler guard logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • Dsaquel
  • btea

Poem

🐇 I tweak the tab and softly hide,
aria speaks what states decide,
keys remain where checks reside,
a cautious hop with ears held wide. ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: making the rate component avoid capturing focus when disabled through dynamic tabindex binding.
Description check ✅ Passed The PR description includes all required checklist items marked as complete and provides a reference to a related prior change for context.
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.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

  • ✨ 136.113.208.247/32 (new)
  • 34.170.211.100/32
  • 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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 Feb 2, 2026 •
edited
Loading

Open in StackBlitz

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

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

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

commit: cdf6358

coderabbitai[bot]
coderabbitai Bot reviewed Feb 2, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/components/rate/src/rate.vue (1)

276-303: ⚠️ Potential issue | 🟠 Major

Disabled state can still update value via keyboard.

With the disabled guard removed, the slider can still change value if it remains focused when disabled or is focused programmatically. Reintroduce the guard to prevent updates while disabled.

✅ Suggested fix 
 function handleKey(e: KeyboardEvent) {
+  if (rateDisabled.value) {
+    return
+  }
   const code = getEventCode(e)
   const step = props.allowHalf ? 0.5 : 1
   let _currentValue = currentValue.value

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 2, 2026 •
edited
Loading

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

btea
btea reviewed Feb 3, 2026
View reviewed changes
Comment thread packages/components/rate/src/rate.vue
@rzzf rzzf merged commit 8ad85b3 into element-plus:dev Feb 5, 2026
17 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 5, 2026

@snowbitx Thanks for your contribution! ❤️

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

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@btea btea btea approved these changes

@rzzf rzzf rzzf approved these changes

Assignees

@snowbitx snowbitx

Labels

Contribution::Community Needs Review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@snowbitx @btea @rzzf