fix(hiddenTextarea): use correct tabindex attribute to prevent keyboard focus#81
fix(hiddenTextarea): use correct tabindex attribute to prevent keyboard focus#81tyreer wants to merge 1 commit intoreact-component:masterfrom
Conversation
Summary of ChangesHello @tyreer, 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 resolves a long-standing accessibility bug concerning the hidden textarea used for auto-sizing. By correcting an invalid HTML attribute ( Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
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
|
概览修复了隐藏textarea中的HTML属性错误，将无效的 变更
估计代码审查工作量🎯 2 (简单) | ⏱️ ~10 分钟 诗歌
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Important Action Needed: IP Allowlist UpdateIf your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:
Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist. 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}
There was a problem hiding this comment.
Code Review
This pull request correctly addresses an accessibility issue by fixing a typo in the tabindex attribute on a hidden textarea, preventing it from being keyboard-focusable. The change is simple and effective. The inclusion of new accessibility tests is a great addition, ensuring the fix is verified and preventing future regressions. I've added one suggestion to refactor the new tests for better conciseness and maintainability.
| describe('Hidden Textarea Accessibility', () => { | ||
| it('should have tabindex="-1" to prevent keyboard focus', () => { | ||
| // Create a textarea to trigger hidden textarea creation | ||
| const wrapper = document.createElement('textarea'); | ||
| calculateAutoSizeStyle(wrapper); | ||
|
|
||
| // Find the hidden textarea used for height measurement | ||
| const hiddenTextarea = document.querySelector( | ||
| 'textarea[name="hiddenTextarea"]', | ||
| ); | ||
|
|
||
| expect(hiddenTextarea).toBeInTheDocument(); | ||
| // Verify correct tabindex attribute (without hyphen) | ||
| expect(hiddenTextarea).toHaveAttribute('tabindex', '-1'); | ||
| // Ensure the invalid "tab-index" attribute is NOT present | ||
| expect(hiddenTextarea).not.toHaveAttribute('tab-index'); | ||
| }); | ||
|
|
||
| it('should have aria-hidden="true" for screen readers', () => { | ||
| const wrapper = document.createElement('textarea'); | ||
| calculateAutoSizeStyle(wrapper); | ||
|
|
||
| const hiddenTextarea = document.querySelector( | ||
| 'textarea[name="hiddenTextarea"]', | ||
| ); | ||
|
|
||
| expect(hiddenTextarea).toHaveAttribute('aria-hidden', 'true'); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
It's great that you've added tests for accessibility. To make the tests more concise and avoid duplicating the setup logic, consider combining these two related checks into a single test case. This would test the overall accessibility state of the hidden textarea in one place.
describe('Hidden Textarea Accessibility', () => {
it('should have correct accessibility attributes', () => {
// Create a textarea to trigger hidden textarea creation
const wrapper = document.createElement('textarea');
calculateAutoSizeStyle(wrapper);
// Find the hidden textarea used for height measurement
const hiddenTextarea = document.querySelector(
'textarea[name="hiddenTextarea"]',
);
expect(hiddenTextarea).toBeInTheDocument();
// Should have tabindex="-1" to prevent keyboard focus
expect(hiddenTextarea).toHaveAttribute('tabindex', '-1');
expect(hiddenTextarea).not.toHaveAttribute('tab-index');
// Should have aria-hidden="true" for screen readers
expect(hiddenTextarea).toHaveAttribute('aria-hidden', 'true');
});
});
1 participant
Summary
Fixes the hidden textarea keyboard focus issue by using the correct
tabindexattribute instead of the invalidtab-index(with hyphen).Problem
The hidden textarea used for auto-size height calculation is keyboard-focusable because
tab-indexis not a valid HTML attribute. Browsers ignore invalid attributes, leaving the element in the tab order.Changes
setAttribute('tab-index', '-1')→setAttribute('tabindex', '-1')insrc/calculateNodeHeight.tsxtabindex="-1"attributeRelated Issue
Fixes #80
Testing
All 55 existing tests pass
Added 2 new accessibility tests:
should have tabindex="-1" to prevent keyboard focusshould have aria-hidden="true" for screen readersLint passes (pre-existing warnings only)
Additional Context
This bug was introduced in v0.2.0 (
fee4e45, June 2020) and has been present for ~5.5 years.This PR complements #59 which added the
name="hiddenTextarea"attribute for form validation.Summary by CodeRabbit
发布说明
Bug 修复
测试