When I was scrolling the discover feed I saw this.
And this
So I started investigating.
The a tag with the blue link for the comment link in the second image is
<a href="/ketutdana/why-i-stopped-chasing-the-cool-stack-everyones-using-4aim#comments"
aria-label="Add a comment to post - Why I Stopped Chasing the " cool="" stack"="" everyone’s="" using"class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left ">
That looks all kinds of wrong.
And the a tag of the first image had a similar look.
After a little while I understood it is because of the quotes in the title of the post. It breaks the text out of the aria-label and creates this mess of attributes.
The bad design fix is to move the class attribute in front of the aria-label.
The better fix is to replace the double quotes in the aria-label.
I wouldn't have noticed it when it was a single comment link, but because there were two my brain switched to pattern recognition mode.
Top comments (2)
that's because the aria-label just spits out the text and the text isn't being encoded first.
It's a bug you should report on the dev.to forem github or whatever they use [i forget]
It's a common enough mistake on the frontend.
That is the reason I wrote the post.
If I only add it to the issue list less people are going to see it.