fix(picker): add aria-* for datepicker

[shenjunjian]

PR

为 date-picker组件添加 aira-* 的辅助信息

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Bug Fixes
  • Improved accessibility in the date picker component with enhanced screen reader support through proper ARIA attributes and labels on interactive controls and panel elements.

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

[coderabbitai]

Walkthrough

The changes enhance the date picker component's accessibility by introducing ARIA attributes that establish relationships between form controls and the picker panel. A unique panel identifier is generated using nanoid and bound to relevant DOM elements.

Changes

Cohort / File(s)	Summary
Accessibility State Management packages/renderless/src/picker/vue.ts	Added ariaPanelId reactive state field initialized with unique identifier generated via nanoid.api.nanoid(8). Imported nanoid utility.
ARIA Attributes & Accessibility Bindings packages/vue/src/picker/src/pc.vue	Added ARIA attributes to main and range inputs (role="combobox", aria-haspopup="dialog", aria-autocomplete="none", aria-owns/aria-controls); Added ARIA labels to clear and trigger icons; Added accessibility attributes to panel component (role="dialog", aria-modal="false", aria-label, id binding to ariaPanelId).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A picker grows more friendly today,
With ARIA labels lighting the way,
Unique panel IDs dance and bind,
Screen readers will thank this kind,
Accessibility hops forward with pride! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: adding ARIA accessibility attributes to the datepicker component. It is specific, concise, and directly reflects the primary objective of the changeset.
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 docstrings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/vue/src/picker/src/pc.vue`:
- Around line 165-168: There's a typo in the ARIA attribute on the panel:
replace the invalid aria-lable with the correct aria-label attribute on the
element that has role="dialog" (the same element using aria-modal="false" and
:id="state.ariaPanelId") so assistive technologies can read the panel name;
update the attribute name only (keep the same value) to aria-label.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Fix ARIA attribute typo on panel.

aria-lable is invalid and won’t be read by assistive tech.

🔧 Proposed fix

-      aria-lable="picker-panel"
+      aria-label="picker-panel"

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	role="dialog"
	aria-modal="false"
	aria-lable="picker-panel"
	:id="state.ariaPanelId"
	role="dialog"
	aria-modal="false"
	aria-label="picker-panel"
	:id="state.ariaPanelId"

🤖 Prompt for AI Agents

In `@packages/vue/src/picker/src/pc.vue` around lines 165 - 168, There's a typo in
the ARIA attribute on the panel: replace the invalid aria-lable with the correct
aria-label attribute on the element that has role="dialog" (the same element
using aria-modal="false" and :id="state.ariaPanelId") so assistive technologies
can read the panel name; update the attribute name only (keep the same value) to
aria-label.