Make timeline a list of articles

src/components/conversation/conversation.vue

@@ -60,7 +60,7 @@
           v-if="shouldShowAncestors"
           class="thread-ancestors"
         >
-          <div
+          <article
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
@@ -130,7 +130,7 @@
                 </i18n-t>
               </div>
             </div>
-          </div>
+          </article>
         </div>
         <thread-tree
           v-for="status in showingTopLevel"
@@ -168,6 +168,7 @@
         v-if="isLinearView"
         class="thread-body"
       >
+        <article>
           <status
             v-for="status in conversation"
             :key="status.id"
@@ -196,6 +197,7 @@
             @goto="setHighlight"
             @toggleExpanded="toggleExpanded"
           />
+        </article>
       </div>
     </div>
   </div>

src/components/thread_tree/thread_tree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="thread-tree">
+  <article class="thread-tree">
     <status
       :key="status.id"
       ref="statusComponent"
@@ -113,7 +113,7 @@
         </template>
       </i18n-t>
     </div>
-  </div>
+  </article>
 </template>
 
 <script src="./thread_tree.js"></script>

src/components/timeline/timeline.vue

@@ -79,10 +79,12 @@
       <div
         ref="timeline"
         class="timeline"
+        role="list"
       >
         <conversation
           v-for="statusId in filteredPinnedStatusIds"
           :key="statusId + '-pinned'"
+          role="listitem"
           class="status-fadein"
           :status-id="statusId"
           :collapsable="true"
@@ -93,6 +95,7 @@
         <conversation
           v-for="status in filteredVisibleStatuses"
           :key="status.id"
+          role="listitem"
           class="status-fadein"
           :status-id="status.id"
           :collapsable="true"