Docset navigation is marked up as list

PT-1067

Author: AugustMiller

docs/.vuepress/theme/components/DocSetPanel.vue

@@ -1,40 +1,48 @@
 <template>
   <div class="doc-set-panel">
-    <div class="primary-sets">
-      <RouterLink :to="`/`" class="doc-set home" :class="{ active: $activeSet === false }">
-        <span class="back">
-          <BackChevron />
-        </span>
-
-        <span class="mr-2 inline-block relative home-icon">
-          <Home />
-        </span>
-
-        <span class="home-title">Home</span>
-      </RouterLink>
-      <RouterLink
+    <ul class="primary-sets">
+      <!-- Home -->
+      <li class="doc-set">
+        <RouterLink :to="`/`" class="doc-set-link home" :class="{ active: $activeSet === false }">
+          <span class="back" aria-hidden="true">
+            <BackChevron />
+          </span>
+
+          <span class="mr-2 inline-block relative home-icon" aria-hidden="true">
+            <Home />
+          </span>
+
+          <span class="home-title">Home</span>
+        </RouterLink>
+      </li>
+
+      <!-- Docsets -->
+      <li
+        class="doc-set"
         v-if="$page.frontmatter.home && set.primarySet"
         v-for="(set, index) in $site.themeConfig.docSets"
-        v-bind:key="set.handle"
-        :to="defaultUri(set)"
-        class="doc-set"
-      >
-        <span class="mr-2 inline-block relative set-icon">
-          <img :src="set.icon" width="16" height="16" alt />
-        </span>
+        v-bind:key="set.handle">
+        <RouterLink :to="defaultUri(set)" class="doc-set-link">
+          <span class="mr-2 inline-block relative set-icon">
+            <img :src="set.icon" width="16" height="16" alt="">
+          </span>
 
-        <span>{{ set.setTitle ? set.setTitle : set.title }}</span>
-      </RouterLink>
+          <span>{{ set.setTitle ? set.setTitle : set.title }}</span>
+        </RouterLink>
+      </li>
+      
 
       <!-- Special handling for external Cloud docs! -->
-      <a v-if="$page.frontmatter.home" class="doc-set" href="https://craftcms.com/knowledge-base/cloud" target="_blank">
-        <span class="mr-2 inline-block relative set-icon">
-          <img src="/docs/icons/icon-cloud.svg" width="16" height="16" alt="" />
-        </span>
-
-        <span>Craft Cloud</span>
-      </a>
-    </div>
+      <li v-if="$page.frontmatter.home" class="doc-set">
+        <a class="doc-set-link" href="https://craftcms.com/knowledge-base/cloud" target="_blank">
+          <span class="mr-2 inline-block relative set-icon">
+            <img src="/docs/icons/icon-cloud.svg" width="16" height="16" alt="">
+          </span>
+
+          <span>Craft Cloud</span>
+        </a>
+      </li>
+    </ul>
     <div v-if="$activeSet" class="doc-set-current">
       <RouterLink :to="defaultUri($activeSet)" class="flex items-center">
         <span class="icon mr-3 inline-block">
@@ -75,7 +83,7 @@
     }
   }
 
-  .doc-set {
+  .doc-set-link {
     @apply block px-4 mt-2 font-medium text-lg;
     color: var(--doc-set-color);