airbnb / airbnb/babel-plugin-inline-react-svg

Adding aria-hidden attribute fails

Open
#106 4 comments 0 reactions 0 assignees View on GitHub
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:
Screen Shot 2021-05-04 at 8 26 38 AM

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.