Geek Answers Handbook

React-Bootstrap Popover does not meet ADA requirements

I use the Chrome toolbar from http://wave.webaim.org/extension/ to check the ADA compliance of my React-Bootstrap application.

When I use Popover inside an OverlayTrigger with no ID, it warns me in the console:

Warning: propType crashes: prop 'id' is needed to make Popover accessible to users using assistive technologies such as screen readers

The problem is that when I add an identifier to Popover, I get the following error when checking for availability:

ARIA link failed: element has an aria-labelledby or aria value that does not match the id attribute value of another element on the page.

I assume this happens because an element with this identifier does not exist until a button is clicked. Am I missing something, or is this item not ADA compliant? Or is it just a verification problem, and is there a better tool I should use to prove that my site is compatible?

Here is an example site example that demonstrates the problem. I threw it into Fiddle , but it will not bring you much benefit, because if you run the accessibility tool, it will give you JSFiddle errors, but with what for the corresponding code:

<!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 the contents of the popover</Popover> }> <Button bsStyle="primary">Click to see Popover</Button> </OverlayTrigger> ); } }); ReactDOM.render( <Overlay />, document.getElementById('container') ); </script> </body> </html>
+7
accessibility reactjs react-bootstrap
source share
1 answer

I can confirm that the code does not meet the requirements. You can double check if this code is checked:

  • Checking this item in the developer console (before clicking the button)
  • Copy displayed HTML to clipboard
  • Download http://validator.nu and select the option "Text field"
  • Insert HTML code between <body></body> tags
  • By clicking "Confirm"

As you will see, the code does not check, because, as mentioned by the obg, the target identifier is not initially present in the DOM.

There are several different approaches to fixing this. As soon as I understand which design template you are trying to get affordable support for, I can give more specific recommendations.

Can you provide more information on why you chose this implementation? How do you see how desktop and mobile users interact with this and for what purpose?

Quora has a good list of related templates. What is the difference between modal, popover and popup?

0
source share

More articles:


All Articles