[Bug] Hidden textarea is keyboard-focusable due to "tab-index" typo (should be "tabindex")

[tyreer]

Bug Description

The hidden textarea created for auto-size height calculation is keyboard-focusable due to using the invalid HTML attribute tab-index (with hyphen) instead of the valid tabindex (without hyphen).

Since tab-index is not a recognized HTML attribute, the browser ignores it, leaving the hidden textarea in the tab order.

Docs on tabindex: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex

Steps to Reproduce

1. Render any <TextArea autoSize /> component
2. Tab through the page using keyboard navigation
3. Observe that focus lands on an invisible textarea element

Expected Behavior

The hidden textarea should not be keyboard-focusable.

Actual Behavior

Users can tab to an invisible <textarea name="hiddenTextarea"> element, causing confusion for keyboard and screen reader users.

Root Cause

In src/calculateNodeHeight.tsx, line 102:

// Current (invalid HTML attribute)
hiddenTextarea.setAttribute('tab-index', '-1');

// Should be (valid HTML attribute)
hiddenTextarea.setAttribute('tabindex', '-1');

Impact

• Accessibility: Screen reader users and keyboard navigators encounter an invisible, non-interactive element
• User Experience: Unexpected "stop" when tabbing through form fields

Bug Origin

• Introduced in: v0.2.0 (June 10, 2020)
• Commit: fee4e45
• Age: ~5.5 years

Proposed Fix

I have a PR ready with:

1. One-character fix: tab-index → tabindex
2. Tests to verify hidden textarea has correct tabindex="-1" attribute

[roztyree-eero]

@zombieJ Just notices this go in which was also something I had eyes on: ant-design/ant-design#56841

Any feedback on this issue / PR?

We're able to focus and see this box in our UI

Renders as

<textarea tab-index="-1" aria-hidden="true" name="hiddenTextarea" style="letter-spacing:normal;line-height:22px;padding-top:8px;padding-bottom:8px;font-family:&quot;Centra No2&quot;, sans-serif;font-weight:400;font-size:14px;font-variant:normal;text-rendering:auto;text-transform:none;width:50px;text-indent:0px;padding-left:8px;padding-right:40px;border-width:1px;box-sizing:border-box;word-break:normal;white-space:pre-wrap;
  min-height:0 !important;
  max-height:none !important;
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important;
  pointer-events: none !important;
"></textarea>

Changing tab-index="-1" to tabindex="-1" in dev tools allows the element to be hidden from tabbing