Set a couple of title and alts

templates/browser.html

@@ -31,7 +31,7 @@
   {% match entry %}
   {% when mpd::Entry::Song with { name, path, artist } %}
   <li hx-post="/queue?path={{path}}" hx-swap="none" role="button">
-    <span class="material-symbols-outlined">music_note</span>
+    <span class="material-symbols-outlined" title="Song">music_note</span>
     <div class="albumart">
       <img src="/art?path={{path}}" onerror="this.style.visibility = 'hidden'">
     </div>
@@ -48,12 +48,12 @@
     hx-target=".browser"
     role="link"
   >
-    <span class="material-symbols-outlined">folder</span>
+    <span class="material-symbols-outlined" title="Directory">folder</span>
     <div class="song__name">{{ name }}</div>
   </li>
   {% when mpd::Entry::Playlist with { name, path } %}
   <li hx-post="/queue?path={{ path }}" hx-swap="none" role="button" >
-    <span class="material-symbols-outlined">playlist_play</span>
+    <span class="material-symbols-outlined" title="Playlist">playlist_play</span>
     <div class="song">
       <div class="song__name">{{ name }}</div>
     </a>

templates/player.html

@@ -12,16 +12,21 @@
     {% if let Some(song) = song %}
     <div class="albumart">
       <a href="/art?path={{ song.file }}" target="_blank">
-        <img src="/art?path={{ song.file }}" onerror="this.style.opacity = 0">
+        <img 
+          src="/art?path={{ song.file }}"
+          onerror="this.style.opacity = 0"
+          alt="Album art"
+          title="Album art"
+        >
       </a>
     </div>
     
     <div class="metadata">
       {% if let Some(name) = name %}
-      <div class="song__name">{{ name }}</div>
+      <div class="song__name" title="Song name">{{ name }}</div>
       {% endif %}
       {% if let Some(artist) = song.artist %}
-      <div>{{ artist }}</div>
+      <div class="song__artist" title="Artist">{{ artist }}</div>
       {% endif %}
     </div>
     {% else %}
@@ -34,19 +39,19 @@
   <div class="controls">
     <span
       hx-post="/previous" hx-swap="none" 
-      class="control material-symbols-outlined" role="button"
+      class="control material-symbols-outlined" role="button" title="Previous track"
     >skip_previous</span>
     <span 
       hx-post="/play" hx-swap="none" 
-      class="control material-symbols-outlined" role="button"
+      class="control material-symbols-outlined" role="button" title="Play"
     >play_arrow</span>
     <span
       hx-post="/pause" hx-swap="none" 
-      class="control material-symbols-outlined" role="button"
+      class="control material-symbols-outlined" role="button" title="Pause"
     >pause</span>
     <span 
       hx-post="/next" hx-swap="none" 
-      class="control material-symbols-outlined" role="button"
+      class="control material-symbols-outlined" role="button" title="Next track"
     >skip_next</span>
   </div>
 </div>

templates/queue.html

@@ -13,12 +13,17 @@
   {% for item in queue %}
   <li {% if item.playing %}class="playing"{% endif %}>
     <div class="albumart">
-      <img src="/art?path={{ item.file }}" onerror="this.style.opacity = 0">
+      <img
+        src="/art?path={{ item.file }}"
+        onerror="this.style.opacity = 0"
+        alt="Album art"
+        title="Album art"
+      >
     </div>
     <div class="metadata">
-      <div class="song__name">{{ item.title }}</div>
+      <div class="song__name" title="Song name">{{ item.title }}</div>
       {% if let Some(artist) = item.artist %}
-      <div class="song__artist">{{ artist }}</div>
+      <div class="song__artist" title="Artist">{{ artist }}</div>
       {% endif %}
     </div>
   </li>