blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

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