[wp-trac] [WordPress Trac] #46291: Twenty Nineteen: Avoid nested links in comment meta section of the comment in TwentyNineteen_Walker_Comment class
WordPress Trac
noreply at wordpress.org
Wed Feb 20 23:26:10 UTC 2019
#46291: Twenty Nineteen: Avoid nested links in comment meta section of the comment
in TwentyNineteen_Walker_Comment class
------------------------------+-----------------------------
Reporter: iamdmitrymayorov | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Bundled Theme | Version:
Severity: normal | Keywords:
Focuses: |
------------------------------+-----------------------------
If a user adds his URL when leaving a comment, his avatar and name becomes
a link to the URL he provided. It appears though that there is a bug in
`TwentyNineteen_Walker_Comment` class that produces a markup with nested
links in this case. This is how the output markup looks like:
{{{
<div class="comment-author vcard">
<a href="https://wordpress.org/" rel="external nofollow"
class="url"><img alt='' src='...' srcset='... 2x' class='avatar avatar-60
photo' height='60' width='60' />
<b class="fn"><a href='https://wordpress.org/' rel='external nofollow'
class='url'>A WordPress Commenter</a></b>
<span class="screen-reader-text says">says:</span>
</a>
</div><!-- .comment-author -->
}}}
And if you inspect the code in Chrome, it gets even funkier. Chrome
automatically closes the first link tag and adds an empty `<b
class="fn"></b>` inside:
https://monosnap.com/file/HjGPfmwFKO4fUxUl0Avl7ExMTnlr4w#embed
I understand original idea: put an image and an author name inside one
link tag, which is a valid HTML5 markup.
However it doesn't work because `get_comment_author_link()` is used to
output the comment author name. This function falls back to
`get_comment_author()` if there is no URL, but in our case it breaks the
markup when the URL is present.
We can easily fix it by using `get_comment_author()` instead. The comment
author name will still be clickable and focusable because it will be
inside the link tag.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/46291>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list