Skip to content

馃悰 Missing Optional Field Labels on Payment Details Form#93

Description

@desoga10

Description

The payment details form lacks visual indicators to distinguish between required and optional fields. All input fields currently appear without an "(optional)" label, creating confusion about which fields must be completed versus which are supplementary.

Current Behavior

All payment form fields appear identical without any indication of their required/optional status:

  • Bank Account Name
  • Bank Account Number
  • Currency
  • Sort Code
  • SWIFT
  • IBAN
  • Routing Number
  • Account Type
  • Beneficiary Name
  • Bank Address

Impact:

  • Users unclear which fields are mandatory
  • Potential form abandonment due to uncertainty
  • Poor accessibility and user experience

Expected Behavior

Optional fields should display an "(optional)" label next to the field name, making it immediately clear which information is required versus supplementary.

Example:

<!-- Current (unclear) -->
<mat-form-field>
  <mat-label>SWIFT</mat-label>
  <input matInput />
</mat-form-field>

<!-- Expected (clear) -->
<mat-form-field>
  <mat-label>SWIFT (optional)</mat-label>
  <input matInput />
</mat-form-field>

Visual Reference

Image

Proposed Solution

Add "(optional)" suffix to non-required fields:

  • Identify which fields are truly optional based on payment processing requirements
  • Add "(optional)" text to field labels for optional fields
  • Maintain consistent styling with Angular Material design patterns

Acceptance Criteria

  • All optional fields clearly marked with "(optional)" label
  • Required fields remain without the label (implicitly required)
  • Consistent styling across all payment form fields
  • Labels properly aligned and readable
  • Tested across different screen sizes (responsive)
  • Accessible (screen readers can distinguish required/optional)

Priority

Medium - Affects user experience but not blocking functionality

Estimated Complexity

Low - Template updates with potential i18n considerations

Additional Context

This improvement aligns with standard form UX practices and improves accessibility for all users, particularly those relying on assistive technologies.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingenhancementNew feature or requestgood first issueGood for newcomers

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions