From c94266a1275f5e2542cd666a1983827bd6c7bbf8 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 9 Aug 2024 12:04:43 +0600
Subject: [PATCH] web/DonateOptionsCard: better accessibility

---
 web/i18n/en/donate.json                            |  4 +++-
 web/src/components/donate/DonateOptionsCard.svelte | 13 +++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
index 7cadafde..09e27130 100644
--- a/web/i18n/en/donate.json
+++ b/web/i18n/en/donate.json
@@ -15,5 +15,7 @@
     "card.option.5": "cup of coffee",
     "card.option.10": "full size pizza",
     "card.option.15": "full lunch",
-    "card.option.30": "lunch for two"
+    "card.option.30": "lunch for two",
+
+    "card.custom.submit": "donate custom amount"
 }
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index f9211bc8..ac36b984 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -50,12 +50,14 @@
 </script>
 
 <div id="donation-box">
-    <div id="donation-types">
+    <div id="donation-types" role="tablist" aria-orientation="horizontal">
         <button
             id="donation-type-once"
             class="donation-type"
             on:click={() => (processor = "stripe")}
             class:selected={processor === "stripe"}
+            aria-selected={processor === "stripe"}
+            role="tab"
         >
             <div class="donation-type-icon"><IconCoin /></div>
             <div class="donation-title">{$t("donate.card.once")}</div>
@@ -68,6 +70,8 @@
             class="donation-type"
             on:click={() => (processor = "liberapay")}
             class:selected={processor === "liberapay"}
+            aria-selected={processor === "liberapay"}
+            role="tab"
         >
             <div class="donation-type-icon"><IconCalendarRepeat /></div>
             <div class="donation-title">{$t("donate.card.monthly")}</div>
@@ -111,7 +115,12 @@
                 on:keydown={(e) => e.key === "Enter" && sendCustom()}
             />
         </div>
-        <button id="donation-custom-submit" on:click={sendCustom}>
+        <button
+            id="donation-custom-submit"
+            on:click={sendCustom}
+            aria-label={$t("donate.card.custom.submit")}
+            type="submit"
+        >
             <IconArrowRight />
         </button>
     </div>