fix(dropdown): add aria information to the dropdown component

[shenjunjian]

PR

为dropdown 添加 aria-* 信息

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

• Accessibility Improvements
  • Added ARIA role attributes to dropdown menu and menu item components.
  • Added descriptive labels to dropdown control icons for improved usability.

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

[coderabbitai]

Walkthrough

The changes update accessibility attributes across dropdown components. The aria-haspopup attribute value in the renderless trigger logic is changed from 'list' to 'menu', and ARIA roles (menu, menuitem) and aria-labels are added to dropdown template elements to improve semantic accessibility.

Changes

Cohort / File(s)	Summary
Renderless dropdown logic packages/renderless/src/dropdown/index.ts	Changed aria-haspopup attribute value from 'list' to 'menu' in initAria function for the trigger element
Dropdown component templates packages/vue/src/dropdown/src/pc.vue, packages/vue/src/dropdown-menu/src/pc.vue, packages/vue/src/dropdown-item/src/pc.vue	Added ARIA attributes: role="menu" to dropdown menu root (ul), role="menuitem" to dropdown item root (li), and aria-label="down" to caret button and icon elements in main dropdown trigger

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• All changes are straightforward accessibility attribute additions with no behavioral or logic modifications
• No new component interactions or control flow alterations
• Changes are homogeneous across files (consistent pattern of adding standard ARIA attributes)

Poem

🐰 Accessibility blooms bright,
Menu roles align just right,
Down arrow labels help all see,
A dropdown more accessible, wheee! 🎯

Pre-merge checks and finishing touches

✅ 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 accurately summarizes the main change: adding ARIA information to the dropdown component, which matches all the file modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch shen/actionmenu-aria

---

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

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5ab0209 and 21ca14d.

📒 Files selected for processing (4)

• packages/renderless/src/dropdown/index.ts (1 hunks)
• packages/vue/src/dropdown-item/src/pc.vue (1 hunks)
• packages/vue/src/dropdown-menu/src/pc.vue (1 hunks)
• packages/vue/src/dropdown/src/pc.vue (3 hunks)

⏰ 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). (2)

• GitHub Check: PR E2E Test (pnpm test:e2e3)
• GitHub Check: verify-main-build

🔇 Additional comments (3)

packages/renderless/src/dropdown/index.ts (1)

182-182: LGTM! Correct ARIA semantics for menu popup.

The change from 'list' to 'menu' correctly aligns with the ARIA roles being added elsewhere in this PR (role="menu" on the dropdown menu, role="menuitem" on items). This follows ARIA best practices for menu button patterns.

packages/vue/src/dropdown-item/src/pc.vue (1)

33-33: LGTM! Proper ARIA role for menu items.

Adding role="menuitem" correctly identifies this element as a menu item within the menu structure. This aligns with the role="menu" being added to the parent dropdown menu.

packages/vue/src/dropdown-menu/src/pc.vue (1)

21-21: LGTM! Correct ARIA role for menu container.

Adding role="menu" properly identifies this as a menu container. This works correctly with the role="menuitem" attributes being added to the dropdown items.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Replace generic aria-label="down" with descriptive, internationalized labels.

The aria-label="down" additions describe the icon's visual direction rather than the element's purpose. For accessibility:

1. Use action-oriented labels: Screen reader users need to understand what the element does, not what it looks like. Consider "Open menu", "Toggle dropdown", or similar.

2. Internationalize the labels: The hardcoded English string conflicts with the i18n TODO comment (line 93). Use a translatable string or prop.

3. Apply to interactive elements only: Decorative icons should be aria-hidden="true", with the aria-label on the containing button/trigger instead.

🔎 Suggested approach

For split button (line 155):

-<ButtonIconDown class={visibleClass} aria-label="down"></ButtonIconDown>
+<ButtonIconDown class={visibleClass} aria-hidden="true"></ButtonIconDown>

And add aria-label to the button itself:

 <tiny-button
   ref="trigger"
   type={type}
   size={size}
   class={`tiny-dropdown__caret-button ${triggerClass}`}
   disabled={disabled}
-  reset-time={0}>
+  reset-time={0}
+  aria-label={t('ui.dropdown.toggleMenu')}>

Similar patterns apply to the other locations (lines 173, 200, 209). Consider adding an ariaLabel prop to allow customization while providing a sensible default.

Also applies to: 172-174, 199-200, 208-209

🤖 Prompt for AI Agents

packages/vue/src/dropdown/src/pc.vue around line 155 (and similarly lines
172-174, 199-200, 208-209): the ButtonIconDown currently uses aria-label="down"
which describes appearance not action and is hardcoded English; change so the
icon itself is decorative (add aria-hidden="true" and remove aria-label) and
move a descriptive, action-oriented, translatable aria-label onto the
interactive button/trigger (e.g., "Open menu" or "Toggle dropdown") by adding an
ariaLabel prop with a sensible i18n default and using that prop on the button;
apply the same pattern to the other listed locations so all interactive controls
use an i18n-aware ariaLabel prop and icons are aria-hidden.