From 7bcb57b89e3f416f15d33611aacc0ea955a21611 Mon Sep 17 00:00:00 2001
From: Ben Olson <ben.k.olson@gmail.com>
Date: Mon, 13 Nov 2023 17:40:04 -0800
Subject: [PATCH] Resolve a11y for tag options buttons (#2787)

* resolve TagAddButton a11y
better comments to document tagindex reasoning

* resolved a11y for TagsSelectedButton
allow focus to TagsSelectedButton with Shift+Tab and Enter or Space to show popover

* safely ignore a11y warning as container for interactables is not itself interactable

* Update CONTRIBUTORS

* quick fix syntax

* quick fix syntax

* quick fix syntax

* quick fix syntax

* resolved a11y in accordance with ARIA APG Disclure pattern

* resolved a11y
ideally should replace with  with
a11y-click-events-have-key-events is explicitly ignored as the alternative (adding ) seems more clunky

* resolved SpinBox a11y
cannot focus on these buttons, so no key event handling needed (keyboard editting already possible by just typing in the field)
widget already properly follows ARIA APG Spinbutton pattern

* cleanup

* onEnterOrSpace() function implemented as discussed in #2787 and #2564

* quick syntax and such changes
---
 CONTRIBUTORS                                         |  1 +
 ts/change-notetype/Alert.svelte                      | 10 +++++++++-
 ts/components/SpinBox.svelte                         |  4 ++++
 ts/lib/keys.ts                                       | 11 +++++++++++
 ts/tag-editor/TagSpacer.svelte                       |  4 +++-
 ts/tag-editor/tag-options-button/TagAddButton.svelte |  5 ++++-
 .../tag-options-button/TagOptionsButton.svelte       |  1 +
 .../tag-options-button/TagsSelectedButton.svelte     | 12 ++++++++++--
 8 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index e0043bd5f..2c889920f 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -148,6 +148,7 @@ user1823 <92206575+user1823@users.noreply.github.com>
 Gustaf Carefall <https://github.com/Gustaf-C>
 virinci <github.com/virinci>
 snowtimeglass <snowtimeglass@gmail.com>
+Ben Olson <github.com/grepgrok>
 
 ********************
 
diff --git a/ts/change-notetype/Alert.svelte b/ts/change-notetype/Alert.svelte
index a3ce9e305..79406785e 100644
--- a/ts/change-notetype/Alert.svelte
+++ b/ts/change-notetype/Alert.svelte
@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "@tslib/ftl";
+    import { onEnterOrSpace } from "@tslib/keys";
     import { slide } from "svelte/transition";
 
     import Badge from "../components/Badge.svelte";
@@ -29,7 +30,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div class="alert alert-warning" in:slide out:slide>
     {#if unused.length > maxItems}
-        <div class="clickable" on:click={() => (collapsed = !collapsed)}>
+        <div
+            class="clickable"
+            on:click={() => (collapsed = !collapsed)}
+            on:keydown={onEnterOrSpace(() => (collapsed = !collapsed))}
+            role="button"
+            tabindex="0"
+            aria-expanded={!collapsed}
+        >
             <Badge iconSize={80}>
                 {@html icon}
             </Badge>
diff --git a/ts/components/SpinBox.svelte b/ts/components/SpinBox.svelte
index a9eb00919..e80aa0492 100644
--- a/ts/components/SpinBox.svelte
+++ b/ts/components/SpinBox.svelte
@@ -96,11 +96,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:focusout={() => (focused = false)}
     />
     {#if isDesktop()}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
             class="spinner decrement"
             class:active={value > min}
             tabindex="-1"
             title={tr.actionsDecrementValue()}
+            role="button"
             on:click={() => {
                 input.focus();
                 if (value > min) {
@@ -122,11 +124,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html chevronDown}
             </IconConstrain>
         </div>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
             class="spinner increment"
             class:active={value < max}
             tabindex="-1"
             title={tr.actionsIncrementValue()}
+            role="button"
             on:click={() => {
                 input.focus();
                 if (value < max) {
diff --git a/ts/lib/keys.ts b/ts/lib/keys.ts
index e49d0cebc..66a26d578 100644
--- a/ts/lib/keys.ts
+++ b/ts/lib/keys.ts
@@ -120,3 +120,14 @@ export function isArrowDown(event: KeyboardEvent): boolean {
 
     return isApplePlatform() && metaPressed(event) && event.code === "KeyN";
 }
+
+export function onEnterOrSpace(callback: () => void): (event: KeyboardEvent) => void {
+    return (event: KeyboardEvent) => {
+        switch (event.code) {
+            case "Enter":
+            case "Space":
+                callback();
+                break;
+        }
+    };
+}
diff --git a/ts/tag-editor/TagSpacer.svelte b/ts/tag-editor/TagSpacer.svelte
index f05a1c155..4d946d8fb 100644
--- a/ts/tag-editor/TagSpacer.svelte
+++ b/ts/tag-editor/TagSpacer.svelte
@@ -2,7 +2,9 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<div class="tag-spacer" on:click>
+<!-- on:click allows clicking focus to the tag editor -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="tag-spacer" on:click role="textbox" tabindex="-1">
     <br />
 </div>
 
diff --git a/ts/tag-editor/tag-options-button/TagAddButton.svelte b/ts/tag-editor/tag-options-button/TagAddButton.svelte
index dc451d83c..b3eff9032 100644
--- a/ts/tag-editor/tag-options-button/TagAddButton.svelte
+++ b/ts/tag-editor/tag-options-button/TagAddButton.svelte
@@ -21,10 +21,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<!-- toggle tabindex to allow Shift+Tab to move focus to the last field -->
+<!-- toggle tabindex to allow Tab to move focus to the tag editor from the last field -->
+<!-- and allow Shift+Tab to move focus to the last field while inputting tag -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
     class="tag-add-button"
     title="{tr.editingTagsAdd()} ({getPlatformString(keyCombination)})"
+    role="button"
     tabindex={$currentTagInput ? -1 : 0}
     on:click={appendTag}
     on:focus={appendTag}
diff --git a/ts/tag-editor/tag-options-button/TagOptionsButton.svelte b/ts/tag-editor/tag-options-button/TagOptionsButton.svelte
index 69ad34ee6..44360df74 100644
--- a/ts/tag-editor/tag-options-button/TagOptionsButton.svelte
+++ b/ts/tag-editor/tag-options-button/TagOptionsButton.svelte
@@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let keyCombination: string;
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
     class="tag-options-button gap"
     bind:offsetHeight={badgeHeight}
diff --git a/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte b/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte
index 98f44843e..f548a54a6 100644
--- a/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte
+++ b/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte
@@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@tslib/ftl";
     import { getPlatformString } from "@tslib/shortcuts";
     import { dotsIcon } from "./icons";
+    import { onEnterOrSpace } from "@tslib/keys";
 
     const dispatch = createEventDispatcher();
 
@@ -29,7 +30,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     shift={0}
     let:asReference
 >
-    <div class="tags-selected-button" use:asReference on:click={() => (show = !show)}>
+    <div
+        class="tags-selected-button"
+        use:asReference
+        role="button"
+        tabindex="0"
+        on:click={() => (show = !show)}
+        on:keydown={onEnterOrSpace(() => (show = !show))}
+    >
         <IconConstrain>{@html dotsIcon}</IconConstrain>
     </div>
 
@@ -50,8 +58,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .tags-selected-button {
+        line-height: 1;
         :global(svg) {
-            padding-bottom: 2px;
             cursor: pointer;
             fill: currentColor;
             opacity: 0.6;