# inputmode="decimal"/"numeric" used appropriately

- **Pattern:** `ab-001453` (`finserv-form-validation.error-edge-cases.inputmode-attributes`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001453
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001453)

## Why it matters

Mobile users who see a text keyboard instead of a numeric pad when entering a routing number or transfer amount experience significant friction: they must switch keyboard modes manually, increasing the chance of typos and form abandonment. WCAG 2.2 SC 1.3.5 (Identify Input Purpose) covers this by requiring inputs to expose their expected input type to browsers and assistive technology. While not a security issue, it directly impacts conversion rates for financial flows where precision matters most.

## Severity rationale

Low because incorrect inputmode degrades mobile UX and increases typo rates but does not expose data or enable exploitation.

## Remediation

Set `inputmode` explicitly on every financial input element in `src/components/`. Use `"decimal"` for amounts that accept fractions and `"numeric"` for integer-only fields.

```tsx
{/* src/components/TransferForm.tsx */}
<input
  type="text"
  inputMode="decimal"
  pattern="[0-9]*[.,]?[0-9]{0,2}"
  placeholder="0.00"
  aria-label="Amount in dollars"
/>

<input
  type="text"
  inputMode="numeric"
  pattern="[0-9]{9}"
  placeholder="Routing number"
  aria-label="9-digit routing number"
/>
```

Note: `type="number"` can cause `onChange` issues in React with leading zeros; `type="text"` with `inputMode="numeric"` is safer for account and routing number fields.

## Detection

- **ID:** `inputmode-attributes`
- **Severity:** `low`
- **What to look for:** Count all financial input elements across the project (amount, account number, routing number, percentage fields). For each, classify whether the `inputmode` attribute is set to the correct value: `"decimal"` for currency amounts, `"numeric"` for integer-only fields (account numbers, routing numbers). Quote the actual `inputmode` value found (or its absence). Report: "X of Y financial inputs have the correct inputmode attribute."
- **Pass criteria:** At least 100% of financial inputs have an appropriate `inputmode` attribute. Amount inputs use `inputmode="decimal"`, account/routing number inputs use `inputmode="numeric"`. No more than 0 financial inputs use `inputmode="text"` or omit the attribute entirely.
- **Fail criteria:** Any financial input uses `inputmode="text"` or has no inputmode, resulting in a text keyboard on mobile.
- **Skip (N/A) when:** The project has no financial inputs (0 financial input elements found after searching `src/`, `app/`, `components/`).
- **Detail on fail:** Example: `"Amount input has inputmode='text' (or none). Mobile users see text keyboard instead of numeric."`
- **Cross-reference:** The Accessibility Fundamentals audit covers broader input labeling and mobile UX patterns that complement financial inputmode usage.
- **Remediation:** Use appropriate inputmode attributes in form components under `src/components/`:

  **In `src/components/TransferForm.tsx`:**
  ```html
  <!-- Currency amount -->
  <input
    type="number"
    inputmode="decimal"
    step="0.01"
    placeholder="0.00"
  />

  <!-- Account number (digits only) -->
  <input
    type="text"
    inputmode="numeric"
    placeholder="Account number"
  />

  <!-- Routing number (digits only) -->
  <input
    type="text"
    inputmode="numeric"
    placeholder="Routing number"
  />
  ```

## External references

- wcag 1.3.5

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001453