Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 21:27:39 +02:00
Code Issues Packages Projects Releases 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
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>