SVG attributes and ARIA attributes with different pattern

[alansouzati]

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.

[edvinerikson]

I think the aria-* is considered custom attributes. There is a section about it on the jsx-gotchas page.

[freddyrangel]

If I had to guess, the most likely reasoning here is that aria-* isn't completely supported by HTML5 spec. "There are many ARIA roles and properties that are not provided by native elements and attributes in HTML5": https://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/

[freddyrangel]

Just to reinforce this, here's where React checks for custom attributes (either data-* or aria-*):
https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L42

[freddyrangel]

Also see this explanation here: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/DOMProperty.js#L39

[gaearon]

Now that #5714 is merged, starting from the next release all SVG attributes will be passed through as is, just like data-*, aria-* attributes, and attributes on custom web components.

DOM attributes are treated differently because React occasionally normalizes their behavior across the browsers and does some other magic which it doesn't do for the cases above.

[alansouzati]

Thanks for working on this Dan @gaearon!

[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 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]

My bad, i tried with just role attribute and it works. aria-* attributes are not working though.

[alansouzati]

I'm not sure why it is not working for you. I've been using aria- for a long time now and it works just fine.

[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!