小编kni*_*ter的帖子

React-Bootstrap Popover不符合ADA

我正在使用http://wave.webaim.org/extension/上的Chrome工具栏来检查我的React-Bootstrap应用程序的ADA合规性.

当我在没有ID的OverlayTrigger中使用Popover时,它会在控制台中警告我:

警告:propType失败:需要prop'id'才能使用屏幕阅读器等辅助技术让用户可以访问'Popover'

问题是,当我向Popover添加ID时,我在可访问性扫描中遇到以下错误:

断开的ARIA引用:元素具有aria-labelledby或aria-describedby值,该值与页面中另一个元素的id属性值不匹配.

我猜它正在发生,因为具有该ID的元素在单击按钮之前不存在.我错过了什么,或者这个元素不符合ADA吗？或者,这只是扫描的一个问题,还有一个更好的工具我应该用来证明我的网站是否合规？

以下是演示此问题的示例站点的代码.我把它扔进了一个小提琴,但它对你没有多大帮助,因为如果你运行辅助工具,它会给你JSFiddle的错误,而不是相关代码的错误:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React-Bootstrap Popover Accessibility</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.js"></script>
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
  <div id="container"></div>

  <script type="text/babel">
    var Button = ReactBootstrap.Button;
    var OverlayTrigger = ReactBootstrap.OverlayTrigger;
    var Popover = ReactBootstrap.Popover;

    var Overlay = React.createClass({
      render: function() {
        return (
          <OverlayTrigger trigger="click" placement="right" overlay={
              <Popover title="Popover" id="popover-id">Here's the contents of the popover</Popover>
            }>
            <Button bsStyle="primary">Click to see Popover</Button>
          </OverlayTrigger> …

Run Code Online (Sandbox Code Playgroud)

accessibility reactjs react-bootstrap

kni*_*ter

lucky-day

7
推荐指数

1
解决办法

844
查看次数

nvm windows 安装节点卡在“正在提取...”上

我安装了最新的nvm Windows cli工具；当我尝试运行时，nvm install lts它显示“正在下载...”，然后显示“正在提取...”并冻结在那里。从不犯错，但也从不继续前进。如果我终止该进程并执行nvm list，它会列出 16.15.0。但如果我说nvm use 16.15.0，或nvm uninstall 16.15.0，它表示它尚未安装。

我尝试卸载 nvm 并从头开始；每次都得到相同的结果。我怎样才能通过“提取”？