Skip to content

fix(hiddenTextarea): use correct tabindex attribute to prevent keyboard focus #81

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.

Sign up for GitHub

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

Open
tyreer wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(hiddenTextarea): use correct tabindex attribute to prevent keyboard focus #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/calculateNodeHeight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function calculateAutoSizeStyle(
): React.CSSProperties {
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
hiddenTextarea.setAttribute('tab-index', '-1');
hiddenTextarea.setAttribute('tabindex', '-1');
hiddenTextarea.setAttribute('aria-hidden', 'true');
// fix: A form field element should have an id or name attribute
// A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.
Expand Down
32 changes: 31 additions & 1 deletion tests/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ describe('TextArea', () => {
});

it('should auto calculate height according to content length and autoSize property', async () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
const onInternalAutoSize = jest.fn();

const renderDemo = (
Expand Down Expand Up @@ -423,6 +423,36 @@ describe('TextArea', () => {
});
});

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');
});
});
Comment on lines +426 to +454
Copy link

@gemini-code-assist gemini-code-assist bot Feb 4, 2026

Choose a reason for hiding this comment

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

medium

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');
  });
});


describe('TextArea IME behavior', () => {
it('should ignore Enter during composition', () => {
const onPressEnter = jest.fn();
Expand Down