React组件tabIndex仅0生效，Tab键跳转异常原因咨询

Let's break down the two problems you're facing and walk through practical fixes for each:

1. Why you need two Tabs to reach the first coin item #

The culprit here is your empty close button: <button className="close-modal-x">. Buttons are naturally focusable by default, so when you tab out of the search input, the first focus lands on this button. That's why you need a second Tab to get to the first list item.

Quick fix for the double Tab: #

Make the close button non-focusable (since modals typically use the Esc key for closing anyway) by adding tabIndex="-1" to it. This removes it from the regular Tab flow:

<button className="close-modal-x" onClick={this.props.closeSquareEdit} tabIndex="-1" />

If you still want keyboard access to the close button for accessibility, you can keep it focusable (tabIndex="0") and add a handler for Enter/Space keys to trigger the close action. But for most modal patterns, using Esc is standard, so making it non-focusable is a safe call.

2. Why Tab jumps out of the coins list after selecting an item #

Your <li> elements have tabIndex={i} (positive values), which overrides the natural focus order. Worse, once you tab past the last list item, there are no more focusable elements in the modal—so the browser jumps to the next focusable thing outside (like the address bar).

Accessibility-friendly approach for list navigation #

Instead of using Tab to move between list items, follow standard UI patterns: use arrow keys for navigating within the list, and trap focus inside the modal so it can't escape to the browser.

Here's how to adjust your code step by step:

First, add state to track the focused list item index:

constructor(props) {
  super(props);
  this.state = {
    coins: [],
    focusedIndex: 0 // Tracks which list item is currently focused
  };
}

Update your render method to handle dynamic tabIndex and focus states:

render() {
  const { coins, focusedIndex } = this.state;
  return (
    <section id="search-modal">
      <header className="search-header">
        <input 
          id="coin-search" 
          type="text" 
          placeholder="Search" 
          onChange={() => this.handleChange()}
          onKeyDown={this.handleInputKeyDown} // Handle arrow key navigation
          autoFocus // Auto-focus input when modal opens
        />
        <button 
          className="close-modal-x" 
          onClick={this.props.closeSquareEdit}
          tabIndex="-1"
          onKeyDown={(e) => {
            // Allow closing via Enter/Space if needed
            if (e.key === 'Enter' || e.key === ' ') {
              this.props.closeSquareEdit();
            }
          }}
        />
      </header>
      <ul className="coins-list">
        {coins && coins.length > 0 ? coins.map((coin, i) => (
          <li 
            key={coin.id} 
            tabIndex={i === focusedIndex ? 0 : -1}
            onClick={() => this.handleSelect(coin)}
            onKeyDown={(e) => {
              // Let users select items with Enter/Space
              if (e.key === 'Enter' || e.key === ' ') {
                this.handleSelect(coin);
              }
            }}
            className={i === focusedIndex ? 'focused' : ''} // Add visual focus styling
          >
            {coin.name} <span className="symbol">({coin.symbol})</span>
          </li>
        )) : null}
      </ul>
    </section>
  );
}

Add the arrow key navigation handler:

handleInputKeyDown = (e) => {
  const { coins, focusedIndex } = this.state;
  if (!coins || coins.length === 0) return;

  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault(); // Stop page scrolling
      this.setState(prev => ({
        focusedIndex: (prev.focusedIndex + 1) % coins.length
      }), () => {
        // Focus the newly selected list item
        document.querySelectorAll('.coins-list li')[this.state.focusedIndex].focus();
      });
      break;
    case 'ArrowUp':
      e.preventDefault();
      this.setState(prev => ({
        focusedIndex: prev.focusedIndex === 0 ? coins.length - 1 : prev.focusedIndex - 1
      }), () => {
        document.querySelectorAll('.coins-list li')[this.state.focusedIndex].focus();
      });
      break;
    case 'Escape':
      // Close modal when Esc is pressed
      this.props.closeSquareEdit();
      break;
  }
};

Finally, add focus trapping to keep focus inside the modal:

componentDidMount() {
  document.addEventListener('keydown', this.handleFocusTrapping);
}

componentWillUnmount() {
  document.removeEventListener('keydown', this.handleFocusTrapping);
}

handleFocusTrapping = (e) => {
  const focusableElements = document.querySelectorAll('#search-modal input, #search-modal li[tabIndex="0"]');
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  if (e.key === 'Tab') {
    // Cycle focus back to last element when Shift+Tab from first
    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    } 
    // Cycle focus back to first element when Tab from last
    else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }
};

Key improvements you'll get: #

• No more double Tab to reach the first list item
• Intuitive arrow key navigation (standard for dropdown/modal lists)
• Focus stays trapped inside the modal—Tab won't jump to the browser address bar
• Visual focus feedback (add CSS for .focused to highlight selected items)
• Better accessibility for keyboard-only users

内容的提问来源于stack exchange，提问作者Leon Gaban