[英]react/jsx-a11y eslint throws unexpected errors for control/label
This code:这段代码:
<PopupContent>
<label htmlFor="popup" style={{ margintop : '0px', marginbottom : '0px' }}>log out</label>
<button type="button" id="popup" onClick={this.logUserOut} />
</PopupContent>
throws these two errors:抛出这两个错误:
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
What am I missing?我错过了什么?
看起来这个规则还没有完全成熟: 当它变得更稳定时,请参阅考虑添加jsx-a11y/control-has-associated-label
You don't typically use a element to label a button.您通常不使用元素来标记按钮。 More commonly, the text inside the button serves as its label.
更常见的是,按钮内的文本用作其标签。 Try something along the lines of:
尝试一些类似的东西:
<button type="button id="popup" onClick={this.logUserOut}>log out</button>
Other options could be any one of the following:其他选项可以是以下任一选项:
<button type="button" id="popup" onClick={this.logUserOut} aria-label="log out"/>
or或者
<span id="button-label" style={{ margintop : '0px', marginbottom : '0px' }}>log out</span>
<button type="button" id="popup" onClick={this.logUserOut} aria-labelledby="button-label" />
or或者
<button type="button id="popup" onClick={this.logUserOut}>
<img src="icon.png" alt="log out"/>
</button>
or或者
<button type="button id="popup" onClick={this.logUserOut}>
<span className="off-screen">log out</span>
</button>
where the CSS class of .off-screen hides the text off-screen in an accessible way eg do not use display: none;其中 .off-screen 的 CSS 类以一种可访问的方式隐藏屏幕外的文本,例如不要使用 display: none; or visibility: hidden;
或可见性:隐藏;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.