airbnb / airbnb/babel-plugin-inline-react-svg
Adding aria-hidden attribute fails
- Dominant language
- JavaScript
- Stars
- 474
- Forks
- 90
- PR merge metrics
- No merged PRs in 30d
Description
Hello,
I'm trying to implement this plugin but it's failing on the following configuration:
```js
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
{
fill: 'currentColor',
},
{
'aria-hidden': true,
},
],
},
},
```
This produces a console error:

I also tried this configuration which produces the same thing:
```js
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
'fill="currentColor"',
'aria-hidden="true"',
],
},
},
```
I've taken a look at https://github.com/airbnb/babel-plugin-inline-react-svg/issues/33 and https://github.com/airbnb/babel-plugin-inline-react-svg/issues/42 which are both marked as fixed by https://github.com/airbnb/babel-plugin-inline-react-svg/pull/43 but I'm still seeing the issue present, although its no longer transforming to `ariaLabel` rather I believe the problem lies in the fact that its trying to use `'aria-label'` as the attribute.
Is my configuration incorrect? Or is this an actual issue?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the addAttributesToSVGElement configuration from the issue and compare the behavior with the fixes discussed in issues 33 and 42 and pull request 43. Trace how the plugin handles the aria-hidden attribute and verify that the generated React SVG preserves it without a console error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100