fix: 解决无障碍输入框读屏两次问题 #6977
fix: 解决无障碍输入框读屏两次问题 #6977
Conversation
dosubot
bot
added
the
size:XS
|
|
Summary of ChangesHello @shuningYanger, 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! 此拉取请求旨在解决虚拟输入框在无障碍模式下的读屏重复问题。当一个设置了 Highlights
Using Gemini Code AssistThe 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
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 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
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough在虚拟输入组件中：1) 点击处理流程中在调用 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as ContentContainer
participant V as VirtualInput (组件)
rect rgb(235,245,255)
U->>C: 点击
C->>V: 调用 onClick (若存在)
V-->>C: 返回
note right of V #ccffdd: 新增副作用
V->>V: setHasFocus(true)
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| ref={contentRef} | ||
| aria-disabled={mergedProps.disabled} | ||
| aria-label={value || mergedProps.placeholder} | ||
| aria-label={value && mergedProps.placeholder} |
There was a problem hiding this comment.
你好，这个修改似乎没有完全达到预期的效果，并且引入了新的无障碍问题。
根据你的 PR 描述，期望的行为是：
- 当输入框没有内容（
value为空）时，读屏软件应该读出placeholder。 - 当输入框有内容时，为了避免重复朗读，应该只读出
value本身。
当前的修改 aria-label={value && mergedProps.placeholder} 会导致：
- 当
value为空字符串''时，aria-label的值也是''，这会导致读屏软件不会读出placeholder，这是一个功能退步。 - 当
value有内容时（例如'123'），aria-label会被设置为mergedProps.placeholder的值。这会导致读屏软件先读placeholder再读value（例如 “请输入内容，123”），这与“仅读屏一次”的目标不符。
正确的做法是仅在 value 为空时才提供 aria-label。请参考下面的代码建议进行修改。
aria-label={!value ? mergedProps.placeholder : undefined}
There was a problem hiding this comment.
value ? undefined : mergedProps.placeholder
我觉得这样更好
coderabbitai
bot
added
lgtm
dosubot
bot
added
size:XS
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/virtual-input/virtual-input.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/virtual-input/virtual-input.tsx (1)
src/components/virtual-input/demos/demo1.tsx (1)
value(7-94)
coderabbitai
bot
added
the
size:S
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #6977 +/- ##
=======================================
Coverage 92.94% 92.94%
=======================================
Files 337 337
Lines 7358 7359 +1
Branches 1860 1834 -26
=======================================
+ Hits 6839 6840 +1
- Misses 483 511 +28
+ Partials 36 8 -28 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
dosubot
bot
added
size:XS
| } | ||
| mergedProps.onClick?.(e) | ||
| mergedProps.onClick?.(e); | ||
| setHasFocus(true) |
There was a problem hiding this comment.
这里应该调用下 setFocus 比较合理，一个是有个判断，第二个是会触发 onFocus 外部回调
3 participants
无障碍模式下虚拟输入框的元素设置了role=textbox，如果同时设置了aria-label，输入框中的元素会读两遍
修改了该问题，兼容没有输入内容可以读出placeholder，有输入内容时仅读屏一次
Summary by CodeRabbit
发版说明
新功能
Bug 修复