From 6657295098db2d0e6c467c59cf88e2948d69fdfd Mon Sep 17 00:00:00 2001
From: cristianpb <felipebrokate@gmail.com>
Date: Sun, 21 Jan 2024 16:55:29 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20Fix=20linter=20problems=20linked=20?=
 =?UTF-8?q?with=20A11y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                         | 7 ++++---
 src/components/AddToPlaylist.svelte  | 2 +-
 src/components/CreatePlaylist.svelte | 2 +-
 src/components/DeletePlaylist.svelte | 2 +-
 src/components/EditClients.svelte    | 2 +-
 src/components/Nav.svelte            | 2 +-
 src/components/NavBottom.svelte      | 4 ++--
 src/components/SnapClients.svelte    | 2 +-
 src/components/SnapGroups.svelte     | 2 +-
 src/routes/browse.svelte             | 6 +++---
 src/routes/index.svelte              | 4 ++--
 src/routes/playlists/[slug].svelte   | 6 +++---
 src/routes/playlists/index.svelte    | 2 +-
 src/routes/search.svelte             | 6 +++---
 14 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e8c2241..be8bde3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,10 +10,11 @@ module.exports = {
     node: true
   },
   extends: [
-    'eslint:recommended'
+    //'eslint:recommended'
+    'plugin:svelte/recommended'
   ],
   plugins: [
-    'svelte3'
+    'svelte'
   ],
   ignorePatterns: [
     '__sapper__/',
@@ -23,7 +24,7 @@ module.exports = {
   overrides: [
     {
       files: ['**/*.svelte'],
-      processor: 'svelte3/svelte3'
+      processor: 'svelte/svelte'
     }
   ],
   rules: {
diff --git a/src/components/AddToPlaylist.svelte b/src/components/AddToPlaylist.svelte
index fac915b..e6ee31f 100644
--- a/src/components/AddToPlaylist.svelte
+++ b/src/components/AddToPlaylist.svelte
@@ -1,5 +1,5 @@
 <div class="modal" class:is-active={showAddToPlaylistModal}  >
-  <div class="modal-background"  on:click={() => showAddToPlaylistModal = !showAddToPlaylistModal}></div>
+  <div class="modal-background"  on:click={() => showAddToPlaylistModal = !showAddToPlaylistModal} on:keypress={() => showAddToPlaylistModal = !showAddToPlaylistModal}></div>
   <div class="modal-card">
     <header class="modal-card-head">
       <p class="modal-card-title">Add to playlist</p>
diff --git a/src/components/CreatePlaylist.svelte b/src/components/CreatePlaylist.svelte
index 01c7862..a16a340 100644
--- a/src/components/CreatePlaylist.svelte
+++ b/src/components/CreatePlaylist.svelte
@@ -1,5 +1,5 @@
 <div class="modal" class:is-active={showCreatePlaylistModal}  >
-  <div class="modal-background"  on:click={() => showCreatePlaylistModal = !showCreatePlaylistModal}></div>
+  <div class="modal-background"  on:click={() => showCreatePlaylistModal = !showCreatePlaylistModal} on:keypress={() => showCreatePlaylistModal = !showCreatePlaylistModal}></div>
   <div class="modal-card">
     <header class="modal-card-head">
       <p class="modal-card-title">Create playlist</p>
diff --git a/src/components/DeletePlaylist.svelte b/src/components/DeletePlaylist.svelte
index db4bde0..1b3bd7c 100644
--- a/src/components/DeletePlaylist.svelte
+++ b/src/components/DeletePlaylist.svelte
@@ -1,5 +1,5 @@
 <div class="modal" class:is-active={deletePlaylistConfirmation}  >
-  <div class="modal-background"  on:click={() => deletePlaylistConfirmation = !deletePlaylistConfirmation}></div>
+  <div class="modal-background"  on:click={() => deletePlaylistConfirmation = !deletePlaylistConfirmation} on:keypress={() => deletePlaylistConfirmation = !deletePlaylistConfirmation}></div>
   <div class="modal-card">
     <div class="modal-card-body has-text-centered">
       <p class="title">
diff --git a/src/components/EditClients.svelte b/src/components/EditClients.svelte
index 626abc9..ca61186 100644
--- a/src/components/EditClients.svelte
+++ b/src/components/EditClients.svelte
@@ -1,5 +1,5 @@
 <div class="modal" class:is-active={$snapClientsEditVisibility}  >
-    <div class="modal-background" on:click={() => $snapClientsEditVisibility = !$snapClientsEditVisibility}></div>
+    <div class="modal-background" on:click={() => $snapClientsEditVisibility = !$snapClientsEditVisibility} on:keypress={() => $snapClientsEditVisibility = !$snapClientsEditVisibility}></div>
   <div class="modal-card">
     <header class="modal-card-head">
       <p class="modal-card-title">Edit Snapcast Clients</p>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index ca29bea..65c0818 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -31,7 +31,7 @@
   }
 </style>
 
-<nav class="navbar" role="navigation" aria-label="main navigation">
+<nav class="navbar" aria-label="main navigation">
   <div class="navbar-brand">
     <a 
       class="navbar-item" 
diff --git a/src/components/NavBottom.svelte b/src/components/NavBottom.svelte
index 7167020..4b6542b 100644
--- a/src/components/NavBottom.svelte
+++ b/src/components/NavBottom.svelte
@@ -1,4 +1,4 @@
-<nav class="navbar is-fixed-bottom " role="navigation" aria-label="main navigation">
+<nav class="navbar is-fixed-bottom " aria-label="main navigation">
   <div class="navbar-brand">
     <a 
       href="{null}" 
@@ -70,7 +70,7 @@
             {client.name ? client.name : client.host}
             </span>
             <div class="columns is-mobile">
-              <div class="column is-narrow" on:click={() => muteClient(client.id, client.muted)}>
+              <div class="column is-narrow" on:click={() => muteClient(client.id, client.muted)} on:keypress={() => muteClient(client.id, client.muted)}>
                 <a class="navbar-item small-separation" href="{null}">
                   {#if client.muted}
                     <FontAwesomeIcon icon={faVolumeMute} class="icon"/>
diff --git a/src/components/SnapClients.svelte b/src/components/SnapClients.svelte
index 9a05524..6c61798 100644
--- a/src/components/SnapClients.svelte
+++ b/src/components/SnapClients.svelte
@@ -31,7 +31,7 @@
           </div>
         </div>
         {#if client.connected}
-          <div class="column is-narrow" on:click={muteClient(client.id, client.muted)}>
+          <div class="column is-narrow" on:click={muteClient(client.id, client.muted)} on:keypress={muteClient(client.id, client.muted)}>
             <a class="navbar-item" href="{null}">
               {#if client.muted}
                 <FontAwesomeIcon icon={faVolumeMute} class="icon"/>
diff --git a/src/components/SnapGroups.svelte b/src/components/SnapGroups.svelte
index 1342a56..b8b3e89 100644
--- a/src/components/SnapGroups.svelte
+++ b/src/components/SnapGroups.svelte
@@ -48,7 +48,7 @@
                              on:input={() => editClientName(group.clients[i].id, group.clients[i].name)}
                              placeholder="Client name">
                     </div>
-                    <div class="column is-narrow" on:click="{deleteClient(client.id)}">
+                    <div class="column is-narrow" on:click="{deleteClient(client.id)}" on:keypress="{deleteClient(client.id)}">
                       <button class="button">
                         <FontAwesomeIcon icon={faTrash} class="icon"/>
                       </button>
diff --git a/src/routes/browse.svelte b/src/routes/browse.svelte
index 1c0dfa8..bd21107 100644
--- a/src/routes/browse.svelte
+++ b/src/routes/browse.svelte
@@ -27,7 +27,7 @@
   {#if results.some(checkOverallDropdownNeeded)}
   <div class="column is-narrow">
     <div class="dropdown is-right" class:is-active={showOptions} >
-      <div class="dropdown-trigger" on:click={() => showOptions = !showOptions}>
+      <div class="dropdown-trigger" on:click={() => showOptions = !showOptions} on:keypress={() => showOptions = !showOptions}>
       {#if showOptions}
         <a href="{null}" class="button">
           <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
@@ -84,11 +84,11 @@
     {#each results as result, idx}
       <a href={null} class="list-item" >
         <div class="columns is-mobile">
-          <div class="column" on:click={() => promise = browserUri(result, idx, 'avance')}>
+          <div class="column" on:click={() => promise = browserUri(result, idx, 'avance')} on:keypress={() => promise = browserUri(result, idx, 'avance')}>
             {result.name}
           </div>
           {#if checkItemDropdownNeeded(result)}
-          <div class="column is-narrow" on:click={() => handleDropdownActivation(idx)}>
+          <div class="column is-narrow" on:click={() => handleDropdownActivation(idx)} on:keypress={() => handleDropdownActivation(idx)}>
             {#if options == idx}
               <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
             {:else}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 588751b..b226181 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -70,7 +70,7 @@
        class:is-active={hovering === index}
        >
       <div class="columns is-mobile">
-        <div class="column"  on:click={handleDropdownActivation(tlTrack.tlid)}>
+        <div class="column"  on:click={handleDropdownActivation(tlTrack.tlid)} on:keypress={handleDropdownActivation(tlTrack.tlid)}>
           {tlTrack.track.name}
           {#if index === $currentTrack.index}
               &nbsp;<FontAwesomeIcon icon={faCog} spin={$currentState == 'playing' ? true : false} class="icon is-small"/>
@@ -78,7 +78,7 @@
         </div>
         <div class="column is-narrow">
           <div class="dropdown is-right is-up" class:is-active={dropdownActivate == tlTrack.tlid} >
-            <div class="dropdown-trigger" on:click={handleDropdownActivation(tlTrack.tlid)}>
+            <div class="dropdown-trigger" on:click={handleDropdownActivation(tlTrack.tlid)} on:keypress={handleDropdownActivation(tlTrack.tlid)}>
             {#if dropdownActivate == tlTrack.tlid}
               <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
             {:else}
diff --git a/src/routes/playlists/[slug].svelte b/src/routes/playlists/[slug].svelte
index fd84ae7..dfc977d 100644
--- a/src/routes/playlists/[slug].svelte
+++ b/src/routes/playlists/[slug].svelte
@@ -17,7 +17,7 @@
       </div>
       <div class="column">
         <div class="dropdown is-right" class:is-active={showOptions} >
-          <div class="dropdown-trigger" on:click={() => showOptions = !showOptions}>
+          <div class="dropdown-trigger" on:click={() => showOptions = !showOptions} on:keypress={() => showOptions = !showOptions}>
           {#if showOptions}
             <a href="{null}" class="button">
               <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
@@ -97,12 +97,12 @@
          animate:flip
          >
          <div class="columns is-mobile">
-           <div class="column" on:click={handleDropdownActivation(index)}>
+           <div class="column" on:click={handleDropdownActivation(index)} on:keypress={handleDropdownActivation(index)}>
              {track.name}
            </div>
            <div class="column is-narrow">
              <div class="dropdown is-right is-up" class:is-active={dropdownActivate == index} >
-               <div class="dropdown-trigger" on:click={handleDropdownActivation(index)}>
+               <div class="dropdown-trigger" on:click={handleDropdownActivation(index)} on:keypress={handleDropdownActivation(index)}>
                {#if dropdownActivate == index}
                  <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
                {:else}
diff --git a/src/routes/playlists/index.svelte b/src/routes/playlists/index.svelte
index a9ad762..1dd29d1 100644
--- a/src/routes/playlists/index.svelte
+++ b/src/routes/playlists/index.svelte
@@ -36,7 +36,7 @@
             </div>
             <div class="column is-narrow">
               <div class="dropdown is-right is-up" class:is-active={options == i} >
-                <div class="dropdown-trigger" on:click={() => handleDropdownActivation(i)}>
+                <div class="dropdown-trigger" on:click={() => handleDropdownActivation(i)} on:keypress={() => handleDropdownActivation(i)}>
                 {#if options == i}
                   <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
                 {:else}
diff --git a/src/routes/search.svelte b/src/routes/search.svelte
index 4aed7e8..43d90a5 100644
--- a/src/routes/search.svelte
+++ b/src/routes/search.svelte
@@ -26,7 +26,7 @@
         {:then}
           <div class="tags">
             {#each uris as uri}
-              <span class="tag" class:is-primary="{selectedUris[uri]}" on:click="{() => selectedUris[uri] = !selectedUris[uri]}">
+              <span class="tag" class:is-primary="{selectedUris[uri]}" on:click="{() => selectedUris[uri] = !selectedUris[uri]}" on:keypress="{() => selectedUris[uri] = !selectedUris[uri]}">
                 {#if uri in uriIcons}
                   <FontAwesomeIcon icon={uriIcons[uri]} class="icon is-small"/> &nbsp; {uri}
                 {:else}
@@ -45,7 +45,7 @@
       {#if resultTracks.length > 0}
       <div class="column is-narrow">
         <div class="dropdown is-right"  class:is-active={showOptions}>
-          <div class="dropdown-trigger" on:click={() => showOptions = !showOptions}>
+          <div class="dropdown-trigger" on:click={() => showOptions = !showOptions} on:keypress={() => showOptions = !showOptions}>
             {#if showOptions}
               <a href="{null}" class="button">
                 <FontAwesomeIcon icon={faAngleUp} class="icon" aria-haspopup="true" aria-controls="dropdown-menu"/>
@@ -99,7 +99,7 @@
          on:dragenter={() => hovering = idx}
          class:is-active={hovering === idx}
          >
-        <div class="columns is-mobile" on:click={handleDropdownActivation(idx)}>
+        <div class="columns is-mobile" on:click={handleDropdownActivation(idx)} on:keypress={handleDropdownActivation(idx)}>
           <div class="column">
             {#if track.artists}
               {track.artists.map(x => x.name).join(', ')} - {track.name}