HTML Props, custom attributes, and and aria-labels aren't being converted to valid HTML element tags

I’m having an issue with a few attributes that aren’t being converted into HTML compliant element attributes correctly and React is throwing an error: I added the fields below

• ariaHidden (Warning: Invalid ARIA attribute ariaHidden. Did you mean aria-hidden?)
• dataFaProcessed (React does not recognize the dataFaProcessed prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase datafaprocessed instead. If you accidentally passed it from a parent component, remove it from the DOM element.)
• dataPrefix (React does not recognize the dataPrefix prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dataprefix instead. If you accidentally passed it from a parent component, remove it from the DOM element.)
• dataIcon (React does not recognize the dataIcon prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dataicon instead. If you accidentally passed it from a parent component, remove it from the DOM element.)

I’m using React 16+, importing the Font Awesome 5 Pro Light icons explicitly from a custom directory (since its not available in the free version), and then passing them down as props to a containing component that has the FontAwesomeIcon component inside of it.

I added a brief example below

// FontAwesome is a webpack alias referring to where the custom font awesome assets are
// in this case it's where the light assets are stored
// Icons are passed as props when used
import { faRocket, faCog, faGroup, faBullhorn, faUser } from 'FontAwesome/light';

import FontAwesomeIcon from '@fortawesome/react-fontawesome';

export const Icon = ({ iconSize, icon, iconColor }) => (
  <div styleName={`${iconSize} ${iconColor}`}>
    <FontAwesomeIcon icon={icon} />
  </div>
);

[diligiant]

IMHO, we don’t need the fa “data” properties. With React, it’s just useless (we don’t query/manipulate the DOM this way) and it bloats the rendering for nothing.

@supercodepoet and @robmadole do you have ideas on how to have ci “block” when the console screams errors and warnings (like it does on my setup)? It’s important that we trust the release process. Please 😀

[diligiant]

@robmadole don’t worry, you’ll hear for me 😉