Multiple themes: Theme includes Screen Reader Text inside Card

[dshanske]

The function twentysixteen_entry_meta includes the screen reader text inside the span property using the author mf class. That means when parsed it would say, 'Author David Shanske' The screen reader text should be inside the byline span but outside the author vcard span.

Added: this is in both Twenty Sixteen and Twenty Fifteen

[laurelfulford]

Thanks for this report, @dshanske!

I see what you mean. Unfortunately, this could be tricky to change without causing other issues -- moving <span class="screen-reader-text">Author </span> outside of the .author span would also place the author image between that string and the actual author name, making it less meaningful to screen readers.

I'm far from an expert on Microformats, but in this case, would adding role to that screen-reader-text be "correct"? Or am I totally reaching? :)

[sabernhardt]

With a (default) empty alt attribute, screen readers would ignore the avatar. However, the image could be moved before "Author" as well.

<span class="byline">
	<img alt="" src="..." class="avatar avatar-49 photo" loading="lazy" width="49" height="49">
	<span class="screen-reader-text">Author </span>
	<span class="author vcard">
		<a class="url fn n" href="http://localhost/svn/src/author/test/">test</a>
	</span>
</span>

Twenty Fifteen has a similar nesting, too.

[karmatosed]

Assigning to myself to see about testing towards a potential commit.

[karmatosed]

In testing I can confirm this issue is still valid and see that the patch does offer a solution which doesn't seem to impact the themes negatively. It is worth nothing this impacts both Twenty Sixteen and Twenty Fifteen so changing description to multiple themes.

[karmatosed]

@sabernhardt I just went to apply this patch and it seems to get rejected when applying to Twenty Fifteen. I am going to put a refresh request on it but if this is an issue you can't replicate let me know please.

[shailu25]

Patch Refreshed

[sabernhardt]

Thanks for refreshing the patch! Reviewing that, I found an extra space I should not have added after %1$s in Twenty Sixteen.

• That space is simply unnecessary following the avatar:
  <span class="byline"><img alt='' src='http://0.gravatar.com/avatar/0309805bf7f3bc7b9a30f6e5c772475a?s=49&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/0309805bf7f3bc7b9a30f6e5c772475a?s=98&#038;d=mm&#038;r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/> <span class="screen-reader-text">Author </span><span class="author vcard"><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>
• It makes the markup look wrong without avatars enabled:
  <span class="byline"> <span class="screen-reader-text">Author </span><span class="author vcard"><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>

[sabernhardt]

removes space between avatar and screen reader text

[sabernhardt]

Twenty Fifteen

• Before patch:
  <span class="byline"><span class="author vcard"><span class="screen-reader-text">Author </span><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>
• With 46233.3.patch:
  <span class="byline"><span class="screen-reader-text">Author </span><span class="author vcard"><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>

Twenty Sixteen, with avatars enabled

• Before patch:
  <span class="byline"><span class="author vcard"><img alt='' src='http://0.gravatar.com/avatar/0309805bf7f3bc7b9a30f6e5c772475a?s=49&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/0309805bf7f3bc7b9a30f6e5c772475a?s=98&#038;d=mm&#038;r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/><span class="screen-reader-text">Author </span> <a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>
• With 46233.3.patch:
  <span class="byline"><img alt='' src='http://0.gravatar.com/avatar/0309805bf7f3bc7b9a30f6e5c772475a?s=49&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/0309805bf7f3bc7b9a30f6e5c772475a?s=98&#038;d=mm&#038;r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/><span class="screen-reader-text">Author </span><span class="author vcard"><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>

Twenty Sixteen, without avatar

• Before patch:
  <span class="byline"><span class="author vcard"><span class="screen-reader-text">Author </span><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>
• With 46233.3.patch:
  <span class="byline"><span class="screen-reader-text">Author </span><span class="author vcard"><a class="url fn n" href="http://localhost/svn/src/author/test/">tester</a></span></span>

[karmatosed]

Thank you for the patch refresh and extensive testing. I am now going to look at getting this to commit.

[karmatosed]

In 58771:

Multiple themes Fixes theme screen reader including text inside card.

The function twentysixteen_entry_meta included screen reader text inside the span property using the author mf class. This resolves that in both Twenty Sixteen and Twenty Fifteen. It should have the screen reader text inside the byline span but outside the author vcard span.

Props dshanske, laurelfulford, sabernhardt, shilu25.
Fixes #46233.

[shailu25]

@karmatosed My Username is wrong which you have mentioned in prop list. It should be shailu25 instead of shilu25.

[karmatosed]

@shailu25 I apologise; I can fix that.