Testing with Fangs; edits to news list

nhall · Jan 5, 2016 · aadc60d · aadc60d
1 parent 8af762c
commit aadc60d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/components/html/news-list.html b/components/html/news-list.html
@@ -12,9 +12,9 @@ <h1 class="news_list_heading">News List Heading</h1>
         <article role="listitem" itemscope="itemscope" itemtype="http://schema.org/NewsArticle" class="news_list_item">
           <header class="news_list_item_header">
             <h2 itemprop="headline" class="news_list_item_heading">Lorem ipsum dolor sit amet</h2>
-            <div itemprop="author" class="news_list_item_author">Adam Drake</div>
+            <div itemprop="author" class="news_list_item_author"><span class="visually_hidden">By</span><span>Adam Drake</span></div>
             <div class="news_list_item_publish">
-              <time itemprop="datePublished" datetime="2015-12-28" class="news_list_item_publish_time">December 28, 2015</time>
+              <time itemprop="datePublished" datetime="2015-12-28" class="news_list_item_publish_time"><span class="visually_hidden">Published on</span><span>December 28, 2015</span></time>
             </div>
           </header>
           <div class="news_list_item_body">
@@ -37,9 +37,9 @@ <h2 itemprop="headline" class="news_list_item_heading">Lorem ipsum dolor sit ame
         <article role="listitem" itemscope="itemscope" itemtype="http://schema.org/NewsArticle" class="news_list_item">
           <header class="news_list_item_header">
             <h2 itemprop="headline" class="news_list_item_heading">Aenean imperdiet</h2>
-            <div itemprop="author" class="news_list_item_author">Jessica H. Lloyd</div>
+            <div itemprop="author" class="news_list_item_author"><span class="visually_hidden">By</span><span>Jessica H. Lloyd</span></div>
             <div class="news_list_item_publish">
-              <time itemprop="datePublished" datetime="2015-20-28" class="news_list_item_publish_time">December 20, 2015</time>
+              <time itemprop="datePublished" datetime="2015-20-28" class="news_list_item_publish_time"><span class="visually_hidden">Published on</span><span>December 20, 2015</span></time>
             </div>
           </header>
           <div class="news_list_item_body">
@@ -62,9 +62,9 @@ <h2 itemprop="headline" class="news_list_item_heading">Aenean imperdiet</h2>
         <article role="listitem" itemscope="itemscope" itemtype="http://schema.org/NewsArticle" class="news_list_item">
           <header class="news_list_item_header">
             <h2 itemprop="headline" class="news_list_item_heading">Maecenas nec odio et ante</h2>
-            <div itemprop="author" class="news_list_item_author">Jessica King</div>
+            <div itemprop="author" class="news_list_item_author"><span class="visually_hidden">By</span><span>Jessica King</span></div>
             <div class="news_list_item_publish">
-              <time itemprop="datePublished" datetime="2015-12-28" class="news_list_item_publish_time">December 20, 2015</time>
+              <time itemprop="datePublished" datetime="2015-12-28" class="news_list_item_publish_time"><span class="visually_hidden">Published on</span><span>December 20, 2015</span></time>
             </div>
           </header>
           <div class="news_list_item_body">

diff --git a/components/jade/_mixins/_news_list_article.jade b/components/jade/_mixins/_news_list_article.jade
@@ -2,9 +2,13 @@ mixin newsListArticle(title, author, dateTime, publishDate, img, description, re
 	article.news_list_item(role='listitem', itemscope, itemtype='http://schema.org/NewsArticle')
 		header.news_list_item_header
 			h2.news_list_item_heading(itemprop='headline') #{title}
-			.news_list_item_author(itemprop='author') #{author}
+			.news_list_item_author(itemprop='author')
+				span.visually_hidden By
+				span #{author}
 			.news_list_item_publish
-				time.news_list_item_publish_time(itemprop='datePublished', datetime="#{dateTime}") #{publishDate}
+				time.news_list_item_publish_time(itemprop='datePublished', datetime="#{dateTime}")
+					span.visually_hidden Published on
+					span #{publishDate}
 		.news_list_item_body
 			figure.news_list_item_figure
 				picture.news_list_item_picture