From d494641d39a0c1dd5c90d58ec6926ba7b9caa838 Mon Sep 17 00:00:00 2001
From: Shiny Nematoda <snematoda.751k2@aleeas.com>
Date: Sun, 21 Jan 2024 12:19:18 +0000
Subject: [PATCH] closes #83

---
 src/components/NavBar.vue    | 27 ++++++++++++++-------------
 src/components/SearchBar.vue |  1 +
 src/components/SongItem.vue  |  6 +++++-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 823e932..adb493b 100644
--- a/src/components/NavBar.vue
+++ b/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'"
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index d85d1bf..0cf2d70 100644
--- a/src/components/SearchBar.vue
+++ b/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()">
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index 9cb01fc..5104888 100644
--- a/src/components/SongItem.vue
+++ b/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>