From 1cac2dc85f8c932abf8f08c33d4b743796c394db Mon Sep 17 00:00:00 2001
From: Derek Dang <21960193+derekdang@users.noreply.github.com>
Date: Tue, 18 Jul 2023 05:49:02 -0700
Subject: [PATCH] Address a11y warning for TabbedValue (#2582)

* Address a11y warning for TabbedValue

* Make the tab underline straight (dae)
---
 CONTRIBUTORS                        |  2 +-
 ts/deck-options/SettingTitle.svelte |  2 ++
 ts/deck-options/TabbedValue.svelte  | 11 +++++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index a0fd6d4c1..05c4d5854 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -129,7 +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/>
+Derek Dang <github.com/derekdang/>
 
 ********************
 
diff --git a/ts/deck-options/SettingTitle.svelte b/ts/deck-options/SettingTitle.svelte
index f4c6907d8..f0bd21cd7 100644
--- a/ts/deck-options/SettingTitle.svelte
+++ b/ts/deck-options/SettingTitle.svelte
@@ -2,6 +2,8 @@
     Copyright: Ankitects Pty Ltd and contributors
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="setting-title" on:click>
     <slot />
 </div>
diff --git a/ts/deck-options/TabbedValue.svelte b/ts/deck-options/TabbedValue.svelte
index 57d027654..56cc4d145 100644
--- a/ts/deck-options/TabbedValue.svelte
+++ b/ts/deck-options/TabbedValue.svelte
@@ -45,7 +45,7 @@
 <ul>
     {#each tabs as tab, idx}
         <li class:active={activeTab === idx}>
-            <span on:click={handleClick(idx)}>{tab.title}</span>
+            <button on:click={handleClick(idx)}>{tab.title}</button>
         </li>
     {/each}
 </ul>
@@ -61,19 +61,22 @@
         list-style: none;
     }
 
-    span {
+    button {
         display: block;
         white-space: nowrap;
         cursor: pointer;
         color: var(--fg-subtle);
+        border: none;
+        background-color: transparent;
     }
 
-    li.active > span {
+    li.active > button {
         color: var(--fg);
         border-bottom: 4px solid var(--border-focus);
         margin-bottom: -2px;
+        border-radius: 0;
     }
-    span:hover {
+    button:hover {
         color: var(--fg);
     }
 </style>