fix: aria-selected should not always set to false under combobox mode #1077
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/OptionList.tsx (1)
136-145: 新增的isAriaSelected函数很好地解决了问题这个新函数很好地解决了 combobox 模式下
aria-selected属性的问题。对于 combobox 模式，它通过不区分大小写的比较来确定选中状态，这提高了用户体验。对于其他模式，它保持了原有的逻辑。建议：考虑将
String(value).toLowerCase()的结果缓存，以避免在每次比较时重复执行这个操作。例如：const lowerValue = String(value).toLowerCase(); return lowerValue === searchValue.toLowerCase();这可能会略微提高性能，特别是在处理大量选项时。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/OptionList.tsx (3 hunks)
🧰 Additional context used
🔇 Additional comments (3)
src/OptionList.tsx (3)
127-132: 修改后的isSelected函数符合预期这个更改很好地解决了 combobox 模式下的问题。现在，当模式为 'combobox' 时，函数始终返回 false，这有助于解决 PR 中提到的
aria-selected属性设置问题。对于其他模式，函数仍然检查值是否存在于rawValues中，保持了原有的逻辑。这个修改符合 PR 的目标，提高了组件的可访问性。
294-294:aria-selected属性的更新符合预期在渲染函数中，
aria-selected属性现在使用新的isAriaSelected函数来设置，而不是之前的isSelected函数。这个变更出现在第 294 行和第 379 行。这个修改确保了
aria-selected属性在所有模式下（包括 combobox 模式）都能正确设置。这对于提高组件的可访问性非常重要，特别是对于使用屏幕阅读器的用户。这个变更很好地实现了 PR 的目标，提高了组件的整体可访问性。
Also applies to: 379-379
127-145: 总体评价：改进了可访问性，同时保持了视觉一致性这次更改主要集中在改进
aria-selected属性的处理，特别是在 combobox 模式下。主要变更包括：
- 修改了
isSelected函数，使其在 combobox 模式下始终返回 false。- 新增了
isAriaSelected函数，根据不同模式正确处理选中状态。- 更新了渲染函数，使用新的
isAriaSelected函数来设置aria-selected属性。这些变更有效地解决了 PR 中提到的问题，提高了组件的可访问性，同时保持了视觉上的一致性。代码结构良好，变更最小化且集中，这有助于维护代码的可读性和可维护性。
总的来说，这是一个高质量的改进，它增强了组件的可访问性，同时保持了现有功能的完整性。
Also applies to: 294-294, 379-379
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1077 +/- ##
=======================================
Coverage 98.23% 98.24%
=======================================
Files 39 39
Lines 1474 1482 +8
Branches 439 418 -21
=======================================
+ Hits 1448 1456 +8
Misses 26 26 ☔ View full report in Codecov by Sentry. |
This is a
bug fix related to accessibility
Related Issues
This can fix the issue that aria-select is always set to false in autoComplete component (under combobox mode)
ant-design/ant-design#48036
Background
Although no option is considered permanently "selected" under the combobox mode (autoComplete), if the aria-selected is affected by this then it could violate the accessibility issue, hence I made a change to determine accessibnility selection (set aria-selected attribute) while still maintain the visual consistency
Summary by CodeRabbit
OptionList组件以改善选择状态和可访问性，特别是在“combobox”模式下。isAriaSelected函数，以支持更好的无障碍功能。aria-selected属性现在使用isAriaSelected，确保无障碍状态反映最新逻辑。