reactjs - react/jsx-a11y eslint 为控件/标签抛出意外错误

Question

这段代码:

      <PopupContent>
        <label htmlFor="popup" style={{ margintop : '0px', marginbottom : '0px' }}>log out</label>
        <button type="button" id="popup" onClick={this.logUserOut} />
      </PopupContent>

抛出这两个错误:

 84:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
 85:9  error  A control must be associated with a text label  jsx-a11y/control-has-associated-label

我错过了什么？

Answer 1

您通常不会使用元素来标记按钮。更常见的是，按钮内的文本用作其标签。尝试以下方法:

<button type="button id="popup" onClick={this.logUserOut}>log out</button>

其他选项可以是以下任何一种:

<button type="button" id="popup" onClick={this.logUserOut} aria-label="log out"/>

或

<span id="button-label" style={{ margintop : '0px', marginbottom : '0px' }}>log out</span>
<button type="button" id="popup" onClick={this.logUserOut} aria-labelledby="button-label" />

或

<button type="button id="popup" onClick={this.logUserOut}>
    <img src="icon.png" alt="log out"/>
</button>

或

<button type="button id="popup" onClick={this.logUserOut}>
    <span className="off-screen">log out</span>
</button>

.off-screen 的 CSS 类以可访问的方式将文本隐藏在屏幕外，例如不要使用显示:无；或可见性:隐藏；