MUI v4 Autocomplete自定义ListboxComponent如何实现箭头导航无障碍？

你的问题根源是自定义ListboxComponent时，破坏了MUI内置的键盘导航事件绑定和无障碍属性传递，以下是具体解决方法：

方法一：最简方式——保留默认子组件结构 #

如果只是需要自定义外层ul的样式或属性，直接将props完整传递并保留原children即可，默认的箭头键导航和无障碍逻辑会正常生效：

<Autocomplete
  ListboxComponent={(props) => <ul {...props}>{props.children}</ul>}
  // 其他必填props（如options、renderInput等）
/>

方法二：自定义li时保留所有核心属性 #

如果必须替换默认选项容器为原生li，要确保完整传递原组件的所有属性（包括事件、ARIA属性、焦点控制属性），不能丢失关键逻辑：

<Autocomplete
  ListboxComponent={(props) => (
    <ul {...props}>
      {props.children.map((element) => (
        <li
          {...element.props}
          // 根据选中状态设置tabIndex：选中项可直接聚焦，未选中项仅通过键盘导航聚焦
          tabIndex={element.props['aria-selected'] ? 0 : -1}
          // 可添加自定义样式，不要覆盖原事件
          style={{ ...element.props.style, padding: '0.5rem' }}
        >
          {element.props.children}
        </li>
      ))}
    </ul>
  )}
  // 其他props
/>

更推荐的方案：用renderOption自定义选项 #

如果你的需求只是自定义选项的内容或样式，不要替换ListboxComponent，而是使用renderOption prop，这样完全不会破坏内置的无障碍和导航逻辑：

<Autocomplete
  renderOption={(props, option) => (
    <li {...props}>
      {/* 自定义选项内容，比如添加图标、额外信息 */}
      <span>{option.label}</span>
      <span style={{ marginLeft: '0.5rem', color: '#666' }}>ID: {option.id}</span>
    </li>
  )}
  options={yourOptionsArray}
  renderInput={(params) => <TextField {...params} label="选择项" />}
/>

关键注意事项 #

• 必须保留外层ul的role="listbox"属性（通过{...props}自动传递），这是无障碍识别列表框的核心标识
• 子选项必须保留role="option"和aria-selected属性，确保屏幕阅读器能识别选项状态
• 不要覆盖原组件的onKeyDown、onClick等事件，这些是MUI处理箭头键导航的核心逻辑

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