SVG attributes and ARIA attributes with different pattern

I have the following JSX sample, which is a SVG element:

    <svg className={className} viewBox="0 0 48 48" version="1.1"
      onClick={this.props.onClick} aria-label="Some random label">
      <g fill="none">
        <line strokeWidth="2" x1="24" y1="14" x2="24" y2="34"/>
        <line strokeWidth="2" x1="14" y1="24" x2="34" y2="24"/>
      </g>
    </svg>

In raw HTML strokeWidth is represented as stroke-width. It seems to me that all JSX attributes follow the camel-case format. So, I immediately thought on adding ariaLabel instead of aria-label.

Question: Is there a pattern for JSX attributes? If yes, why aria-* does not follow this pattern?

In fact, I like the idea of having stroke-* so that I don’t have to preprocess my raw svg to reactjs.

I understand that this could be the expected behavior, but I’m just trying to understand why the patterns are different for aria and svg.

[dwightjack]

Hi, related to this issue I’m trying to use a SVG with aria-* attributes as a component and React is complaining about unknown props on <svg> tag:

<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 602.1 48.9" aria-labelledby="logo-expanded-title">
    <title id="logo-expanded-title">My title</title>
    <path role="presentation" d="..."/>
</svg>

Looking at the docs it seems both role and aria-* attributes are not allowed on SVG, but to enhance accessibility they’d be a good practice.

Right now my workaround is to use dangerouslySetInnerHTML but that’s not ideal.

[dwightjack]

Hi,

My bad! I investigated further the issue and I’ve found this issue. Looks like is something related to the loader I’m using.

Sorry!