javascript 如何修复“按钮”交互角色必须是可聚焦的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56441825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix 'button' interactive role must be focusable
提问by Mark James
I have list of dropdown options which user can select.
我有用户可以选择的下拉选项列表。
optinos in dropdown are made with tag: < a href>:
下拉列表中的 optinos 是用标签制作的：<a href>：
<a onClick={() => handleSelect(filter)} role="button">
{filter.name}
</a>
Problem is cus I must add tabIndex="0" or -1, to fix error from Eslint.
问题是我必须添加tabIndex="0" or -1，以修复来自 Eslint 的错误。
But When I add tabIndex=0, my button does not work anymore.
但是当我添加时tabIndex=0，我的按钮不再起作用。
Is there are any other way to fix this error?
有没有其他方法可以修复此错误？
This is how looks dropdown component:
这是下拉组件的外观：
<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>
回答by Watchmaker
Buttons are interactive controls and thus focusable. If the button role is added to an element that is not focusable by itself (such as
<span>,<div>or<p>) then, the tabindex attribute has to be used to make the button focusable.
按钮是交互式控件，因此是可聚焦的。如果将按钮角色添加到自身不可聚焦的元素（例如
<span>,<div>或<p>），则必须使用 tabindex 属性使按钮可聚焦。
The HTML attribute
tabindexcorresponds to the attributetabIndexin React.
HTML 属性
tabindex对应tabIndex于 React 中的属性。
https://reactjs.org/docs/dom-elements.html
https://reactjs.org/docs/dom-elements.html
So I think @S.. answer is correct:
所以我认为@S .. 答案是正确的：
<a
onClick={() => handleSelect(filter)}
role="button"
tabIndex={0}
>
{filter.name}
</a>
回答by S..
Add a tabindex:
添加标签索引：
<a onClick={() => handleSelect(filter)} role="button" tabIndex={i}>
{filter.name}
</a>
after first adding an iterator to your map: (filter, i)
在首先向地图添加迭代器之后： (filter, i)
回答by Hilal Aissani
<a
dataTest="create-event-link"
className="c-link c-link--text"
onClick={() => setCreateEvent(!createEvent)}
role="button"
>
