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

@@ -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}"));
     }

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: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  --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",
         "vitest:once": "cd ts && vitest run",
         "vitest": "cd ts && vitest"
     },

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>

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}>

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">

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>
 

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)})"

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)})"

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)})"

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>