feat($theme-default): more semantic HTML (close: #1154)(#1156)

By replacing some `div`s with `header`/`main`/`aside` tags and adding an aria landmark to the search
vuejs · Jan 8, 2019 · ede57b0 · ede57b0
1 parent 87894ff
commit ede57b0
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue
@@ -2,6 +2,7 @@
   <form
     id="search-form"
     class="algolia-search-wrapper search-box"
+    role="search"
   >
     <input
       id="algolia-search-input"

diff --git a/packages/@vuepress/theme-default/components/Home.vue b/packages/@vuepress/theme-default/components/Home.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="home">
-    <div class="hero">
+  <main class="home" aria-labelledby="main-title">
+    <header class="hero">
       <img
         v-if="data.heroImage"
         :src="$withBase(data.heroImage)"
         alt="hero"
       >
 
-      <h1>{{ data.heroText || $title || 'Hello' }}</h1>
+      <h1 id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
 
       <p class="description">
         {{ data.tagline || $description || 'Welcome to your VuePress site' }}
@@ -22,7 +22,7 @@
           :item="actionLink"
         />
       </p>
-    </div>
+    </header>
 
     <div
       class="features"
@@ -75,6 +75,7 @@ export default {
   padding $navbarHeight 2rem 0
   max-width 960px
   margin 0px auto
+  display block
   .hero
     text-align center
     img

diff --git a/packages/@vuepress/theme-default/components/Page.vue b/packages/@vuepress/theme-default/components/Page.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="page">
+  <main class="page">
     <slot name="top"/>
 
     <Content/>
 
-    <div class="page-edit">
+    <footer class="page-edit">
       <div
         class="edit-link"
         v-if="editLink"
@@ -24,7 +24,7 @@
         <span class="prefix">{{ lastUpdatedText }}: </span>
         <span class="time">{{ lastUpdated }}</span>
       </div>
-    </div>
+    </footer>
 
     <div class="page-nav" v-if="prev || next">
       <p class="inner">
@@ -58,7 +58,7 @@
     </div>
 
     <slot name="bottom"/>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -197,6 +197,7 @@ function find (page, items, offset) {
 
 .page
   padding-bottom 2rem
+  display block
 
 .page-edit
   @extend $wrapper

diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <aside class="sidebar">
     <NavLinks/>
     <slot name="top"/>
     <ul class="sidebar-links" v-if="items.length">
@@ -16,7 +16,7 @@
       </li>
     </ul>
     <slot name="bottom"/>
-  </div>
+  </aside>
 </template>
 
 <script>

diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div
+  <section
     class="sidebar-group"
     :class="{ first, collapsable }"
   >
@@ -27,7 +27,7 @@
         </li>
       </ul>
     </DropdownTransition>
-  </div>
+  </section>
 </template>
 
 <script>