accessibility

ThinLiquid · May 13, 2024 · e49a38a · e49a38a
1 parent aa51f15
commit e49a38a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/metadata.ts b/src/metadata.ts
@@ -58,34 +58,44 @@ class Metadata {
     this.icons = new HTML('div').classOn('icons')
 
     this.playPause = new HTML('button')
+      .attr({ title: 'Play' })
       .classOn('material-symbols-sharp')
       .classOn('filled')
       .text('play_arrow')
 
     this.prevTrack = new HTML('button')
+      .attr({ title: 'Previous' })
       .classOn('material-symbols-sharp')
       .classOn('filled')
       .text('skip_previous')
 
     this.nextTrack = new HTML('button')
+      .attr({ title: 'Next' })
       .classOn('material-symbols-sharp')
       .classOn('filled')
       .text('skip_next')
 
-    this.like = new HTML('button').classOn('material-symbols-sharp').text('add')
+    this.like = new HTML('button')
+      .attr({ title: 'Like' })
+      .classOn('material-symbols-sharp')
+      .text('add')
 
     this.options = new HTML('div').classOn('options')
     this.menu = new HTML('button')
+      .attr({ title: 'Menu' })
       .classOn('material-symbols-sharp')
-      .text('playlist_play')
+      .text('menu')
     this.queuebtn = new HTML('button')
+      .attr({ title: 'Queue' })
       .classOn('material-symbols-sharp')
       .text('queue_music')
 
     this.volume = new HTML('div')
+      .attr({ title: 'Volume' })
       .id('range-slider')
 
     this.crt = new HTML('button')
+      .attr({ title: 'CRT Mode' })
       .classOn('material-symbols-sharp')
       .text('blur_on')
 
@@ -172,14 +182,17 @@ class Metadata {
     // Register the events for the buttons
     this.player.audio.addEventListener('play', () => {
       this.playPause.text('pause')
+        .attr({ title: 'Pause' })
     })
 
     this.player.audio.addEventListener('pause', () => {
       this.playPause.text('play_arrow')
+        .attr({ title: 'Play' })
     })
 
     this.player.audio.addEventListener('ended', () => {
       this.playPause.text('play_arrow')
+        .attr({ title: 'Play' })
     })
 
     // Update the progress bar

diff --git a/src/searchpal.ts b/src/searchpal.ts
@@ -162,6 +162,7 @@ class SearchPalette {
     const icons = new HTML('div').classOn('icons')
 
     const add = new HTML('button')
+      .attr({ title: 'Add to queue' })
       .classOn('material-symbols-sharp')
       .text('playlist_add')
       .appendTo(icons)
@@ -173,6 +174,7 @@ class SearchPalette {
     })
 
     const open = new HTML('button')
+      .attr({ title: 'Open in Spotify' })
       .classOn('material-symbols-sharp')
       .text('open_in_new')
       .appendTo(icons)
@@ -216,6 +218,7 @@ class SearchPalette {
     const icons = new HTML('div').classOn('icons')
 
     const add = new HTML('button')
+      .attr({ title: 'Add to queue' })
       .classOn('material-symbols-sharp')
       .text('playlist_add')
       .appendTo(icons)
@@ -227,6 +230,7 @@ class SearchPalette {
     })
 
     const open = new HTML('button')
+      .attr({ title: 'Open in Spotify' })
       .classOn('material-symbols-sharp')
       .text('open_in_new')
       .appendTo(icons)
@@ -277,6 +281,7 @@ class SearchPalette {
       const icons = new HTML('div').classOn('icons')
 
       const addNext = new HTML('button')
+        .attr({ title: 'Add to queue next' })
         .classOn('material-symbols-sharp')
         .text('playlist_play')
         .appendTo(icons)
@@ -288,6 +293,7 @@ class SearchPalette {
       })
 
       const add = new HTML('button')
+        .attr({ title: 'Add to queue' })
         .classOn('material-symbols-sharp')
         .text('playlist_add')
         .appendTo(icons)
@@ -299,6 +305,7 @@ class SearchPalette {
       })
 
       const open = new HTML('button')
+        .attr({ title: 'Open in Spotify' })
         .classOn('material-symbols-sharp')
         .text('open_in_new')
         .appendTo(icons)