Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(a11y): assign correct role when collapsible prop is 'icon' or 'header' #353

Merged
merged 1 commit into from
Oct 28, 2024

Conversation

aojunhao123
Copy link
Contributor

@aojunhao123 aojunhao123 commented Oct 24, 2024

•当 collapsible 为 'icon' 或 'header' 时,确保为折叠区域正确赋值 role="button" 属性。
•通过此修复,改进了组件在屏幕阅读器和键盘导航下的表现,确保更好的无障碍支持。

QQ_1729791265760

Summary by CodeRabbit

  • 新功能
    • 增强了 CollapsePanel 组件的可访问性,添加了适当的 ARIA 角色属性。
  • 改进
    • 根据组件状态和属性条件设置 tabIndex,确保头部在非交互状态下的正确行为。

Copy link

vercel bot commented Oct 24, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
collapse ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 24, 2024 5:40pm

Copy link

coderabbitai bot commented Oct 24, 2024

Walkthrough

此次更改涉及对 src/Panel.tsxCollapsePanel 组件的 headerProps 对象的修改。新增的 role 属性根据 accordion 属性的值条件性地设置为 'tab''button',以增强组件的可访问性。此外,之前对 headerPropsrole 属性的赋值已被移除,表明了角色的确定和赋值方式的重构。tabIndex 属性根据 disabled 状态条件性地设置,确保头部在不可交互时的正确行为。

Changes

文件 更改摘要
src/Panel.tsx 修改 headerProps,新增 role 属性,条件性设置为 'tab''button',移除之前的 role 赋值,调整 tabIndex 根据 disabled 状态。

Poem

在兔子洞里欢快跳,
新的角色真妙妙。
头部可达性更提升,
让每个用户都欢笑。
轻松点击不再难,
兔子们乐在其中,
让我们一起庆祝这变化! 🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 44a5d48 and 6a03faf.

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

86-86: 正确设置了 ARIA role 属性

根据组件的 accordion 属性动态设置了正确的 ARIA role,这样可以让屏幕阅读器更好地理解和描述组件的用途。当作为手风琴组件使用时设置为 tab,否则设置为 button,这符合 WAI-ARIA 规范。


86-92: 建议验证无障碍功能的完整性

虽然 role 的设置是正确的,但建议进行全面的无障碍测试以确保:

  1. 屏幕阅读器能正确朗读组件状态
  2. 键盘导航功能正常工作
  3. ARIA 属性在不同状态下的值是否正确
✅ Verification successful

Let me check the keyboard event handling implementation to complete the verification.


Let me try a different pattern to check the keyboard handler implementation.


无障碍功能已经实现完善

代码已经实现了完整的无障碍支持:

  • 正确设置了 ARIA 属性:aria-expandedaria-disabled 用于状态传达
  • 合理使用了语义化角色:role="tab"/role="button"/role="tabpanel"/role="tablist"
  • 实现了键盘导航:Enter 键可以触发面板展开/收起
  • 适当处理了 tabIndex:禁用状态下设为 -1,启用状态下设为 0
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查组件中的其他无障碍相关属性
echo "检查 ARIA 属性的使用情况..."
rg "aria-|role=|tabIndex" 

echo "检查键盘事件处理..."
rg "onKeyDown|onKeyPress|onKeyUp"

Length of output: 2160


Script:

#!/bin/bash
# Check keyboard event handler implementation
ast-grep --pattern 'handleKeyDown($$$) {
  $$$
}'

# Check if there are any keyboard accessibility tests
rg -A 5 "keyboard|keydown|keypress" tests/

Length of output: 96


Script:

#!/bin/bash
# Check keyboard event handler with a more specific pattern
ast-grep --pattern 'const handleKeyDown = $_'

# Also check the Panel component implementation for keyboard handling
rg -A 3 "handleKeyDown" src/Panel.tsx

Length of output: 627


89-92: 验证交互行为的一致性

collapsibleHeadercollapsibleIcon 都为 false 时才添加点击事件和 tabIndex,这种处理方式需要确认是否符合预期,建议:

  1. 验证这种条件是否覆盖了所有用例
  2. 确认在不同的 collapsible 值下,组件的行为是否一致
  3. 测试 disabled 状态下的键盘导航行为
✅ Verification successful

Let me gather more information about the test coverage and implementation details.


Let me gather one final piece of information about the test coverage for different interaction scenarios.


交互行为验证结果正常

根据代码分析和测试用例验证,当前的交互行为实现是合理的:

  1. collapsible 属性有三种状态(header/icon/disabled)的完整测试覆盖
  2. 点击事件和键盘导航在不同 collapsible 值下的行为一致且符合预期:
    • header 模式:仅标题可点击
    • icon 模式:仅图标可点击
    • disabled 模式:完全禁用交互
  3. 键盘导航在 disabled 状态下通过 tabIndex=-1 正确处理
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查 collapsible 属性的使用场景
echo "检查 collapsible 属性的相关代码..."
rg "collapsible.*=|collapsibleHeader|collapsibleIcon"

Length of output: 2507


Script:

#!/bin/bash
# 检查测试用例中的相关行为验证
echo "检查测试用例中的行为验证..."
rg -A 5 "describe\('prop: collapsible" tests/

# 检查 Panel 组件中的点击处理逻辑
echo -e "\n检查点击处理逻辑..."
ast-grep --pattern 'const handleItemClick = $_'

Length of output: 1335


Script:

#!/bin/bash
# 检查交互相关的测试用例
echo "检查交互测试用例..."
rg -B 2 -A 5 "it\('.*trigger|it\('.*click" tests/

# 检查键盘导航相关的测试
echo -e "\n检查键盘导航测试..."
rg -A 5 "keyboard|keyDown|tabIndex" tests/

Length of output: 3609


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@aojunhao123
Copy link
Contributor Author

@afc163 大佬有空的话review一下这个pr

@afc163
Copy link
Member

afc163 commented Oct 25, 2024

我看是这个标签报错。

image

Copy link

codecov bot commented Oct 25, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.13%. Comparing base (44a5d48) to head (6a03faf).
Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #353   +/-   ##
=======================================
  Coverage   99.13%   99.13%           
=======================================
  Files           5        5           
  Lines         116      116           
  Branches       42       42           
=======================================
  Hits          115      115           
  Misses          1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@aojunhao123
Copy link
Contributor Author

aojunhao123 commented Oct 25, 2024

我看是这个标签报错。

image

QQ_1729824601136
非语义化元素使用aria属性时,需要配合role一起使用

@aojunhao123
Copy link
Contributor Author

@afc163 大佬,这个pr有结论了吗

@afc163 afc163 merged commit d403776 into react-component:master Oct 28, 2024
9 checks passed
@aojunhao123 aojunhao123 deleted the a11y branch November 2, 2024 13:15
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.

2 participants