Skip to content

Conversation

jsh1400
Copy link

@jsh1400 jsh1400 commented Oct 1, 2025

Motivation

Currently, <RcSelect /> does not accept the role prop as an input, which prevents developers from explicitly defining accessibility roles (e.g., role="combobox").
This causes accessibility checkers to report errors such as ARIA attribute is not allowed: aria-required="true" because the element lacks a supported role.

What I changed

  • Added role?: string to SelectProps type.
  • Passed the role prop down to the root element of RcSelect.

Impact

Developers can now explicitly set role="combobox" (or other ARIA-supported roles) on <Select />, ensuring proper accessibility compliance.

Related

  • Improves integration with libraries like Ant Design where aria-required is used on <Select />.

Summary by CodeRabbit

  • 新功能
    • Select 组件新增可选属性 role,用于指定 ARIA role,提升与读屏器等辅助技术的兼容性与可配置性。未设置时行为与以往一致,不影响现有使用。无需迁移;升级后可在表单或自定义下拉等场景按需配置 role 以满足无障碍要求。

Copy link

vercel bot commented Oct 1, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
select Ready Ready Preview Comment Oct 1, 2025 4:43am

Copy link
Contributor

coderabbitai bot commented Oct 1, 2025

Walkthrough

src/Select.tsx 中为 SelectProps 新增可选属性 role?: string,以支持将无障碍相关的 role 传递到 Select 组件。仅为公共 API 扩展,无行为或控制流改动,并附带与可访问性相关的代码注释。

Changes

Cohort / File(s) Change summary
Select 组件 API 扩展
`src/Select.tsx`
SelectProps<ValueType, OptionType> 中新增可选属性 role?: string,用于传递无障碍 role;无逻辑与控制流变更,添加了相关注释。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • zombieJ

Poem

我是小兔写新诗,轻点键帽不费力,
Select 添个 role 字,语义悄然更清晰。
无改流程风不起,只把接口多一笔,
无障之门更易启,蹦跳审阅笑嘻嘻。 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed 这个标题清晰地说明了主要变更,即在 RcSelect 组件中增加对 role 属性的支持以提升可访问性,准确传达了功能新增的核心目的,没有包含无关内容或模糊术语。
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c2dc268 and 94326ff.

📒 Files selected for processing (1)
  • src/Select.tsx (1 hunks)
🔇 Additional comments (2)
src/Select.tsx (2)

183-187: LGTM! 接口定义清晰且文档完善

新增的 role 属性类型正确,相关的 GitHub issue 链接提供了充足的上下文说明,有助于理解这个可访问性改进的动机。


718-718: LGTM! restProps 正确传递

role 属性通过 restProps 扩展运算符传递给 BaseSelect 组件,实现方式恰当。扩展运算符放置在开头,允许后续的显式属性在需要时进行覆盖。


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.

Copy link

Summary of Changes

Hello @jsh1400, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a crucial accessibility enhancement to the RcSelect component by enabling the explicit definition of the role attribute. Previously, the component lacked this capability, leading to accessibility errors related to ARIA attributes. By allowing developers to pass a role prop, this change ensures better compliance with accessibility standards and smoother integration with other UI libraries that rely on proper ARIA roles.

Highlights

  • Accessibility Role Support: The RcSelect component now supports a role prop, allowing developers to explicitly define accessibility roles for the select element.
  • Type Definition Update: The SelectProps interface in src/Select.tsx has been updated to include an optional role property of type string.
  • Enhanced ARIA Compliance: This change resolves issues where accessibility checkers reported errors due to missing or unsupported ARIA roles, improving compliance, especially with libraries like Ant Design.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request adds support for the role prop to enhance accessibility, which is a great improvement. The implementation correctly passes the prop down to the underlying DOM element. However, the explicit addition of role to the SelectProps interface appears to be redundant, as it should already be available through type inheritance. I've left a comment with a suggestion to remove the redundant type definition for better code clarity.

Comment on lines +182 to +187

// >>> Accessibility
// https://github.com/ant-design/ant-design/issues/46030
// https://github.com/ant-design/ant-design/issues/53713
// https://github.com/ant-design/ant-design/pull/55185#discussion_r2389642896
role?: string;

Choose a reason for hiding this comment

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

medium

While adding support for the role prop is a good accessibility improvement, explicitly adding it to the SelectProps interface appears to be redundant. The SelectProps interface inherits properties from BaseSelectProps, which in turn extends React.AriaAttributes. Since role is part of React.AriaAttributes, it should already be available on SelectProps through type inheritance.

To avoid redundancy and keep the interface definition cleaner, you can remove this explicit declaration. The functionality should remain the same.

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.

1 participant