Attribute support: aria-labelledby

[chipcullen]

Per the summary:

Handles namespaced attributes (xlink), and other non-react attributes/tags, on component mounting, so the returned jsx will compile cleanly with babel.

One issue that we are running into, however, is using the aria-labelledby attribute. When authoring SVGs, this attribute can be used on the root <svg> element to aid screenreaders correctly announce what the SVG is supposed to be. Example usage:

<svg viewBox="0 0 126 126" xmlns="http://www.w3.org/2000/svg" aria-labelledby="close__title">
  <title id="close__title">
    Close
  </title>
  <path d="..." />
</svg>

(More background on this can be found on Tip #3 here)

React handles the aria-labelledby attribute just fine when the SVG is pasted directly into JSX - but, when loaded via svg-react-loader you get this console error:

Unknown props `ariaLabelledby` on <svg> tag. Remove these props from the element.

Would it be possible to amend SVG react loader to handle aria-labelledby, in addition to the other attributes it handles?

[jhamlet]

@chipcullen Try using the next version of svg-react-loader npm install svg-react-loader@next and let me know if that solves your issue. (make sure you read the README since some things have changed -- no need for babel for instance)

I've done away with handling special attributes, and that version has a better API for special casing these kind of things (if that becomes necessary).

Thanks,

;-j

[chipcullen]

@jhamlet I just tried, and unfortunately, no dice :(

I ran npm install svg-react-loader@next, which, finished with this in the console:

└── [email protected]  invalid

And when I run npm info svg-react-loader version I get

0.3.7

Even though the directory in /node_modules/ is clearly the 0.4.0 version (the package.json indicates this)

Anyway, I can run webpack just fine, but I still get this console error in the browser:

Warning: Unknown prop `ariaLabelledby` on <svg> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in svg (created by ... )

When inspecting the SVG in my browser dev tools, the aria-labelledby attribute doesn't even appear, though, that may be due to React suppressing the attribute.

If it helps, here is the React file with JSX:

And here is what I'm seeing in the browser vs what is in the SVG file:

And here is the browser console:

[jhamlet]

@chipcullen thanks for the details.

I don't know what npm's issue is, but it looks like you're getting the correct version.

As a quick test (sorry, my bandwidth is limited at this time) can you try outputting an svg element through React (not using svg-react-loader, just plain react) with a property ariaLabelledby and then with ariaLabelledBy to see which one works?

The processor recognizes hyphens as places to camelCase things, however there is a way to special-case certain attribute names (look at the propsMap query parameter).

[cliener]

I've recreated everything as per @chipcullen above and carried on with ^^.

I dropped an SVG inline into a JSX file and got the following:

• ariaLabelledby: nothing
• ariaLabelledBy: nothing
• aria-labelledby: aria-labelledby

All of above rendered through svg-react-loader return nothing.

[anderskristiansen]

I am having the same issue as @chipcullen.
I am getting Warning: Unknown prop 'ariaLabel' on <svg> tag. and Warning: Unknown prop 'dataSrc' on <img> tag..
I am using version 0.4.0-beta.2´. (Although npm states 0.3.7´)

Dropping in the SVG directly the attributes are printed. I've tried to use the ´propsMap´ query parameter, but It didn't do any difference. (I don't know if I used it correctly)