closes #137, improve a11y

src/components/AddToPlaylist.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed, onMounted } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 
 import Modal from './Modal.vue';
 

src/components/Charts.vue

@@ -33,27 +33,24 @@ async function getCharts() {
     id.value = json.options.all.find(i => i.title == json.options.default).id;
 
   for (const country of json.options.all) {
-    const countryLocaleId = `countries.${country.id}`;
+    const locId = `countries.${country.id}`,
+      cc = t(locId);
 
-    if (t(countryLocaleId) !== countryLocaleId) {
-      country.title = t(countryLocaleId);
-    }
+    if (cc !== locId) country.title = cc;
   }
 
-  data.options = json.options.all.sort((a, b) => {
-    return a.title.localeCompare(b.title);
-  });
+  data.options = [];
+  for (const _ of Array(2)) data.options.push(json.options.all.shift());
+  data.options.push(
+    ...json.options.all.sort((a, b) => a.title.localeCompare(b.title)),
+  );
+
   data.songs = json.trending;
   data.artists = json.artists;
 }
 
-watch(id, () => {
-  getCharts();
-});
-
-onMounted(() => {
-  getCharts();
-});
+watch(id, getCharts);
+onMounted(getCharts);
 </script>
 
 <template>

src/components/NavBar.vue

@@ -38,25 +38,40 @@ function set(page) {
 
     <div class="wrap">
       <span
+        role="menuitem"
+        tabindex="0"
         class="nav-ico bi bi-house clickable"
         :data-active="nav.state.page == 'home'"
-        @click="set('home')"></span>
+        @click="set('home')"
+        @keydown.enter="set('home')"></span>
       <span
+        role="menuitem"
+        tabindex="0"
         class="nav-ico bi bi-compass clickable"
         :data-active="nav.state.page == 'explore'"
-        @click="set('explore')"></span>
+        @click="set('explore')"
+        @keydown.enter="set('explore')"></span>
       <span
+        role="menuitem"
+        tabindex="0"
         class="nav-ico bi bi-graph-up-arrow clickable"
         :data-active="nav.state.page == 'charts'"
-        @click="set('charts')"></span>
+        @click="set('charts')"
+        @keydown.enter="set('charts')"></span>
       <span
+        role="menuitem"
+        tabindex="0"
         class="nav-ico bi bi-collection clickable"
         :data-active="nav.state.page == 'library'"
-        @click="set('library')"></span>
+        @click="set('library')"
+        @keydown.enter="set('library')"></span>
       <span
+        role="button"
+        tabindex="0"
         class="nav-ico bi bi-gear clickable"
         :data-active="nav.state.page == 'prefs'"
-        @click="set('prefs')"></span>
+        @click="set('prefs')"
+        @keydown.enter="set('prefs')"></span>
     </div>
 
     <div class="wrap">

src/components/SearchBar.vue

@@ -15,10 +15,10 @@ function search(e) {
 
 <template>
   <button
-    aria-label="Search Button"
     class="bi bi-search popup-wrap"
     @mouseenter="show = true"
-    @mouseleave="show = false">
+    @mouseleave="show = false"
+    @keydown.enter="show = !show">
     <Transition name="fade">
       <div v-show="show" class="popup">
         <input
@@ -26,7 +26,7 @@ function search(e) {
           aria-label="Search Input"
           :placeholder="t('title.search') + '...'"
           @change="search"
-          @keyup.enter="search"
+          @keydown.enter="search"
           :value="nav.state.search" />
       </div>
     </Transition>

src/components/SongItem.vue

@@ -108,7 +108,11 @@ onMounted(() => {
     :title="title"
     @show="e => (showPl = e)" />
 
-  <div class="song card flex pop" @click="openSong($event.target)">
+  <div
+    class="song card flex pop"
+    tabindex="0"
+    @click="openSong($event.target)"
+    @keydown.enter="openSong($event.target)">
     <img class="pop-2 bg-img song-bg" loading="lazy" :src="art" alt />
 
     <span class="flex content">