reactjs / react-a11y

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

Example of the reporter option #159

Closed adriennemcd closed 5 years ago

adriennemcd commented 5 years ago

hi all, I have react-a11y working and am seeing warnings in my browser console. I'd like to experiment with the reporter option, however I can't get it to work. Can you provide an example of the correct format?

I've tried passing in an object or a function to the reporter key, but I know I'm not getting it. It's also unclear to me what values the reporter keys should have. Everything I've tried has resulted in the following error:

Uncaught (in promise) TypeError: r is not a function
    at e.<anonymous> (a11y.js:190)
    at e.<anonymous> (test.js:229)
    at r (runtime.js:65)
    at Generator._invoke (runtime.js:303)
    at Generator.e.(:5000/meded/anonymous function) [as next] (http://[our site]/dist/vendor.js:33:82860)
    at r (asyncToGenerator.js:17)
    at asyncToGenerator.js:28
adriennemcd commented 5 years ago

After talking it over with a colleague, I understand better how the reporter option works; that it's like a callback in which I can modify how the warning is logged. Here's what I came up with to get it to look like what I wanted:

const reporterFn = (warning) => {
    const { msg, url, ...restOfWarning} = warning;
    const properties = ['AX', 'children', 'displayName', 'severity', 'tagName'];
    properties.map(property => {
      delete restOfWarning[property];
    });
    console.groupCollapsed('%c a11y issue', 'color: white; background-color: #e02549; padding: 3px 10px 3px 5px;');
    console.log(msg);
    console.log(restOfWarning);
    console.log('More info:', url);
    console.groupEnd();
  };