如何使用材质UI将tabIndex添加到MenuItem

Question

我正在将MenuItem与Material UI一起使用，以显示供用户选择语言的列表。

为了实现可访问性，我需要用户能够在列表中切换并选择一个，但是它跳过了该列表，转到DOM中的下一个元素。

    <MenuItem
        tabIndex="0"
        className="menu-item"
        key={key}
        selected={i18n.language === key}
        onClick={() => {
            handleLanguageChange(key);
                }}
            >
            <ListItemText tabIndex="0" primary={languages[key]} />
            <ListItemIcon className="icon">
                <CheckCircleIcon className={'checkmark'} fontSize="small" />
            </ListItemIcon>
    </MenuItem>

该屏幕快照来自开发人员工具，显示了标签索引，但似乎可能需要将其放在<li>内的子元素上。

是否有其他方法可以使tabIndex工作？

Answer 1

列出需要添加到列表中的元素tabindex="-1"。