Unable to override the role attribute.

[justin-schroeder]

Describe the problem

When using the Font Awesome SVG with JS it is not possible to override the role attribute. Given the following:

<i class="fa fa-arrow-right" role="presentation" data-custom-attr="true"></i>

Font Awesome converts this into:

<svg class="svg-inline--fa fa-arrow-right fa-w-14" aria-hidden="true" data-prefix="fa" data-icon="arrow-right" role="img" data-custom-attr="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
    <path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
</svg>

Specifically the issue is role="img" was not overridden even though role="presentation" was defined on the icon.

What did you expect?

role="img" to be replaced with role="presentation".

<svg class="svg-inline--fa fa-arrow-right fa-w-14" aria-hidden="true" data-prefix="fa" data-icon="arrow-right" role="presentation" data-custom-attr="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
    <path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
</svg>

Ideally, <i> tag attributes would take precedent over attributes being injected on the svg. Most of them do, but to my knowledge at least the role attribute does not transfer.

What version and implementation are you using?

Version: 5.3.1
Browser and version: Chrome, safari, firefox

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

Reproducible test case

https://codepen.io/justin-schroeder/pen/NJeMGV

Pretty simple test case, you'll see role="presentation" is not being overridden, and I've broken out all the existing attributes on the element for easy viewing.

[robmadole]

Thanks @justin-schroeder ! We'll get it rolling.

[justin-schroeder]

We'll get it rolling.

😄 no pun intended i'm sure.

[robmadole]

That was intended! But you caught it 👏. My kids would say the appropriate response is 🙄

[arnorhs]

Any word on this issue?

It seems to still be behaving the same way. Also affecting the react version.

[tagliala]

This should have been fixed in version 5.8.2

I can see it is fixed by changing the Font Awesome version in the reproducible test case (https://codepen.io/justin-schroeder/pen/NJeMGV)

Could you please provide a reproducible test case?

(labeling and closing here, but feel free to comment, I will reopen if it is the case)

[joewhitsitt]

From the example in #14791 (comment)

Isn't it supposed to be presentation instead of img?

[joewhitsitt]

Sorry. I jumped to conclusions. The pen was set to 5.8.0. Changed it to 5.8.2 and I got this:

Thank you for this!

[justin-schroeder]

@joewhitsitt I just updated my codepen to 5.8.2 and saved it so the next person can see its been fixed too 👍

[tagliala]

Good, thanks for the feedback