React自定义下拉组件在TalkBack下无法选择选项问题排查

你的问题确实和tabIndex="-1"直接相关，下面详细解释原因和解决办法：

1. tabIndex在移动无障碍中的作用 #

在安卓TalkBack这类移动屏幕阅读器中，tabIndex的核心作用是定义元素的可聚焦性：

• tabIndex="0"：元素会被纳入正常的焦点导航流，既可以通过TalkBack的手势（如滑动切换焦点）访问，也能被触摸激活，是自定义交互组件的标准设置。
• tabIndex="-1"：元素只能通过JS主动调用focus()方法聚焦，无法被TalkBack的默认导航手势选中，也不能通过触摸直接触发交互——这就是你在安卓上无法选择选项的原因。

桌面端可以通过键盘箭头键导航listbox内的option，但移动端没有物理键盘，TalkBack完全依赖元素的可聚焦性来识别可交互选项，tabIndex="-1"直接切断了这个交互路径。

2. 修复方案 #

把选项的tabIndex改为0，同时配合React逻辑管理焦点和交互状态，确保TalkBack能正确识别和操作组件：

修改后的React组件示例 #

import { useState, useRef, useEffect } from 'react';

const AccessibleSelect = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [selectedValue, setSelectedValue] = useState('Selected value here');
  const optionsRef = useRef([]);
  const buttonRef = useRef(null);

  // 处理按钮点击，切换下拉状态并管理焦点
  const handleButtonClick = () => {
    setIsExpanded(!isExpanded);
    setTimeout(() => {
      if (!isExpanded) {
        optionsRef.current[0]?.focus(); // 展开后聚焦第一个选项
      } else {
        buttonRef.current?.focus(); // 收起后回到按钮
      }
    }, 100);
  };

  // 处理选项选择
  const handleOptionSelect = (value) => {
    setSelectedValue(value);
    setIsExpanded(false);
    buttonRef.current?.focus();
  };

  // 支持键盘导航（兼容桌面+移动端虚拟键盘）
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (!isExpanded) return;
      const activeIndex = optionsRef.current.findIndex(el => el === document.activeElement);

      switch(e.key) {
        case 'ArrowDown':
          e.preventDefault();
          const nextIndex = (activeIndex + 1) % optionsRef.current.length;
          optionsRef.current[nextIndex].focus();
          break;
        case 'ArrowUp':
          e.preventDefault();
          const prevIndex = activeIndex === 0 ? optionsRef.current.length - 1 : activeIndex - 1;
          optionsRef.current[prevIndex].focus();
          break;
        case 'Enter':
        case ' ':
          e.preventDefault();
          handleOptionSelect(document.activeElement.textContent);
          break;
        case 'Escape':
          setIsExpanded(false);
          buttonRef.current?.focus();
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isExpanded]);

  return (
    <div className="select-list">
      <button
        ref={buttonRef}
        className="inputButton"
        aria-haspopup="listbox"
        aria-expanded={isExpanded}
        onClick={handleButtonClick}
      >
        {selectedValue}
      </button>
      {isExpanded && (
        <ul role="listbox" aria-label="选择一个选项">
          {['One', 'Two', 'Three', 'Four'].map((option, index) => (
            <li
              key={option}
              ref={el => optionsRef.current[index] = el}
              role="option"
              tabindex="0"
              aria-selected={selectedValue === option}
              onClick={() => handleOptionSelect(option)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  handleOptionSelect(option);
                }
              }}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default AccessibleSelect;

关键优化点 #

• 给listbox添加aria-label，明确组件用途，帮助TalkBack用户理解下拉的作用。
• 给选中的选项设置aria-selected="true"，让屏幕阅读器明确当前选中状态。
• 严格管理焦点：展开下拉时自动聚焦第一个选项，选中后回到按钮，确保用户始终知道自己在交互流程中的位置。
• 同时支持键盘和触摸交互，兼顾桌面与移动端的无障碍体验。

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