♿ Fix linter problems linked with A11y

cristianpb · Jan 21, 2024 · 6657295 · 6657295
1 parent c5dbe1e
commit 6657295
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -70,15 +70,15 @@
        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"/>
           {/if}
         </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
@@ -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
@@ -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
@@ -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}