closes #83

src/components/NavBar.vue

@@ -17,15 +17,11 @@ function home() {
 }
 
 function set(page) {
-  if (page == 'home') {
-    useRoute('/');
-  } else {
-    useRoute(`/${page}/`);
-  }
+  if (page == 'home') useRoute('/');
+  else useRoute(`/${page}/`);
+
+  if (page == 'home' && nav.state.page == 'home') emit('explore');
 
-  if (page == 'home' && nav.state.page == 'home') {
-    emit('explore');
-  }
   nav.state.page = page;
 }
 </script>
@@ -38,35 +34,40 @@ function set(page) {
 
     <div class="wrap">
       <span
-        role="menuitem"
+        role="link"
+        aria-label="Home"
         tabindex="0"
         class="nav-ico bi bi-house clickable"
         :data-active="nav.state.page == 'home'"
         @click="set('home')"
         @keydown.enter="set('home')"></span>
       <span
-        role="menuitem"
+        role="link"
+        aria-label="Explore"
         tabindex="0"
         class="nav-ico bi bi-compass clickable"
         :data-active="nav.state.page == 'explore'"
         @click="set('explore')"
         @keydown.enter="set('explore')"></span>
       <span
-        role="menuitem"
+        role="link"
+        aria-label="Charts"
         tabindex="0"
         class="nav-ico bi bi-graph-up-arrow clickable"
         :data-active="nav.state.page == 'charts'"
         @click="set('charts')"
         @keydown.enter="set('charts')"></span>
       <span
-        role="menuitem"
+        role="link"
+        aria-label="Library"
         tabindex="0"
         class="nav-ico bi bi-collection clickable"
         :data-active="nav.state.page == 'library'"
         @click="set('library')"
         @keydown.enter="set('library')"></span>
       <span
-        role="menuitem"
+        role="link"
+        aria-label="Prefs"
         tabindex="0"
         class="nav-ico bi bi-gear clickable"
         :data-active="nav.state.page == 'prefs'"

src/components/SearchBar.vue

@@ -24,6 +24,7 @@ watch(
 <template>
   <button
     class="bi bi-search popup-wrap"
+    aria-label="Search"
     @mouseenter="nav.state.show = true"
     @mouseleave="nav.state.show = false"
     @keydown.enter="nav.show()">

src/components/SongItem.vue

@@ -111,7 +111,11 @@ const openSong = el => {
     tabindex="0"
     @click="openSong($event.target)"
     @keydown.enter="openSong($event.target)">
-    <img class="pop-2 bg-img song-bg" loading="lazy" :src="art" alt />
+    <img
+      class="pop-2 bg-img song-bg"
+      :loading="index > 4 ? 'lazy' : 'eager'"
+      :src="art"
+      alt />
 
     <span class="flex content">
       <h4>