reactjs / react-a11y

Identifies accessibility issues in your React.js elements
MIT License
2.34k stars 126 forks source link

When I report with severity error, I get JSON serialization errors for the DOM node #158

Open kldavis4 opened 5 years ago

kldavis4 commented 5 years ago
es6.promise.js:116 Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at console.window.console.error (<anonymous>:39:101)
    at es6.promise.js:110
    at module.exports (_perform.js:3)
    at es6.promise.js:104
    at module.exports (_invoke.js:5)
    at queue.(:3000/anonymous function) (http://localhost:3000/main.bundle.js:128224:7)
    at Number.run (_task.js:21)
    at MessagePort.listener (_task.js:25)

Unhandled promise rejection Error: [react-a11y]: Button - You have an `onClick` handler but did not define an `onKeyDown`, `onKeyUp` or `onKeyPress` handler. Add it, and have the "Space" key do the same thing as an `onClick` handler. See 'https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls' for more info. Element: 
  <button aria-controls="gadgetSelectionPanel" aria-expanded="false" type="submit"><div class="md-ink-container"></div><i aria-hidden="true" class="md-icon material-icons icon icon--default button__icon">add</i><span class="button__label">Add Item</span></button>
    at throwError (options.js:96)
    at options.js:146
    at A11y.<anonymous> (a11y.js:190)
    at Suite._callee$ (test.js:229)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/main.bundle.js:284032:21)
    at step (asyncToGenerator.js:17)
    at asyncToGenerator.js:28
    at run (es6.promise.js:75)
    at es6.promise.js:92
    at MutationObserver.flush (_microtask.js:18)
    at MutationObserver.nrWrapper ((index):19)

Here is my config:

  a11y(React, ReactDOM, {
    filterFn: (componentName, elementId, msg) => {
      switch (componentName) {
        // Ignore react-md components
        case 'AccessibleFakeButton':
        case 'FieldCell':
        case 'FontIcon':
        case 'Overlay':
        case 'SelectionControl':
        case 'SelectionControlGroup':
        case 'TextField':
        case 'TransitionGroup':
          return false
        default:
          return true
      }
    },
    rules: {
      'aria-role': 'error',
      'aria-unsupported-elements': 'error',
      'click-events-have-key-events': 'error',
      'hidden-uses-tabindex': 'error',
      'img-redundant-alt': 'error',
      'img-uses-alt': 'error',
      'interactive-supports-focus': 'error',
      'label-has-for': 'error',
      'mouse-events-have-key-events': 'error',
      'no-access-key': 'error',
      'no-hash-ref': 'error',
      'no-onchange': 'error',
      'onclick-uses-role': 'error',
      'tabindex-no-positive': 'error',
      'tabindex-uses-button': 'error'
    }
  })

This is in a current version of Chrome on OSX

erin-doyle commented 5 years ago

@kldavis4 I don't have enough info from this stacktrace to have any ideas as to what the problem is. I'm not sure if perhaps there is some series of promises that your code is in at the time the react-a11y error is thrown that causes problems. Can you try turning off all of the rules and turning them each on one by one to see if the issue has to do with a certain rule or a certain block of your code that is triggering the error that is causing the problem?