Is this a bug report?
Yes.
Did you try recovering your dependencies?
Yes.
Environment
System:
OS: macOS 10.14.3
CPU: x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
Binaries:
Node: 11.7.0 - /usr/local/bin/node
npm: 6.8.0 - /usr/local/bin/npm
Browsers:
Chrome: 72.0.3626.109
Firefox: 63.0.3
Safari: 12.0.3
npmPackages:
react: ^16.7.0 => 16.7.0
react-dom: ^16.7.0 => 16.7.0
react-scripts: ^2.1.5 => 2.1.5
npmGlobalPackages:
create-react-app: Not Found
Steps to Reproduce
-
Spin up a new cra project with npx create-react-app [project-name]
-
Edit the src/logo.svg file to look like this.
-
Import the SVG element into the src/App.js file as a component with this:
import { ReactComponent as BadAttribute } from "./src/logo.svg".
-
Replace the <Logo /> component in src/App.js with this:
<BadAttribute className="App-logo" />
-
run npm run start or yarn start
Expected Behavior
An inline, accessible SVG element with the correctly spelled aria-labelledby attribute should be rendered in the DOM.
Actual Behavior
An inline SVG element with an incorrectly spelled aria-labelled-by attribute is rendered in the DOM.
This warning is produced in the console.
Reproducible Demo
Clone this repo to see the bug in action (fresh CRA project).
Thoughts
I have a feeling this is related to SVGR, but I was unable to track down exactly where or how the magic is happening here. If someone can point me in the right direction, I'd love to investigate further and contribute.
In the repo linked above, I also included a correctly rendered aria-labelledby attribute on the component. This is a fine alternative for now, but I think one of the nice things about SVG is that it's a package deal. With the attribute added in JSX, it refers to markup outside the current working context, which isn't terrible but it's also not ideal. It could potentially mean refactoring every SVG that's included in the app for accessibility.
Is this a bug report?
Yes.
Did you try recovering your dependencies?
Yes.
Environment
System:
OS: macOS 10.14.3
CPU: x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
Binaries:
Node: 11.7.0 - /usr/local/bin/node
npm: 6.8.0 - /usr/local/bin/npm
Browsers:
Chrome: 72.0.3626.109
Firefox: 63.0.3
Safari: 12.0.3
npmPackages:
react: ^16.7.0 => 16.7.0
react-dom: ^16.7.0 => 16.7.0
react-scripts: ^2.1.5 => 2.1.5
npmGlobalPackages:
create-react-app: Not Found
Steps to Reproduce
Spin up a new cra project with
npx create-react-app [project-name]Edit the
src/logo.svgfile to look like this.Import the SVG element into the
src/App.jsfile as a component with this:import { ReactComponent as BadAttribute } from "./src/logo.svg".Replace the
<Logo />component insrc/App.jswith this:<BadAttribute className="App-logo" />run
npm run startoryarn startExpected Behavior
An inline, accessible SVG element with the correctly spelled
aria-labelledbyattribute should be rendered in the DOM.Actual Behavior
An inline SVG element with an incorrectly spelled
aria-labelled-byattribute is rendered in the DOM.This warning is produced in the console.
Reproducible Demo
Clone this repo to see the bug in action (fresh CRA project).
Thoughts
I have a feeling this is related to SVGR, but I was unable to track down exactly where or how the magic is happening here. If someone can point me in the right direction, I'd love to investigate further and contribute.
In the repo linked above, I also included a correctly rendered
aria-labelledbyattribute on the component. This is a fine alternative for now, but I think one of the nice things about SVG is that it's a package deal. With the attribute added in JSX, it refers to markup outside the current working context, which isn't terrible but it's also not ideal. It could potentially mean refactoring every SVG that's included in the app for accessibility.