Как исправить «кнопку» интерактивная роль должна быть фокусируемой

Question

У меня есть список выпадающих опций, которые пользователь может выбрать.

Оптино в выпадающем списке сделаны с тегом: :

<a onClick={() => handleSelect(filter)} role="button">
   {filter.name}
</a>

Проблема в том, что я должен добавить tabIndex="0" or -1, чтобы исправить ошибку от Eslint.

Но когда я добавляю tabIndex=0, моя кнопка больше не работает.

Есть ли другой способ исправить эту ошибку?

Вот так выглядит выпадающий компонент:

<ul name="filters" className="dropdown">
    {filterOptions.map((filter) => (
      <li
        key={filter.id}
        defaultChecked={filter.name}
        name={filter.name}
        className={`option option-${filter.selected ? 'selected' : 'unselected'}`}
      >
        <span className={`option-${filter.selected ? 'checked-box' : 'unchecked-box'} `} />

        <a onClick={() => handleSelect(filter)} role="button">
          {filter.name}
        </a>
      </li>
    ))}
  </ul>