From e2a5b027e315df005f7ec311ef3444819a092287 Mon Sep 17 00:00:00 2001
From: Lucien Immink <lucien@arielext.org>
Date: Thu, 23 May 2024 12:33:50 +0200
Subject: [PATCH] Add title tags to controls

---
 src/components/player/player.ts | 19 ++++++++++++++-----
 src/styles/controls.ts          |  3 +++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/player/player.ts b/src/components/player/player.ts
index dc99b27..4791c0a 100644
--- a/src/components/player/player.ts
+++ b/src/components/player/player.ts
@@ -561,32 +561,41 @@ export class Album extends LitElement {
       <button
         class="btn"
         @click=${() => this._previous()}
-        aria-label="previous track"
+        aria-label="Previous track"
+        title="Previous track"
       >
         ${previousIcon}
       </button>
       <button
         class="btn"
         @click=${() => this._togglePlayPause()}
-        aria-label="play or pause"
+        aria-label="${this.isPlaying ? 'Pause' : 'Play'} track"
+        title="${this.isPlaying ? 'Pause' : 'Play'} track"
       >
         ${this.isPlaying ? pauseIcon : playIcon}
       </button>
-      <button class="btn" @click=${() => this._next()} aria-label="next track">
+      <button
+        class="btn"
+        @click=${() => this._next()}
+        aria-label="next track"
+        title="Next track"
+      >
         ${nextIcon}
       </button>
       <button class="btn" style="display:none">${volumeIcon}</button>
       <button
         class="btn md-up ${this.isLoved ? 'active' : ''}"
         @click=${() => this._toggleLoved()}
-        aria-label="love or unlove track"
+        aria-label="${this.isLoved ? 'un' : ''}love track"
+        title="${this.isLoved ? 'un' : ''}love track"
       >
         ${heartIcon}
       </button>
       <button
         class="btn md-up ${this.isShuffled ? 'active' : ''}"
         @click=${() => this._toggleShuffled()}
-        aria-label="shuffle or unshuffle playlist"
+        aria-label="${this.isShuffled ? 'un' : ''}shuffle playlist"
+        title="${this.isShuffled ? 'un' : ''}shuffle playlist"
       >
         ${randomIcon}
       </button>
diff --git a/src/styles/controls.ts b/src/styles/controls.ts
index 4dc62c4..07b1d26 100644
--- a/src/styles/controls.ts
+++ b/src/styles/controls.ts
@@ -18,6 +18,7 @@ export default css`
       opacity 0.2s ease-in-out;
     height: 100%;
     position: relative;
+    opacity: 0.5;
   }
   .controls .btn svg {
     margin: 0 1px;
@@ -29,10 +30,12 @@ export default css`
     color: var(--primary);
     background: var(--background3);
     outline: none;
+    opacity: 1;
   }
   .controls .btn.active {
     background: var(--primary) !important;
     color: var(--letter-color) !important;
+    opacity: 1;
   }
   .controls .btn:hover:before {
     content: '';