Allow full navigation using tab

static/style.css

@@ -28,11 +28,18 @@ body > div {
   padding: 1rem;
 }
 
+button {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+}
+
 .browser {
   flex: 1;
   display: flex;
   flex-flow: column;
   height: 100%;
+  padding: 0;
 }
 
 a {
@@ -113,6 +120,7 @@ ul.breadcrumb {
   background-color: #334;
   border-radius: .25rem;
   padding: .75rem 1rem;
+  margin: 16px 16px 0;
 }
 @media (prefers-contrast: more) {
   ul.breadcrumb {
@@ -123,8 +131,10 @@ ul.breadcrumb {
 
 ul.breadcrumb li:not(:first-child)::before {
   display: inline-block;
+
   padding-left: .5rem;
   padding-right: .1rem;
+
   color: #6c757d;
   content: "/";
 }
@@ -132,12 +142,14 @@ ul.breadcrumb li:not(:first-child)::before {
 ul.dir {
   overflow: auto;
   flex: 1;
+  padding: 16px;
 }
 
 ul.dir li {
   cursor: pointer;
-  padding: .75rem .75rem;
+  padding: 0.5rem 0.5rem;
-  border-radius: 3px;
+  border-radius: 0.25rem;
+  min-height: 4rem;
 
   display: flex;
   align-items: center;
@@ -162,6 +174,9 @@ ul.dir li .material-symbols-outlined {
   width: 48px;
   height: 48px;
 }
+.albumart a {
+  display: block;
+}
 
 .queue .albumart {
   margin: 0.75rem;

templates/browser.html

@@ -26,11 +26,17 @@
   {% endfor %}
 </ul>
 
-<ul class="dir" hx-boost="true">
+<ul class="dir" hx-boost="true" tabindex="-1">
   {% for entry in entries %}
   {% match entry %}
   {% when mpd::Entry::Song with { name, path, artist } %}
-  <li hx-post="/queue?path={{path}}" hx-swap="none" role="button">
+  <li 
+    hx-post="/queue?path={{path}}"
+    hx-trigger="click,keyup[key=='Enter']"
+    hx-swap="none" 
+    role="button"
+    tabindex="0"
+  >
     <span class="material-symbols-outlined" title="Song">music_note</span>
     <div class="albumart">
       <img src="/art?path={{path}}" onerror="this.style.visibility = 'hidden'">
@@ -49,7 +55,11 @@
     role="link"
   >
     <span class="material-symbols-outlined" title="Directory">folder</span>
-    <div class="song__name">{{ name }}</div>
+    <div class="song__name">
+      <a href="/?path={{ path }}" hx-get="/browser" hx-sync="closest li:abort">
+        {{ name }}
+      </a>
+    </div>
   </li>
   {% when mpd::Entry::Playlist with { name, path } %}
   <li hx-post="/queue?path={{ path }}" hx-swap="none" role="button" >

templates/player.html

@@ -36,22 +36,22 @@
     {% endif %}
   </div>
 
-  <div class="controls">
+  <div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
-    <span
+    <button
-      hx-post="/previous" hx-swap="none" 
+      hx-post="/previous"
       class="control material-symbols-outlined" role="button" title="Previous track"
-    >skip_previous</span>
+    >skip_previous</button>
-    <span 
+    <button 
-      hx-post="/play" hx-swap="none" 
+      hx-post="/play"
       class="control material-symbols-outlined" role="button" title="Play"
-    >play_arrow</span>
+    >play_arrow</button>
-    <span
+    <button
-      hx-post="/pause" hx-swap="none" 
+      hx-post="/pause"
       class="control material-symbols-outlined" role="button" title="Pause"
-    >pause</span>
+    >pause</button>
-    <span 
+    <button 
-      hx-post="/next" hx-swap="none" 
+      hx-post="/next"
       class="control material-symbols-outlined" role="button" title="Next track"
-    >skip_next</span>
+    >skip_next</button>
   </div>
 </div>

templates/queue.html

@@ -3,7 +3,7 @@
 
 <div class="queue-header">
   <div class="queue-next">Next in queue</div>
-  <div class="queue-clear" role="button" hx-delete="/queue">
+  <button class="queue-clear" role="button" hx-delete="/queue">
     <span class="material-symbols-outlined">playlist_remove</span>
     Clear
   </div>