CODEWITHSUNDEEP
reactjsaccessibilityreact-bootstrap
knighter
knighter

Reputation: 1227

React-Bootstrap Popover not ADA compliant

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

When I use a Popover within an OverlayTrigger without an ID, it warns me in the console:

Warning: Failed propType: The prop 'id' is required to make 'Popover' accessible for users using assistive technologies such as screen readers

Problem is, when I add an ID to the Popover, I then get the following error on my accessibility scan:

Broken ARIA reference: An element has an aria-labelledby or aria-describedby value that does not match the id attribute value of another element in the page.

I am guessing it's happening because the element with that ID doesn't exist until the button is clicked. Am I missing something, or is this element not ADA compliant? Or, is this just a problem with the scan, and there's a better tool I should be using to prove my site is compliant?

Here is the code for an example site that demonstrates the issue. I have thrown it in a Fiddle, but it won't do you much good because if you run the accessibility tool on that, it will give you JSFiddle's errors rather than the ones for the relevant 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'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>

Upvotes: 7

Views: 1723

Answers (1)

dotherightthing
dotherightthing

Reputation: 23

I can confirm that the code is not compliant. You can double-check whether this code validates by:

  1. Inspecting this element in the developer console (before the button is clicked)
  2. Copying the rendered HTML to the clipboard
  3. Loading http://validator.nu and selecting the ‘Textfield’ option
  4. Pasting your HTML between the <body></body>tags
  5. Clicking ‘Validate’

As you’ll see, the code does not validate, because, as oobgam mentioned, the target ID is not initially present in the DOM.

There are a number of different approaches to fixing this. Once I understand which design pattern you’re trying to accessibly support, I can provide more concrete advice.

Can you please provide more information about why you chose this implementation? How do you see desktop and mobile users interacting with this, and to what end?

Quora has a good list of related patterns at What's the difference between a modal, a popover and a popup?

Upvotes: 0

Related Questions