reactjs – React-Bootstrap Popover不符合ADA
我使用
http://wave.webaim.org/extension/的Chrome工具栏来检查我的React-Bootstrap应用程序的ADA合规性.
当我在没有ID的OverlayTrigger中使用Popover时,它会在控制台中警告我:
问题是,当我向Popover添加ID时,我在可访问性扫描中遇到以下错误:
我猜它正在发生,因为具有该ID的元素在单击按钮之前不存在.我错过了什么,或者这个元素不符合ADA吗?或者,这只是扫描的一个问题,还有一个更好的工具我应该用来证明我的网站是否合规? 以下是演示此问题的示例站点的代码.我已经把它扔进了Fiddle,但它对你没有多大好处,因为如果你运行辅助工具,它会给你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> ); } }); ReactDOM.render( <Overlay />,document.getElementById('container') ); </script> </body> </html>
我可以确认代码不符合要求.您可以仔细检查此代码是否通过以下方式验证:
>在开发者控制台中检查此元素(在单击按钮之前) 正如您将看到的,代码不会验证,因为正如oobgam所提到的,目标ID最初并不存在于DOM中. 有许多不同的方法来解决这个问题.一旦我了解了您试图获得哪种设计模式,我就可以提供更具体的建议. 您能否提供有关您选择此实施的原因的更多信息?您如何看待桌面和移动用户与此交互,以及到底是什么? Quora在What’s the difference between a modal,a popover and a popup?有一个很好的相关模式列表 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ruby-on-rails – Rails ActiveRecord:find中的多个条件
- 【OGG】Oracle GoldenGate12c静默安装
- vue中v-for加载本地静态图片方法
- 从同一个visual c#项目创建两个(稍微)不同的可执行文件
- react-native – 我什么时候应该调用realm.close()?
- 万亿级艺术服务新蓝海:美艺加要做第一个吃螃蟹的人?
- .Net(c#)汉字和Unicode编码互相转换实例
- c# – Windows商店应用程序无法通过AppContainerCheck
- 正则表达式 – 使用htaccess将路径目录附加到url
- 在xml不能添加或不想添加的情况下,在activity中新建按钮,