inputmode="decimal"/"numeric" used appropriately

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.

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

{/* 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.

• ID: finserv-form-validation.error-edge-cases.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:

  <!-- 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"
  />