Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/DonateOptionsCard: better accessibility

Browse source
This commit is contained in:
wukko 2024-08-09 12:04:43 +06:00
parent d4e91f2a1c
commit c94266a127
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/i18n/en/donate.json
View file

@ -15,5 +15,7 @@
"card.option.5": "cup of coffee", "card.option.5": "cup of coffee",
"card.option.10": "full size pizza", "card.option.10": "full size pizza",
"card.option.15": "full lunch", "card.option.15": "full lunch",
"card.option.30": "lunch for two" "card.option.30": "lunch for two",
"card.custom.submit": "donate custom amount"
} }

13
web/src/components/donate/DonateOptionsCard.svelte
View file

@ -50,12 +50,14 @@
</script> </script>
<div id="donation-box"> <div id="donation-box">
<div id="donation-types"> <div id="donation-types" role="tablist" aria-orientation="horizontal">
<button <button
id="donation-type-once" id="donation-type-once"
class="donation-type" class="donation-type"
on:click={() => (processor = "stripe")} on:click={() => (processor = "stripe")}
class:selected={processor === "stripe"} class:selected={processor === "stripe"}
aria-selected={processor === "stripe"}
role="tab"
> >
<div class="donation-type-icon"><IconCoin /></div> <div class="donation-type-icon"><IconCoin /></div>
<div class="donation-title">{$t("donate.card.once")}</div> <div class="donation-title">{$t("donate.card.once")}</div>
@ -68,6 +70,8 @@
class="donation-type" class="donation-type"
on:click={() => (processor = "liberapay")} on:click={() => (processor = "liberapay")}
class:selected={processor === "liberapay"} class:selected={processor === "liberapay"}
aria-selected={processor === "liberapay"}
role="tab"
> >
<div class="donation-type-icon"><IconCalendarRepeat /></div> <div class="donation-type-icon"><IconCalendarRepeat /></div>
<div class="donation-title">{$t("donate.card.monthly")}</div> <div class="donation-title">{$t("donate.card.monthly")}</div>
@ -111,7 +115,12 @@
on:keydown={(e) => e.key === "Enter" && sendCustom()} on:keydown={(e) => e.key === "Enter" && sendCustom()}
/> />
</div> </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 /> <IconArrowRight />
</button> </button>
</div> </div>