fix(contribution): sanitize amount input and a11y polish

This commit is contained in:
Jennie Robinson Faber 2026-05-23 14:58:39 +01:00
parent 81783866d1
commit f28558a433

View file

@ -58,6 +58,7 @@
type="button"
class="contribution-preset-chip"
:class="{ active: numericAmount === preset.amount }"
:aria-pressed="numericAmount === preset.amount"
@click="selectPreset(preset.amount)"
>
${{ preset.amount }}
@ -97,7 +98,11 @@ import {
const props = defineProps({
modelValue: { type: Number, required: true },
cadence: { type: String, required: true },
cadence: {
type: String,
required: true,
validator: (v) => v === 'monthly' || v === 'annual',
},
allowCadenceChange: { type: Boolean, default: true },
showSummary: { type: Boolean, default: true },
summaryNote: { type: String, default: '' },
@ -134,15 +139,14 @@ const onAmountInput = (event) => {
return
}
const n = Number(raw)
emit('update:modelValue', Number.isFinite(n) ? n : 0)
const sanitized = Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0
emit('update:modelValue', sanitized)
}
const selectPreset = (amount) => {
emit('update:modelValue', amount)
}
// Annualmonthly snap: floor(annual/12)*12 keeps the amount cleanly divisible
// before we divide, so toggling cadences never leaves fractional dollars.
const onCadenceChange = (newCadence) => {
if (newCadence === props.cadence) return
const current = numericAmount.value