better semantic markup

src/components/conversation/conversation.js

@@ -192,10 +192,17 @@ export default {
     const lastStatus = computed(
       () => conversation.value[conversation.value.legnth - 1],
     )
-    const getStatusClasses = (status, active) => ({
+    const getStatusClasses = (status, ancestor) => {
-      '-first': status.id === firstStatus.value?.id,
+      const result = {
-      '-last': status.id === lastStatus.value?.id,
+        '-first': status.id === firstStatus.value?.id,
-    })
+        '-last': status.id === lastStatus.value?.id,
+      }
+      if (ancestor) {
+        result['-ancestor'] = true
+        result['-fade'] = mergedConfig.value.conversationTreeFadeAncestors
+      }
+      return result
+    }
 
     const { fontSize } = useInterfaceSizes()
 
@@ -306,9 +313,6 @@ export default {
     const shouldShowAncestors = computed(
       () => isExpanded.value && heightChartAncestors.value.length > 0,
     )
-    const shouldFadeAncestors = computed(
-      () => mergedConfig.value.conversationTreeFadeAncestors,
-    )
 
     // # Scrolling
     const diveIntoStatus = (id) => tryScrollTo(id)
@@ -366,7 +370,6 @@ export default {
       treeViewIsSimple,
       shouldShowAllConversationButton,
       shouldShowAncestors,
-      shouldFadeAncestors,
 
       // # Scrolling
       diveToTopLevel,

src/components/conversation/conversation.vue

@@ -91,15 +91,14 @@
           ref="ancestors"
           class="thread-ancestors"
         >
-          <article
+          <template
             v-for="element in heightChartAncestors"
-            class="thread-ancestor"
+            :key="element.id"
-            :class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
           >
             <Status
               v-if="element.type === 'item'"
               class="conversation-status panel-body"
-              :class="getStatusClasses(element.item)"
+              :class="getStatusClasses(element.item, true)"
 
               :status-id="element.item.id"
               :replies="getReplies(element.item.id)"
@@ -119,8 +118,9 @@
               v-if="element.type === 'spacer'"
               class="virtual-spacer"
               :style="{ height: element.height + 'px' }"
+              aria-hidden="true"
             />
-          </article>
+          </template>
         </div>
         <ThreadTree
           :status-id="currentStatus.id"
@@ -138,14 +138,13 @@
         ref="linear"
         class="thread-body"
       >
-        <article
+        <template
           v-for="element in heightChartLinear"
-          class="panel-body"
+          :key="element.id"
-          :key="element.id ?? element.ids"
         >
           <Status
             v-if="element.type === 'item'"
-            class="conversation-status"
+            class="panel-body conversation-status"
             :class="getStatusClasses(element.item)"
             :status-id="element.item.id"
             :replies="getReplies(element.item.id)"
@@ -163,10 +162,11 @@
           />
           <div
             v-if="element.type === 'spacer'"
-            class="virtual-spacer"
+            aria-hidden="true"
+            class="panel-body virtual-spacer"
             :style="{ height: element.height + 'px' }"
           />
-        </article>
+        </template>
       </div>
     </div>
   </div>

src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <article
     v-if="!hideStatus"
     ref="root"
     class="Status"
@@ -568,7 +568,7 @@
         </template>
       </i18n-t>
     </template>
-  </div>
+  </article>
 </template>
 
 <script src="./status.js"></script>