From ca41dfeb3d5796bcf89d68cd74c269e50b1f679d Mon Sep 17 00:00:00 2001
From: Derek Dang <21960193+derekdang@users.noreply.github.com>
Date: Sun, 16 Jul 2023 21:34:09 -0700
Subject: [PATCH] Fix a11y-noninteractive-element-interactions (#2578)

* Fix a11y-noninteractive-element-interactions

* Update CONTRIBUTORS

* Fix formatting issues

* Address a11y-noninteractive-element-interactions
---
 CONTRIBUTORS                     |  1 +
 build/ninja_gen/src/node.rs      |  1 -
 ts/deck-options/HelpModal.svelte | 23 ++++++++++++++---------
 ts/deck-options/Label.svelte     |  2 ++
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index 960c41fe0..a0fd6d4c1 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -129,6 +129,7 @@ Ben Yip <github.com/bennyyip>
 mmjang <752515918@qq.com>
 shunlog <github.com/shunlog>
 3ter <github.com/3ter>
+Derek Dang <https://github.com/derekdang/>
 
 ********************
 
diff --git a/build/ninja_gen/src/node.rs b/build/ninja_gen/src/node.rs
index af92ecc24..b1ad0d10c 100644
--- a/build/ninja_gen/src/node.rs
+++ b/build/ninja_gen/src/node.rs
@@ -230,7 +230,6 @@ impl BuildAction for SvelteCheck {
                 "a11y-click-events-have-key-events",
                 "a11y-no-noninteractive-tabindex",
                 "a11y-no-static-element-interactions",
-                "a11y-no-noninteractive-element-interactions",
             ]
             .iter()
             .map(|warning| format!("{}$:ignore", warning))
diff --git a/ts/deck-options/HelpModal.svelte b/ts/deck-options/HelpModal.svelte
index 766944d15..c6d063a30 100644
--- a/ts/deck-options/HelpModal.svelte
+++ b/ts/deck-options/HelpModal.svelte
@@ -94,15 +94,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             <div id="nav">
                                 <ul>
                                     {#each helpSections as section, i}
-                                        <li
-                                            on:click={() => {
-                                                activeIndex = i;
-                                                carousel.to(activeIndex);
-                                            }}
-                                        >
-                                            <span class:active={i == activeIndex}>
+                                        <li>
+                                            <button
+                                                on:click={() => {
+                                                    activeIndex = i;
+                                                    carousel.to(activeIndex);
+                                                }}
+                                                class:active={i == activeIndex}
+                                            >
                                                 {section.title}
-                                            </span>
+                                            </button>
                                         </li>
                                     {/each}
                                 </ul>
@@ -171,10 +172,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         padding: 0;
     }
 
-    li span {
+    li button {
         display: block;
         padding: 0.5rem 0.75rem;
         text-decoration: none;
+        text-align: left;
+        min-width: 250px;
+        background-color: var(--canvas);
+        border: none;
         cursor: pointer;
         &:hover {
             background-color: var(--canvas-inset);
diff --git a/ts/deck-options/Label.svelte b/ts/deck-options/Label.svelte
index cb5995711..2db73b3b5 100644
--- a/ts/deck-options/Label.svelte
+++ b/ts/deck-options/Label.svelte
@@ -18,6 +18,8 @@
     });
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <label
     bind:this={spanRef}
     for={forId}