Как добавить tabIndex в MenuItem с пользовательским интерфейсом материала

Question

Я использую MenuItem с пользовательским интерфейсом материала для отображения списка, позволяющего пользователю выбрать язык.

Для обеспечения доступности мне нужно, чтобы пользователь мог просматривать список и выбирать один, но он пропускает этот список и переходит к следующему элементу в 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", добавленный к нему.