From d108bff86254473a89560dd56ca2460873c4f3cc Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Wed, 10 Jul 2024 15:55:08 +0300
Subject: [PATCH] Fix remaining accessibility warnings (#3241)

* Remove unused build var

* Fix accessibility warnings in CollapseLabel

* Fix accessibility warnings in PlainTextBadge

* Add ARIA role to Autocompleteitem

* Fix accessibility warnings in HandleBackground

* Fix accessibility warnings in HandleControl

* Fix accessibility warnings in EditorField

* Fix accessibility warnings in RichTextBadge

* Fix accessibility warnings in StickyBadge

* Remove ignored a11y warnings
---
 build/ninja_gen/src/node.rs               | 12 ------------
 package.json                              |  4 ++--
 ts/editor/CollapseLabel.svelte            | 11 ++++++++++-
 ts/editor/EditorField.svelte              |  8 +++++++-
 ts/editor/HandleBackground.svelte         |  2 ++
 ts/editor/HandleControl.svelte            | 10 ++++++++++
 ts/editor/PlainTextBadge.svelte           |  4 ++++
 ts/editor/RichTextBadge.svelte            |  4 ++++
 ts/editor/StickyBadge.svelte              |  4 ++++
 ts/lib/tag-editor/AutocompleteItem.svelte |  1 +
 10 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/build/ninja_gen/src/node.rs b/build/ninja_gen/src/node.rs
index 853e6f24b..be121bc2f 100644
--- a/build/ninja_gen/src/node.rs
+++ b/build/ninja_gen/src/node.rs
@@ -223,18 +223,6 @@ impl BuildAction for SvelteCheck {
         build.add_inputs("yarn", inputs![":yarn:bin"]);
         build.add_inputs("", &self.inputs);
         build.add_inputs("", inputs!["yarn.lock"]);
-        build.add_variable(
-            "compiler_warnings",
-            [
-                "a11y-click-events-have-key-events",
-                "a11y-no-noninteractive-tabindex",
-                "a11y-no-static-element-interactions",
-            ]
-            .iter()
-            .map(|warning| format!("{}$:ignore", warning))
-            .collect::<Vec<_>>()
-            .join(","),
-        );
         let hash = simple_hash(&self.tsconfig);
         build.add_output_stamp(format!("tests/svelte-check.{hash}"));
     }
diff --git a/package.json b/package.json
index 3c43a64a8..930481436 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
         "dev": "cd ts && vite dev",
         "build": "cd ts && vite build",
         "preview": "cd ts && vite preview",
-        "svelte-check:once": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning --compiler-warnings a11y-click-events-have-key-events:ignore,a11y-no-noninteractive-tabindex:ignore,a11y-no-static-element-interactions:ignore",
-        "svelte-check": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch  --compiler-warnings a11y-click-events-have-key-events:ignore,a11y-no-noninteractive-tabindex:ignore,a11y-no-static-element-interactions:ignore",
+        "svelte-check:once": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
+        "svelte-check": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
         "vitest:once": "cd ts && vitest run",
         "vitest": "cd ts && vitest"
     },
diff --git a/ts/editor/CollapseLabel.svelte b/ts/editor/CollapseLabel.svelte
index 051424ba0..57efba4eb 100644
--- a/ts/editor/CollapseLabel.svelte
+++ b/ts/editor/CollapseLabel.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher } from "svelte";
 
     import CollapseBadge from "./CollapseBadge.svelte";
+    import { onEnterOrSpace } from "@tslib/keys";
 
     export let collapsed: boolean;
     export let tooltip: string;
@@ -17,7 +18,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<span class="collapse-label" title={tooltip} on:click|stopPropagation={toggle}>
+<span
+    class="collapse-label"
+    title={tooltip}
+    on:click|stopPropagation={toggle}
+    on:keydown={onEnterOrSpace(() => toggle())}
+    tabindex="-1"
+    role="button"
+    aria-expanded={!collapsed}
+>
     <CollapseBadge {collapsed} />
     <slot />
 </span>
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 55992e76e..9408d0f05 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -89,7 +89,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onDestroy(() => api?.destroy());
 </script>
 
-<div class="field-container" class:hide={field.hidden} on:mouseenter on:mouseleave>
+<div
+    class="field-container"
+    class:hide={field.hidden}
+    on:mouseenter
+    on:mouseleave
+    role="presentation"
+>
     <slot name="field-label" />
 
     <Collapsible collapse={collapsed} let:collapsed={hidden}>
diff --git a/ts/editor/HandleBackground.svelte b/ts/editor/HandleBackground.svelte
index 4ba3acce6..cc2134018 100644
--- a/ts/editor/HandleBackground.svelte
+++ b/ts/editor/HandleBackground.svelte
@@ -11,6 +11,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     title={tooltip}
     on:mousedown|preventDefault
     on:dblclick
+    tabindex="-1"
+    role="button"
 />
 
 <style lang="scss">
diff --git a/ts/editor/HandleControl.svelte b/ts/editor/HandleControl.svelte
index 20dd41e41..53893b7cb 100644
--- a/ts/editor/HandleControl.svelte
+++ b/ts/editor/HandleControl.svelte
@@ -30,6 +30,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:nightMode={$pageTheme.isDark}
         class="bordered"
         on:mousedown|preventDefault
+        tabindex="-1"
+        role="button"
     />
     <div
         class:nightMode={$pageTheme.isDark}
@@ -38,6 +40,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault
         on:pointerdown={onPointerdown(true, true)}
         on:pointermove
+        tabindex="-1"
+        role="button"
     />
     <div
         class:nightMode={$pageTheme.isDark}
@@ -46,6 +50,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault
         on:pointerdown={onPointerdown(true, false)}
         on:pointermove
+        tabindex="-1"
+        role="button"
     />
     <div
         class:nightMode={$pageTheme.isDark}
@@ -54,6 +60,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault
         on:pointerdown={onPointerdown(false, true)}
         on:pointermove
+        tabindex="-1"
+        role="button"
     />
     <div
         class:nightMode={$pageTheme.isDark}
@@ -62,6 +70,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault
         on:pointerdown={onPointerdown(false, false)}
         on:pointermove
+        tabindex="-1"
+        role="button"
     />
 </div>
 
diff --git a/ts/editor/PlainTextBadge.svelte b/ts/editor/PlainTextBadge.svelte
index a12f7fb65..75f6e5862 100644
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
+    import { onEnterOrSpace } from "@tslib/keys";
     import { createEventDispatcher, onDestroy } from "svelte";
 
     import Badge from "$lib/components/Badge.svelte";
@@ -40,6 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:visible={show || !animated}
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
+    on:keydown={onEnterOrSpace(() => toggle())}
+    tabindex="-1"
+    role="button"
 >
     <Badge
         tooltip="{tr.editingToggleHtmlEditor()} ({getPlatformString(keyCombination)})"
diff --git a/ts/editor/RichTextBadge.svelte b/ts/editor/RichTextBadge.svelte
index 8535cbf14..acb4ddc57 100644
--- a/ts/editor/RichTextBadge.svelte
+++ b/ts/editor/RichTextBadge.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
+    import { onEnterOrSpace } from "@tslib/keys";
     import { createEventDispatcher, onDestroy } from "svelte";
 
     import Badge from "$lib/components/Badge.svelte";
@@ -40,6 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:visible={show || !animated}
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
+    on:keydown={onEnterOrSpace(() => toggle())}
+    tabindex="-1"
+    role="button"
 >
     <Badge
         tooltip="{tr.editingToggleVisualEditor()} ({getPlatformString(keyCombination)})"
diff --git a/ts/editor/StickyBadge.svelte b/ts/editor/StickyBadge.svelte
index 2fefc9555..96b0a5318 100644
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { bridgeCommand } from "@tslib/bridgecommand";
     import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
+    import { onEnterOrSpace } from "@tslib/keys";
     import { onMount } from "svelte";
 
     import Badge from "$lib/components/Badge.svelte";
@@ -43,6 +44,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:highlighted={active}
     class:visible={show || !animated}
     on:click|stopPropagation={toggle}
+    on:keydown={onEnterOrSpace(() => toggle())}
+    tabindex="-1"
+    role="button"
 >
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
diff --git a/ts/lib/tag-editor/AutocompleteItem.svelte b/ts/lib/tag-editor/AutocompleteItem.svelte
index 64a6f7c5e..0523736f2 100644
--- a/ts/lib/tag-editor/AutocompleteItem.svelte
+++ b/ts/lib/tag-editor/AutocompleteItem.svelte
@@ -30,6 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:mouseup
     on:mouseenter
     on:mouseleave
+    role="button"
 >
     <slot />
 </div>