Replace arrow up right html entity with icon

[Infinite-Null]

Fixes: #63175

What?

Replaced HTML Unicode symbol as an icon.

Screenshot:

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Infinite-Null]

Hi @richtabor and @afercia,
I have changed the HTML entity with an SVG Icon please test and review it at your convenience.
Thank You!

[Mamaduka]

@Infinite-Null, I think the last comment suggests the resolution path - #63175 (comment).

[Infinite-Null]

@Infinite-Null, I think the last comment suggests the resolution path - #63175 (comment).

Hi @Mamaduka,

Apologies, but I didn’t quite understand. Based on the comment #63175 (comment), it seems that we should replace the Unicode character with an icon, which is what I’ve implemented in this PR.

Could you please let me know if I’ve misunderstood anything? I really appreciate your help!

[stokesman]

I think "resulting in no change visually" is the acceptance criteria though perhaps 100% parity is not required.

Here’s what I see in Chrome on macOS

Trunk	This branch

I suspect that’s not close enough. There are weight, size, relative position differences and even line-height is impacted. It helps to open both in an image app (or separate tabs) to flip back and forth between them to notice all this.

While I'm sure this can be made close enough, I'm not sure it’s worth doing. I’ve read through the issue. In this component the arrow is not announced by screen readers so what is this fixing?

I definitely agree that we should fix the Site Hub’s title link. Although, there I’d favor removing the icon because the link is not external—it just opens in a new window/tab. Using the same icon feels wrong to me at least technically but maybe the meaning isn’t strictly "external" for most folks and it’s more "opens in a new tab". Also, if that’s a problem, it’s also present in the longstanding "View post" and "Preview in new tab" buttons of the editor.

[Infinite-Null]

While I'm sure this can be made close enough, I'm not sure it’s worth doing. I’ve read through the issue. In this component > the arrow is not announced by screen readers so what is this fixing?

Hi @stokesman,
Based on the issue description, I noticed this comment:

Also, unicode characters may be rendered in a slighly different way on different operating systems.

Considering this, I thought it would be a good improvement to replace the unicode character with an SVG to ensure consistent rendering. Let me know your thoughts!

[Infinite-Null]

For now, in this PR I have removed the :: after element.